HTML Tables

Basic Syntax

<td rowspan="2">Morning Shift</td>

The cell occupies two rows in the table's grid. The corresponding position in the following row is occupied by the spanning cell, so an extra cell should not be added there for the same grid position.

Example: Work Schedule

<table>
    <caption>Employee Shift Schedule</caption>
    <thead>
        <tr>
            <th scope="col">Shift</th>
            <th scope="col">Employee</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="rowgroup" rowspan="2">Morning</th>
            <td>Amit</td>
            <td>Development</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Testing</td>
        </tr>
        <tr>
            <th scope="row">Evening</th>
            <td>Rahul</td>
            <td>Support</td>
        </tr>
    </tbody>
</table>

The Morning header spans the first two data rows. In real-world tables, verify that the header's semantic meaning matches the cells it covers. A complex table may require a more explicit header-association approach.

Important Rules for Spans

• colspan controls how many columns a cell occupies.
• rowspan controls how many rows a cell occupies.
• Both attributes belong on table cells, including th and td.
• Spanning cells affect the table grid, so row structures must be planned carefully.
• A rowspan value of 0 has a special meaning: the cell extends to the end of its row group.
• Use spans only when the data relationships genuinely require them. Excessive merging can make tables difficult to understand and maintain.

10. Complex Tables and the id and headers Attributes

Simple tables often have obvious relationships between column headers, row headers and data cells. Complex tables may have multiple levels of headers, grouped columns or several header relationships for one data cell.

For these tables, a th element can have a unique id, and a td or th cell can use the headers attribute to reference one or more header IDs.

Example: Sales by Region and Quarter

<table>
    <caption>Quarterly Sales by Region</caption>
    <thead>
        <tr>
            <th id="region" rowspan="2">Region</th>
            <th id="north" colspan="2">North</th>
            <th id="south" colspan="2">South</th>
        </tr>
        <tr>
            <th id="north-q1">Q1</th>
            <th id="north-q2">Q2</th>
            <th id="south-q1">Q1</th>
            <th id="south-q2">Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th id="east-region" scope="row">East</th>
            <td headers="east-region north north-q1">12000</td>
            <td headers="east-region north north-q2">15000</td>
            <td headers="east-region south south-q1">10000</td>
            <td headers="east-region south south-q2">13000</td>
        </tr>
    </tbody>
</table>

Each data cell references the relevant row header, group heading and individual column heading. This helps explicitly describe the relationships in a table with multiple header levels.

How headers Works

• The id attribute uniquely identifies a header cell in the document.
• The headers attribute contains a space-separated list of IDs for header cells associated with the current cell.
• Every referenced ID must exist and identify an appropriate header cell.
• Use explicit associations when simple row and column scope relationships do not adequately express the table's structure.

For simpler tables, scope is often easier to maintain. Do not add unnecessary complexity to a table whose relationships are already clear.

11. colgroup and col

The colgroup element groups columns, while col represents one or more columns within a group. These elements can help apply presentation rules to columns without repeating styles on every cell.

Example

<table>
    <caption>Product Comparison</caption>

    <colgroup>
        <col>
        <col span="2">
    </colgroup>

    <thead>
        <tr>
            <th scope="col">Feature</th>
            <th scope="col">Basic</th>
            <th scope="col">Premium</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">Storage</th>
            <td>10 GB</td>
            <td>100 GB</td>
        </tr>
        <tr>
            <th scope="row">Support</th>
            <td>Email</td>
            <td>Priority support</td>
        </tr>
    </tbody>
</table>

The colgroup identifies the columns. The span attribute on col can represent multiple consecutive columns.

Column-level styling has limitations. CSS properties that work on ordinary cells do not all apply directly to col or colgroup. Background, border and width behavior should be tested in the target browsers.

12. Styling Tables with CSS