HTML colspan Attribute

HTML colspan Attribute

The HTML colspan attribute specifies how many columns a table header or data cell spans. It is used with the <th> and <td> elements when a single cell needs to extend across two or more columns.

Syntax

The colspan attribute is specified on a <th> or <td> element using an integer from 1 through 1000.

<td colspan="2">Content</td>

In this example, the table cell occupies the space of two columns.

Attribute Value

The value of the colspan attribute specifies the number of columns that the cell spans.

A conforming colspan value must be greater than zero and no greater than 1000.

Elements That Use the colspan Attribute

The colspan attribute can be used with table header cells and table data cells.

Using the colspan Attribute

A cell can span multiple columns by setting colspan to the number of columns it should occupy.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td colspan="2">Special Package</td>
    <td>1</td>
  </tr>
</table>

The first data cell spans the first two columns, so only one additional cell is needed to complete the three-column row.

Spanning Header Cells

The colspan attribute is often used with <th> to create a heading that applies to a group of columns.

<table>
  <tr>
    <th colspan="2">Contact Information</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
</table>

The first header cell spans both columns and provides a group heading for the two headers below it.

Spanning Data Cells

The attribute can also combine column positions within a data row.

<table>
  <tr>
    <td>Shipping</td>
    <td>$10.00</td>
  </tr>
  <tr>
    <td colspan="2">Free shipping on orders over $50.00</td>
  </tr>
</table>

The second row contains one cell that occupies the width of both table columns.

Default Value

If the colspan attribute is omitted, a table cell spans one column.

<!-- Spans one column -->
<td>Content</td>

<!-- Spans two columns -->
<td colspan="2">Content</td>

Because one column is the normal behavior, colspan="1" usually does not need to be specified explicitly.

colspan vs. rowspan

The colspan and rowspan attributes both allow a table cell to occupy more than one position in the table grid, but they work in different directions.

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

<td rowspan="2">Spans two rows</td>

Table Structure

When using colspan, account for the extra column positions occupied by the spanning cell. A cell with colspan="2" occupies two positions in the table grid even though it is represented by only one <th> or <td> element.

<tr>
  <td colspan="2">Two columns</td>
  <td>Third column</td>
</tr>

The row above occupies three column positions. Adding another ordinary cell would create a fourth column position rather than filling one of the positions already occupied by the spanning cell.

Common Mistakes

Do not use colspan="0". Unlike rowspan, where zero has a special meaning, a conforming colspan value must be greater than zero.

<!-- Incorrect -->
<td colspan="0">Content</td>

<!-- Correct -->
<td colspan="2">Content</td>

Do not use a value greater than 1000. The maximum conforming value for colspan is 1000.

Do not add ordinary cells for column positions that are already occupied by a spanning cell. Doing so can produce an unintended table structure.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The colspan attribute is widely supported on table cells in current core browsers. It applies to both <td> and <th> elements.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the colspan Attribute

The example uses colspan to create a heading that spans three columns and a table cell that spans two columns.

Summary

The HTML colspan attribute specifies how many columns a <th> or <td> table cell spans. Its value must be greater than zero and no greater than 1000, with a default value of 1. When a cell spans multiple columns, those column positions are occupied by that cell and must be accounted for when constructing the rest of the table.