03. Table Tag

Introduction

HTML tables are used to display tabular data in rows and columns. The <table> element, along with <tr>, <td>, <th>, and other table elements, creates structured data displays. Tables should be used for data, not for layout purposes.

Basic Table Structure

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Data 1</td>
        <td>Data 2</td>
    </tr>
</table>

Table Elements

table

Container for the table:

<table>
    <!-- Table content -->
</table>

tr

Table row:

<tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
</tr>

td

Table data cell:

<td>Cell content</td>

th

Table header cell:

<th>Header content</th>

Complete Example

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Role</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>Developer</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>Designer</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 employees</td>
        </tr>
    </tfoot>
</table>

Best Practices

Use for Tabular Data

<!-- Good: Tabular data -->
<table>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Widget</td>
        <td>$10</td>
    </tr>
</table>

<!-- Avoid: Layout purposes -->
<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

References

• MDN Web Docs - table element