HTML Tables: Organizing Data in Rows and Columns

HTML Tables

Tables are used to display structured data in rows and columns format.

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>London</td>
        </tr>
    </tbody>
</table>

Table with Caption

<table>
    <caption>Employee Information</caption>
    <thead>
        <tr>
            <th scope="col">Employee ID</th>
            <th scope="col">Name</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>Alice Johnson</td>
            <td>Marketing</td>
        </tr>
    </tbody>
</table>

Spanning Cells

<table>
    <tr>
        <th colspan="2">Sales Report</th>
    </tr>
    <tr>
        <td>Q1</td>
        <td>$10,000</td>
    </tr>
    <tr>
        <td rowspan="2">Q2</td>
        <td>$15,000</td>
    </tr>
</table>

Accessibility Features

<table>
    <thead>
        <tr>
            <th scope="col" id="name">Name</th>
            <th scope="col" id="email">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td headers="name">John</td>
            <td headers="email">john@example.com</td>
        </tr>
    </tbody>
</table>