HTML Tables

HTML Tables

Leave a Comment / Html, Programming / By / and styling tag, and td tag, captions, Creating tables, html table, html table tag, HTML Tables, simple HTML table, Table headers, th tag, tr tag

HTML Tables.

What is HTML Tables?

Tables are a technique of arranging and displaying data and digital information on a web page in a structured grid or tabular style in row and column order using HTML. Tables are made up of rows (rows) and columns (columns) in any table. Whereas a table cell is the term used to describe each intersection of a row, row, and column. Table cells are used to enter or show data and information. Any website may utilize any HTML table to analyze comparative data and information as well as multiple kinds of basic data and information.

HTML Tables

Creating tables with <table>, <tr>, <th>, and <td>.

Rows, columns, and cells are used in combination to form every table in an HTML web page. The <table>, <tr>, <td>, and <th> table elements are the main components of a straightforward HTML table.

Here, each element of an HTML table is thoroughly explained.

  • <table> – The HTML element known as “table” serves as a digital information storage space for a whole table. This tag specifies the table start and table end tags for a new HTML table.
  • <tr> – A table’s new row is represented by the <tr> table row tag element. Individual rows inside a table are grouped and defined in a table structure using table row tags.
  • <td> – A blank table cell within a table row is represented by the <td> table data tag element. The actual information or content that appears in a table or column is digitally saved and presented.
  • <th> – The <td> table data tag is comparable to the <th> table header element. However, the header cell that is visible at the top of the table is defined by the table heading tag. Table header cells are used to mark columns or rows in the heading at the top of a table. They commonly show text and information in strong and big font sizes.

Here’s a basic example of a simple HTML table.

<!DOCTYPE html>

<html>

  <head>

    <title>Html table tag example</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <table border=”1″ bgcolor=”yellow”>

    <tr>

        <th>Table Heading 1</th>

        <th>Table Heading 2</th>

        <th>Table Heading 3</th>

    </tr>

    <tr>

        <td>Table cell 1</td>

        <td>Table cell 2</td>

        <td>Table cell 3</td>

    </tr>

    <tr>

        <td>Table cell 4</td>

        <td>Table cell 5</td>

        <td>Table cell 6</td>

    </tr>

</table>

  </body>

</html>

In the HTML table example above.

  • <table> – The table tag denotes the beginning and the end of a new table.
  • <tr> – In HTML tables, the table row element is used to add additional table row rows.
  • <th> – Tag for table header a header cell for any HTML table that shows heading information in bold language.
  • <td> – The table data tag shows an empty data cell in an HTML table for digital text and information content.
  • table border – In an HTML table, a table border is used to display a border around each row, each column, and each cell.

Table headers, captions, and styling.

By including table headers, and captions, and applying unique CSS styles to the top row of the table, you may enhance the commercial and visual appeal of your current HTML tables, just as you can with any straightforward HTML table.

Therefore, let’s include table heads in an HTML table.

Table header (<th>) tag.

To show heading information labels in a table row or column, header elements are used in HTML tables. Table heads are by default shown in strong font. Any HTML table header cell may be created by using the <th> table heading element inside the <tr> tag element.

The HTML table heading tag is an example.

<!DOCTYPE html>

<html>

  <head>

    <title>Html table Heading tag example</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

      <table border=”1″bgcolor=”pink”>

    <tr>

        <th>#. </th>

        <th>Model Name</th>

        <th>Brand</th>

        <th>Processor</th>

        <th>Manufacture year</th>

        <th>Price</th>

    </tr>

    <tr>

        <td>1. </td>

        <td>Dell Xps Laptop</td>

        <td>Dell</td>

         <td>13th gen intel core i5 processor</td>

        <td>2023</td>

        <td>1,12000</td>

    </tr>

    <tr>

        <td>2. </td>

        <td>Apple Macbook Pro M2</td>

        <td>Apple</td>

         <td>13th gen intel core i9 processor</td>

        <td>2023</td>

        <td>2,50000</td>

    </tr>

</table>

  </body>

</html>

Table Caption (<caption>) Tag.

A heading title or table description is displayed for the full planned table in an HTML table caption. It may be shown either immediately before or just after the HTML table you generated.

How to use captions in html table.

<!DOCTYPE html>

<html>

  <head>

    <title>Html table Caption tag example</title>

    <link rel=”stylesheet” href=”styles.css” />

  </head>

  <body>

     <table border=”1″ bgcolor=”aqua”>

    <caption><strong>Programming Course Table</strong></caption>

    <tr>

        <th>#. </th>

        <th>Course Name</th>

        <th>Duration</th>

        <th>Price</th>

        <th>Medium</th>

    </tr>

    <tr>

        <td>1. </td>

        <td>Html Web Development</td>

        <td>30 Days</td>

        <td>599</td>

        <td>English</td>

    </tr>

    <tr>

        <td>2. </td>

        <td>Css Web Development</td>

        <td>50 Days</td>

        <td>799</td>

        <td>Hindi</td>

    </tr>

</table>

  </body>

</html>

Html Table Example.

<!DOCTYPE html>

<html>

