HTML colspan Attribute
The HTML colspan attribute specifies how many columns the table cell should span. Read and find out on what elements the colspan attribute can be used.
The HTML colspan attribute makes a single table cell stretch across two or more columns. It is the markup equivalent of "merge cells" in a spreadsheet: instead of having one cell per column in a row, you give one cell a colspan so it occupies the horizontal space of several. This is how you build summary rows, grouped headers, and any layout where one piece of content belongs to more than one column.
This page covers the values colspan accepts, which elements support it, how to combine it with rowspan to span columns and rows at the same time, accessibility considerations for header cells, and the modern CSS that replaces the old border="1" styling.
Which elements support colspan
You can use colspan only on the two table cell elements:
<td>— a standard data cell.colspansets how many column slots the data cell occupies.<th>— a header cell.colspansets how many columns the header labels.
It is not valid on <table>, <tr>, <col>, or any other element. To control whole columns from a single place, use <col>/<colgroup> instead — but the cell-spanning behaviour itself always lives on <td> or <th>.
Value rules
The value of colspan is a positive integer (1, 2, 3, …):
colspan="1"is the default — a normal cell that spans a single column. You rarely need to write it explicitly.- Any value greater than
1makes the cell span that many columns. The cell consumes column slots from the others in the same row, so eachcolspanreduces how many sibling cells that row should contain. - The HTML standard caps the value at 1000; larger numbers are clamped.
colspan="0"was an old HTML4 idea meaning "span every remaining column." It is not part of the HTML living standard and is not reliably supported across browsers, so do not use it — give an explicit positive integer instead.
If you set a colspan larger than the number of columns actually available in the row, the browser simply spans to the edge of the table; it does not create extra columns.
Syntax
<td colspan="value"> ... </td>
<th colspan="value"> ... </th>Example of the HTML colspan attribute used on the <td> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Salary</th>
</tr>
<tr>
<td>March</td>
<td>$100</td>
</tr>
<tr>
<td>April</td>
<td>$150</td>
</tr>
<tr>
<td colspan="2">Total: $250</td>
</tr>
</table>
</body>
</html>The last row has only one <td>, not two, because colspan="2" makes that single cell fill both the "Month" and "Salary" columns. If you left the colspan off, that row would be missing a cell and the table layout would break.
Example of the HTML colspan attribute used on the <th> element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
<tr>
<td>February</td>
<td>23</td>
</tr>
</table>
</body>
</html>Combining colspan with rowspan
colspan spans columns (horizontally); its counterpart rowspan spans rows (vertically). They are almost always taught together because real tables need both — for example, a header that labels several columns above sub-headers, or a label cell that covers several rows down the side.
You can put both attributes on the same cell to make it span a rectangular block of columns and rows at once. As with colspan alone, every cell you cause another cell to "cover" must be removed from the markup of the row it would have appeared in — otherwise that row ends up with too many cells.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td>Anna</td>
<td>555-0101</td>
<td>[email protected]</td>
</tr>
</table>
</body>
</html>Here rowspan="2" makes the "Name" header reach down into the second header row, while colspan="2" lets the "Contact" header sit above both "Phone" and "Email". You can read more about building these structures on the HTML Tables page.
Styling table borders with CSS
The border="1" attribute used in the examples above is the old way to draw cell borders. It is deprecated in modern HTML — use CSS instead. The key property is border-collapse: collapse, which merges the doubled cell borders into single shared lines:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #666;
padding: 8px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>January</td>
<td>15</td>
</tr>
</table>
</body>
</html>This gives you full control over border colour, width, and spacing, which the border attribute cannot do.
Accessibility for spanning header cells
When a <th> spans multiple columns, screen readers need help understanding which data cells it describes. Add one of the following:
- The
scopeattribute on the header —scope="colgroup"for a header that spans several columns, orscope="col"for a single column. This is the simplest option for straightforward tables. - For complex tables, give each header an
idand reference those ids from the relevant data cells with theheadersattribute (headers="h1 h2").
For example, a column-group header should be marked up as <th colspan="2" scope="colgroup">Contact</th> so assistive technology associates it with both columns it spans.