HTML colspan Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The colspan attribute in HTML is a crucial tool for controlling the layout and organization of table cells in web pages. It allows a single table cell (<td> or <th>) to span across multiple columns, effectively merging them into a single cell. This attribute is particularly useful for creating headers or sections within a table that need to encompass several columns underneath to signify a broader category or to simplify the table's design.

For instance, if you're creating a table that lists the monthly sales figures for different products, you might use the colspan attribute in a header cell to group several months under each quarter. By setting colspan="3" in a <th> element, that header cell will span across three columns, visually grouping January, February, and March as Q1, and so forth for the remaining quarters.

The value of the colspan attribute should be a positive integer (1 or higher), indicating how many columns the cell should span across. If colspan is set to 1, the cell will not span across any additional columns, which is also the default behavior if the attribute is not specified. Using colspan effectively can enhance the readability of your tables, making them more intuitive and visually appealing to users.

Syntax

<tagname colspan="number">

Values

numberNumber of columns the table cell should span.

Applies To

<td>
<th>

Example

HTML

<table border="1">

  <tr>

    <th colspan="2">Products</th>

    <th>Price</th>

  </tr>

  <tr>

    <td>Apples</td>

    <td>Bananas</td>

    <td>$1.00</td>

  </tr>

  <tr>

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

    <td>They're delicious!</td>

  </tr>

</table>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML colspan attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.