Learn Java, Angular, SQL with Coding Exercises & Career Tips

Tables

Tables in HTML are used to display data in a structured, tabular format using rows and columns. Each piece of data is placed inside a cell, which is the intersection of a row and a column.

Common Table Tag

Tag	Description
<table>	Defines a table
<tr>	Defines a row in a table
<th>	Defines a header cell (bold and centered by default)
<td>	Defines a standard cell
<caption>	Adds a title/caption to the table
<colgroup>	Groups columns for formatting
<col>	Specifies column properties inside <colgroup>
<thead>	Groups header content
<tbody>	Groups the main body content
<tfoot>	Groups footer content

Example: Basic table example

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Basic Table</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>Student Name</th>
            <th>Marks</th>
        </tr>

        <tr>
            <td>Prince</td>
            <td>56</td>
        </tr>

        <tr>
            <td>Rahul</td>
            <td>59</td>
        </tr>
    </table>
</body>

</html>

Output:

Table Rows ( <tr> )
The <tr> tag is used to define a row in the table. It wraps around cells defined with <td> or <th>.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Table Rows</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>Row1, Cell1</td>
            <td>Row1, Cell2</td>
            <td>Row1, Cell3</td>
        </tr>

        <tr>
            <td>Row2, Cell1</td>
            <td>Row2, Cell2</td>
            <td>Row2, Cell3</td>
        </tr>
    </table>
</body>

</html>

Output:

Table Cells ( <td> )
Each <td> tag represents a data cell within a table row. It is used for actual content in non-header cells.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Table Cells</title>
</head>

<body>
    <table border="1">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
    </table>
</body>

</html>

Output:

Table Headers ( <th> )
The <th> tag is used to define header cells. These are bold and centered by default, and usually appear in the first row.

Example:

<!DOCTYPE html>
<html>

<head>
    <title>Table Headers</title>
</head>

<body>
    <table border="1">
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
        </tr>
        <tr>
            <td>Row 1, Cell 1</td>
            <td>Row 1, Cell 2</td>
            <td>Row 1, Cell 3</td>
        <tr>
    </table>
</body>

</html>

Output:

Key Point

Always use <thead> and <tbody> for better structure and accessibility.
The <th> tag gives emphasis to headers with default styling.
Use CSS for borders and spacing for a cleaner look.
Use <caption> to describe the purpose of your table.