<head>

    <title>HTML Table Example</title>

    <style>

        table {

            width: 100%;

            border-collapse: collapse;

        }

        th, td {

            border: 2px solid #FF5722;

            text-align: center;

            padding: 10px;

        }

        th {

            background-color: #00FFCC;

        }

        tr:nth-child(even) {

            background-color: #26A69A;

        }

        tr:nth-child(odd) {

            background-color: #FFEB3B;

        }

    </style>

</head>

<body>

    <h1>Student Report Card</h1>

    <table>

        <caption><strong>Student Report</strong></caption>

        <thead>

            <tr>

                <th>#. </th>

                <th>Student Name</th>

                <th>Class</th>

                <th>Address</th>

                <th>Contact</th>

                <th>Percentage</th>

                <th>Board</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1. </td>

                <td>Amit Jain</td>

                <td>10th</td>

                <td>Sirohi</td>

                <td>112235334</td>

                <td>89%</td>

                <td>Rbse</td>

            </tr>

            <tr>

                <td>2. </td>

                <td>Vinay Sharma</td>

                <td>12th</td>

                <td>Jodhpur</td>

                <td>331137334</td>

                <td>91%</td>

                <td>Cbse</td>

            </tr>

            <tr>

                <td>3. </td>

                <td>Anita Kothari</td>

                <td>10th</td>

                <td>Jaipur</td>

                <td>685559766</td>

                <td>97%</td>

                <td>Cbse</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

In the HTML table example above.

  • <table> – The HTML table tag element <table> denotes the start and end tags for the table.
  • <caption> – The table’s caption is shown using the HTML caption tag element.
  • <thead> – The table header rows in a table are grouped together using the HTML thead element, while the table data rows are grouped together using the tbody table tag.
  • <th> – The header cell in the table is shown via the HTML table heading tag element.
  • <td> – An HTML table data tag element that shows an empty table.

In HTML tables, basic formatting is applied using CSS styles. for instance, table borders, backdrop colors, and text alignment for various effects.

Rate this post

Related posts

