Defining Tables in HTML

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.

Table Cells

Table Cell are the building blocks for defining the Table. It is denoted with <td> as a start tag & </td> as a end tag.

Syntax

</td> Content...</td>

Table Rows

The rows can be formed with the help of combination of Table Cells. It is denoted by <tr> and </tr> tag as a start & end tags.

Syntax

</tr> Content...</tr>

Table Headers

The Headers are generally use to provide the Heading. The Table Headers can also be used to add the heading to the Table. This contains the <th> & </th> tags.

Syntax

</th> Content...</th>

Example 1: Creating a simple table in HTML using a table tag.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <table>
        <tr>
            <th>Book Name</th>
            <th>Author Name</th>
            <th>Genre</th>
        </tr>
        <tr>
            <td>The Book Thief</td>
            <td>Markus Zusak</td>
            <td>Historical Fiction</td>
        </tr>
        <tr>
            <td>The Cruel Prince</td>
            <td>Holly Black</td>
            <td>Fantasy</td>
        </tr>
        <tr>
            <td>The Silent Patient</td>
            <td> Alex Michaelides</td>
            <td>Psychological Fiction</td>
        </tr>
    </table>
</body>

</html>

Output:

HTML Table

HTML Tables

HTML tables offer a powerful tool for presenting data on your website. But mastering them goes beyond just rows and columns. This article serves as your ultimate guide to unlocking the potential of HTML tables, stepping beyond the basics.

Prerequisites: HTML Introduction