References

Beginner-friendly references for web development, with live, editable examples.

The HTML colspan attribute

Attribute All modern browsers Updated
Quick answer

The HTML colspan attribute makes a table cell span multiple columns. It is used on the <td> and <th> elements.

Overview

The colspan attribute spans a table cell across columns. It is used on the <td> and <th> elements.

It defines table structure: spanning cells across rows or columns, and connecting data cells to their headers. These attributes are central to making data tables understandable to screen-reader users.

Syntax

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

Values

Value
A positive integer (default 1).

Example

Live example 
<style>table{border-collapse:collapse}th,td{border:1px solid #cbd5e1;padding:6px 10px}</style>
<table><tr><td colspan="2">A + B</td></tr><tr><td>A</td><td>B</td></tr></table>

Best practices

  • Set scope on every <th> so screen readers associate headers with cells.
  • Use colspan/rowspan to merge cells rather than nesting tables.
  • For complex tables, link cells to headers with the headers attribute and matching ids.
  • Add a <caption> so the table has an accessible name.

Frequently asked questions

What does the colspan attribute do?
Spans a table cell across columns.
How do I merge table cells?
Use colspan to span columns and rowspan to span rows.
How do I make a data table accessible?
Use <th> headers with scope, add a <caption>, and link cells to headers with headers in complex tables.
Which elements use the colspan attribute?
It is an element-specific attribute, used on the <td> and <th> elements.
cols command