What are the HTML tags used to display the data in the tabular form ?

31 Oct, 2021
In this article, we will know the HTML tags that can be used to display the data in tabular form. A  table is a representation of data in rows and columns, that helps to organize the complex structured data. Tables are widely used in communication, research, and data analysis. For instance, if we need to find the data from the set of information that is not organized properly, then we can’t find that specific data at a glance. In a similar way, we can use the table format using the HTML Table tag in the webpage. 
The possible areas where we can use the table for displaying the data:
A complex or large amount of data can be easily converted into better form to make it more convenient.
Due to tabular representation, it makes a comparison of the data an easier task.
It creates a basis for statistical analysis.
An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.
 
Syntax:
<table>
    <tr><th>Table Header</th></tr>
    <tr><td>Table Data</td></tr>
 </table>
We will understand all the 3 tags, their individual characteristics/uses through the example.
HTML <tr> Tag: It is used to define a row in an HTML Table. It mainly consists of multiple <th> or <td> elements under it.
Syntax:
<tr>
    <td>Data</td>
</tr>
HTML <th> Tag: It is used to define the header of a table. In <th> tag, the text is marked as a bold and aligned center by default.
Syntax:
<th>Table Heading</th>
HTML <td> Tag: It is used to insert or add data in each cell. In <td> tag text is regular and left-aligned by default.
 
Syntax: 
<td>Table data</td>
Approach: Firstly, we will create a table using the <table> tag then we will divide the table into two parts: head and body of the table using the <thead> and <tbody>. Under <thead> tag, we will add all the headings of the table and under the <tbody> tag, we will use the <tr> tag for defining the table row. Under the <thead> tag, we will add the <th> tag for giving the headings to the table. Finally, under the <tbody> tag, we will define each cell by using the <td> tag. 
We will understand the above concepts through the examples.
Example 1: In this example, we have created an HTML Table to store the marks of each student in a tabular form. 
HTML
<!DOCTYPE html><html>  <head>    <title>        What are the HTML tags used         to display the data in the         tabular form?    </title>    <style>    table,    th,    td {        border: 1px solid black;        text-align: center;    }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>            What are the HTML tags used             to display the data in the             tabular form?        </h2>        <table>            <thead>                <tr>                    <th>Roll No.</th>                    <th>Name</th>                    <th>Physics</th>                    <th>Chemistry</th>                    <th>Maths</th>                </tr>            </thead>            <tbody>                <tr>                    <td>1</td>                    <td>Kunal</td>                    <td>91</td>                    <td>85</td>                    <td>96</td>                </tr>                <tr>                    <td>2</td>                    <td>Aryan</td>                    <td>96</td>                    <td>92</td>                    <td>91</td>                </tr>                <tr>                    <td>3</td>                    <td>Rohan</td>                    <td>80</td>                    <td>85</td>                    <td>98</td>                </tr>                <tr>                    <td>4</td>                    <td>Mohan</td>                    <td>94</td>                    <td>90</td>                    <td>89</td>                </tr>            </tbody>        </table>    </center></body>  </html>
Output:
Example 2: This example describes the use of the HTML Table.
HTML
<!DOCTYPE html><html>  <head>    <title>        What are the HTML tags used         to display the data in the         tabular form?    </title>    <style>    table,    th,    td {        border: 1px solid black;        text-align: center;    }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</h1>        <h2>             What are the HTML tags used             to display the data in the             tabular form?        </h2>        <table>            <thead>                <tr>                    <th>ID No.</th>                    <th>Name</th>                    <th>Entry time</th>                    <th>Leave time</th>                </tr>            </thead>            <tbody>                <tr>                    <td>C-124</td>                    <td>Sahaj</td>                    <td>6:00 am</td>                    <td>7:30 am</td>                </tr>                <tr>                    <td>C-102</td>                    <td>Vedanshu</td>                    <td>6:10 am</td>                    <td>6:55 am</td>                </tr>                <tr>                    <td>C-59</td>                    <td>John</td>                    <td>7:00 am</td>                    <td>8:20 am</td>                </tr>                <tr>                    <td>C-169</td>                    <td>Priyanshu</td>                    <td>7:30 am</td>                    <td>8:15 am</td>                </tr>                <tr>                    <td>C-145</td>                    <td>Yash</td>                    <td>7:35</td>                    <td>8:30</td>                </tr>            </tbody>        </table>    </center></body>  </html>
Output:
HTML-Questions
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array