Apache open office hindiApache Open Office Hindi. Apache open officeApache Open Office. About Wps officeAbout Wps Office Hindi Microsoft office 2016About Microsoft office 2016 About Microsoft Office 2013 Pro Plus. htmlLearn Html HTML Document StructureHTML Document Structure HTML Semantic ElementsHTML Semantic Elements html5Learn Html5 About Libre office. HTML Document Structure In HindiHTML Document Structure In Hindi Text Formatting.Html Text Formatting HTML Semantic Elements In HindiHTML Semantic Elements In Hindi HTML Tables In hindiHTML Tables In Hindi Images and MultimediaImages and Multimedia in HTML Wps officeAbout Wps Office. bootstrap cssWhat Is Bootstrap Css HTML ElementsHTML Elements Html Text Formatting In HindiHtml Text Formatting In Hindi microsoft office 2016About Microsoft office 2016 Hindi About Microsoft Office 2013 Pro Plus Hindi. Forms and Input ElementsHtml Forms and Input Elements Images and Multimedia In HindiImages and Multimedia HTML in Hindi HTML Elements In HindiHTML Elements In Hindi Trigonometry Class 10th Everything About Microsoft Windows 10. त्रिकोणमिति कक्षा 10 (The Trigonometry Class 10th) sql dbmsAbout Sql – Structure Query Language What is CssAbout Css(cascading style sheet). Links and Anchor TagsHTML Links and Anchor Tags Polynomials Class 10th बहुपद कक्षा 10 (Polynomial Class 10th) Forms and Input Elements In hindiHtml Forms and Input Elements in Hindi view.jsAbout Vue.js Libre office 5About Libre office In Hindi. javascript programmingLearn Java Script Programming postgresqlAbout Postgresql Pair of Linear Equations in Two Variables Class 10th mysqlAbout mysql Links and Anchor Tags In HindiLinks and Anchor Tags In Hindi tailwind cssWhat Is Tailwind Css Css full formAbout Css In Hindi. learn c programmingLearn C Programming xmlAbout Xml Windows 10 apps DescriptionMicrosoft Windows 10 Operating System Apps. Everything About Microsoft Windows 10.Everything About Microsoft Windows 10 Hindi. bulma cssWhat Is Bulma Css tableauAbout Python Tableau search engineWhat Is A Search Engine and Their Type? pandasAbout Pandas Windows 8.1 appsMicrosoft Windows 8 Apps. plsqlAbout Pl/Sql Probability Class 10th microsoft sql serverMicrosoft Sql Server mongodbAbout MongoDb Database Trigonometric Ratios of Some Specific Angles Class 10th निर्देशांक ज्यामिति कक्षा 10 (The Coordinate Geometry Class 10th) Coordinate Geometry (Analytical Geometry) Class 10th About Microsoft office 365. कुछ विशिष्ट कोणों के लिए त्रिकोणमितीय अनुपात कक्षा 10 (Trigonometric Ratios of Specific Angles Class 10th) arduinoAbout Arduino Microcontroller Board reactjsAbout ReactJs Framework Geometrical (Graphical) Meaning of the Zeroes of a Polynomial Class 10th बहुपद के शून्यकों का ज्यामितीय (आलेखीय) अर्थ कक्षा 10 [Geometrical (Graphical) Meaning of the Zeroes of the Polynomial Class 10th] About Raspberry pi board Windows 7About Microsoft Windows 7. javaLearn Java Programming scipy python libraryAbout Scipy Python Library Introduction to HTML.Introduction to HTML scala programmingAbout Scala Programming What is linuxLinux, What is Linux, A Complete Overview of Ubuntu Linux. Windows legacy osMicrosoft Windows Legacy Operating system. python numpyAbout Python Numpy programingType of Computer Programming. दो चर वाले रैखिक समीकरण युग्म कक्षा 10 (Pair of Linear Equations in Two Variables Class 10th) समान्तर श्रेढ़ी कक्षा 10 (Arithmetic Progressions Class 10th) Arithmetic Progression Class 10th Sets Class 11th motherboardComputer Motherboard and its Components. द्विघात समीकरण कक्षा 10 (Quadratic Equations Class 10th) Quadratic Equation Class 10th type of programmingType of Computer Programming in Hindi. Variance in Statistics: Definition, Formulas, Properties, and Examples nodejsWhat is Nodejs objective cAbout Objective C Programming Operators In C Programming english.Operators In C Language. Operators In C Programming.Operators In C Programming Hindi. Data type in c programming.Data Type In C Programming Hindi. magentoAbout Magento Programming Heron’s Formula Class 9th expressjsWhat Is Express.js c# programmingAbout C# Programming kotlinAbout Kotlin Programming First Program In C Language.First Program In C Language. jsonAbout Json json javascript object notation Windows 7 hindiAbout Microsoft Windows 7 Hindi. त्रिभुज और इसके गुण कक्षा 10 (The Triangle and its Properties Class 10th) Triangle and its Properties Class 10th हीरोन का सूत्र कक्षा 9 (Heron’s Formula Class 9th) Decimal Numbers Class 7th jqueryWhat Is Jquery/javascript query समुच्चय कक्षा 11 (The Sets Class 11th) Perimeter and Area Class 6th वास्तविक संख्याओं पर संक्रियाएँ कक्षा 9वीं (Operations on Real Numbers Class 9th) Operations on Real Numbers Class 9th Data type in c programmingData Type In C Programming. दशमलव संख्याएँ कक्षा 7 (Decimal Number Class 7th) angularjsWhat is Angular Js LinuxWhat is Linux, A Complete Overview of Ubuntu Linux Hindi. asp.netAbout Asp.net computer networksType of Computer or Internet Network. InternetWhat Is The Internet? go languageAbout Go Programming Language How to Write an Informative College Essay? Windows 10 Apps HindiMicrosoft Windows 10 Apps Hindi. Squares and Square Roots Class 8th परिमाप और क्षेत्रफल कक्षा 6 (Perimeter and Area for Class 6th) Windows operating systemMicrosoft Windows Legacy Operating System Hindi. Sum of First n Terms of an Arithmetic Progression Class 10th समान्तर श्रेढ़ी के पहले n पदों का योग कक्षा 10 (Sum of n Terms of Arithmetic Progression Class 10th) Linear Equations in Two Variables Class 9th Google search engineWhat Is A Search Engine and Their Type In Hindi? assembly languageAbout Assembly Programming perl programmingAbout Perl Programming Most Used Popular Internet Messenger And Social Media Platform. joomlaAbout Joomla Cms typescript languageAbout Typescript Language First Program In C Language. in hindiFirst Program In C Language In Hindi. Coordinate Geometry Class 9th निर्देशांक ज्यामिति कक्षा 9 (The Coordinate Geometry Class 9th) समान्तर श्रेढ़ी का n वाँ पद (व्यापक पद) कक्षा 10 (nth Term of Arithmetic Progression Class 10th) वृत्त की स्पर्श रेखा और छेदक रेखा कक्षा 10 (Tangent and Secant of Circles Class 10th) विभाजन सूत्र कक्षा 10 (The Section Formula Class 10th) Tangent and Secant of Circle Class 10th Introduction to Euclid’s Geometry Class 9th यूक्लिड की ज्यामिति का परिचय कक्षा 9 (Introduction to Euclid’s Geometry Class 9th) nth Term (General Term) of an Arithmetic Progression Class 10th Section Formula Class 10th Windows 8 AppsMicrosoft Windows 8 Apps Hindi. login office 365About Microsoft office 365 Hindi. Windows 8About Microsoft Windows 8. वर्ग और वर्गमूल कक्षा 8 (Square and Square Root Class 8th) दो चरों वाले रैखिक समीकरण कक्षा 9 (Linear Equations of two Variables Class 9th) Computer Hardware hindiPc assembly and its operation. Computer Fundamental. Fractions Class 7th dart programmingAbout Dart Programming delphi programmingAbout Delphi Programming An In-Depth Review of imagestotext.io in 2023 वृत्त की जीवा द्वारा अंतरित कोण कक्षा 10 (Angle Made by a Chord of Circle Class 10th)

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top