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

Last Updated : 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.