colspan

The colspan attribute makes a table cell stretch across multiple columns — used when one value or label genuinely applies to more than one column.

Syntax

<td colspan="2">spans two columns</td>

Basic Example

<table>
    <tr>
        <th colspan="3">Semester 1 Results</th>
    </tr>
    <tr>
        <th>Student</th>
        <th>Math</th>
        <th>Science</th>
    </tr>
    <tr>
        <td>Aman</td>
        <td>92</td>
        <td>88</td>
    </tr>
</table>

Browser output: "Semester 1 Results" stretches across all three columns as one wide title cell, sitting above the normal 3-column header row beneath it.

How It Works

colspan="3" tells the browser this one cell should occupy the space of 3 normal cells side by side — meaning that row needs 2 fewer actual <td>/<th> elements to still line up correctly with the rows around it.

Important Attributes

Real-World Example

<tr>
    <td>Course Fee</td>
    <td colspan="2">₹45,000 (inclusive of GST)</td>
</tr>

A pricing table where one note genuinely applies across two columns worth of space — a single, wider cell reads more naturally here than two separate ones.

Common Mistakes

• Miscounting how many actual cells a row needs after adding colspan, producing a row that no longer aligns with the table's other columns
• Overusing colspan to force a visual layout instead of representing genuinely merged data

Best Practices

• Double-check that every row's total column count (including spans) still adds up to the table's real column count
• Use colspan only when a value or label genuinely applies across multiple columns

Accessibility Considerations

Screen readers can announce spanned cells correctly, but very complex spanning patterns can still be genuinely hard to follow audibly — keep spanning as simple as the data allows.

SEO Considerations

No direct ranking effect.

Browser & Modern HTML Notes

Well-supported and unchanged across HTML versions — a straightforward, reliable attribute.

Mini Practice

1. Add a spanning title row across a 3-column table using colspan="3".
2. Fix a table row where a colspan="2" cell was added but the row still has too many total cells for the table's column count.

Related HTML Notes

• rowspan
• table-cell