HTML Tables — tr, td, th, colspan, rowspan

Basic Table Structure

HTML tables organize information into rows and columns. They are best used for tabular data such as price lists, schedules, reports, scoreboards, comparison charts, and account summaries.

Tables should not be used for page layout. Modern page layout should be handled with CSS tools like Flexbox and Grid, while tables should be reserved for real data relationships.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>25</td>
            <td>London</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>New York</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 users</td>
        </tr>
    </tfoot>
</table>

Table Tags Reference

A well-structured table uses semantic elements to separate the header, body, and footer. This improves readability, styling, and accessibility for assistive technologies.

Caption and Header Scope

The <caption> element gives the table a title, which helps users understand what the table represents. Header cells should also use scope="col" or scope="row" when appropriate so screen readers can associate headers with the correct data cells.

<table>
    <caption>Student Scores</caption>
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Math</th>
            <th scope="col">Science</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Ava</th>
            <td>88</td>
            <td>91</td>
        </tr>
    </tbody>
</table>

Spanning Rows & Columns

Sometimes a table needs cells that stretch across multiple rows or columns. HTML supports this with the rowspan and colspan attributes. These are commonly used in grouped headers, timetable layouts, and summary rows.

<table border="1">
    <caption>Quarterly Sales</caption>
    <thead>
        <tr>
            <th rowspan="2">Product</th>
            <th colspan="2">Sales</th>
        </tr>
        <tr>
            <th>Q1</th>
            <th>Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Widget A</td>
            <td>$1,200</td>
            <td>$1,500</td>
        </tr>
        <tr>
            <td>Widget B</td>
            <td>$800</td>
            <td>$950</td>
        </tr>
    </tbody>
</table>

Styling Tables with CSS

HTML provides the structure of the table, while CSS controls its appearance. Common table styles include borders, striped rows, spacing, alignment, and hover effects. Clean styling can make large data sets much easier to read.

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #d1d5db;
    padding: 12px;
    text-align: left;
}

thead {
    background: #f3f4f6;
}

tbody tr:nth-child(even) {
    background: #f9fafb;
}

tbody tr:hover {
    background: #eef6ff;
}

Responsive Tables

Wide tables can be difficult to display on small screens. A common pattern is to wrap the table in a container with horizontal scrolling. This allows mobile users to scroll sideways instead of breaking the layout.

<div style="overflow-x:auto;">
    <table>
        <!-- wide table content -->
    </table>
</div>

Best Practices

• Use tables only for data that naturally fits rows and columns.
• Add a <caption> so users understand what the table represents.
• Use <th> and scope attributes for better accessibility.
• Keep large tables readable with borders, spacing, and striped rows.
• Make wide tables responsive by allowing horizontal scrolling on small screens.