HTML Tables

The table contains a caption, a header section, a body section and a summary section. The Total cell is a row heading, while the final cell contains the calculated value.

Important Notes

These grouping elements improve document structure and can help with styling and table processing.
A table can contain one or more tbody elements when its structure requires them.
thead and tfoot are optional when they are not needed.
Browsers can create an implicit tbody when table rows are written directly inside table in source markup.
When writing maintainable HTML, explicitly grouping rows often makes the structure easier to understand.

7. Column Headers and the scope Attribute

The scope attribute on a th element identifies whether that header applies to a column, row, column group or row group.

This information helps browsers and assistive technologies interpret the relationship between headers and data.

Common scope Values

scope="col": the header applies to its column.
scope="row": the header applies to its row.
scope="colgroup": the header applies to a group of columns.
scope="rowgroup": the header applies to a group of rows.

Example: Column Headers

<table>
    <caption>Student Examination Results</caption>
    <thead>
        <tr>
            <th scope="col">Student</th>
            <th scope="col">HTML</th>
            <th scope="col">CSS</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Anita</th>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <th scope="row">Rohan</th>
            <td>78</td>
            <td>82</td>
        </tr>
    </tbody>
</table>

The first row defines the columns. Each student's name is a row header, helping users understand the values associated with that student.

When Should You Use scope?

For simple tables with clear row and column relationships, scope="col" and scope="row" make those relationships explicit. In more complex tables, additional associations may be necessary.

8. The colspan Attribute

The colspan attribute allows one cell to span multiple columns. It is useful for grouped headings, section labels and summary rows.

Basic Syntax

<td colspan="2">Combined cell</td>

The cell occupies the space of two columns in the table's grid.

Example: Grouped Heading

<table>
    <caption>Course Performance</caption>
    <thead>
        <tr>
            <th rowspan="2" scope="col">Student</th>
            <th colspan="2" scope="colgroup">Scores</th>
        </tr>
        <tr>
            <th scope="col">HTML</th>
            <th scope="col">CSS</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Anita</th>
            <td>85</td>
            <td>90</td>
        </tr>
    </tbody>
</table>

The Scores heading spans the HTML and CSS columns. The Student header spans two rows using rowspan.

For semantic accuracy, grouped headers should have meaningful relationships with the cells beneath them. In complex tables, explicit header associations may be needed even when scope is present.

9. The rowspan Attribute

The rowspan attribute allows one cell to extend across multiple rows.