Yugien
Theme

colspan

The colspan attribute makes a table cell span two or more columns. Use it when one heading or value belongs across several columns in the table's logical structure.

What you will learn

Basic example

<table>
  <tr>
    <th colspan="2">Sales summary</th>
  </tr>
  <tr>
    <th>Month</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$120</td>
  </tr>
</table>

The first heading spans the two columns below it. The value must be a positive integer; colspan="2" means that the cell occupies two column positions.

Keep the table logical

Do not use colspan just to create a layout grid. Use tables for data relationships, use th for headings, and keep the number of columns consistent in each row. Complex spans may need scope or explicit header associations for assistive technology.

Responsive tables

On narrow screens, allow a data table to scroll or provide another accessible presentation. Do not hide important columns only because a wide table does not fit.

Related pages