Colspan

Colspan is an HTML table attribute that allows a single cell to span across multiple columns. It applies to table header cells (th) and table data cells (td). The attribute takes a positive integer value, with a default of 1, which means the cell occupies exactly one column.

When a cell uses colspan="n", it extends across n columns in that row. This changes the effective column count for that row, and subsequent cells in the same row are placed after those n columns. Other rows in the table must still align with the overall column structure, so developers may need to add empty cells as placeholders to preserve alignment.

Example: a header row might include a cell with colspan="2" to label two underlying columns. For instance, a row containing <th>Month</th> <th colspan="2">Sales</th> would indicate that the two following columns belong to the same “Sales” group. In the next row, you would typically provide three cells: one for the month and two for the subcolumns under Sales, such as <td>January</td> <td>1000</td> <td>200</td>.

Colspan often works in concert with rowspan, which spans cells vertically. Proper use requires careful planning of the table’s grid to maintain consistent alignment across all rows. Accessibility considerations include using appropriate header semantics and, where helpful, scope attributes on th elements to indicate column or row headers. Colspan is widely supported in all major browsers and remains a common tool for creating complex table layouts.