HTML colspan Attribute

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

The colspan attribute can be used on the following html elements.

<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>