colspan (HTML attribute)

Spec
Depr. Version
No HTML 3.2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Partial Full Partial Partial Partial

Syntax

colspan="number"

Description

Just as the th element uses colspans, so can the td element to allow data to be shared across numerous columns in a table. The concept is best explained by comparing the example HTML above with Figure 1 (where we indicate a person’s availability for Tuesday—when that person is free for the whole day—by spanning the cell across four time slots).

Figure 1. colspans applied to several cells in a table to show someone’s availability for work Colspans applied to several rows in this table showing someone’s availability for work.

When you’re introducing a colspan attribute, take care to ensure that each row is equivalent to the number of cells that would ordinary appear in the row. Some tables can become quite complicated with a mixture of colspan and rowspan attributes, and this is not something that you’re advised to hand-code—that’s just asking for trouble! It’s much better to use a WYSIWYG editor, such as Dreamweaver, MS Expression, or something similar, which will allow you to merge and unmerge cells very easily, and takes care of these attributes for you.

Note that when you use the rowspan attribute, you can’t span a cell beyond the boundary of its containing rowgroup (namely the thead, tfoot, or tbody elements). So if the tbody comprises ten rows, the rowspan of a cell that’s defined in the first row can’t have a value greater than "10".

Example

This example shows an extract from a calendar, with a person’s availability apparently spanning the whole day, as shown in Figure 1:

<tr>
  <th scope="row">Tue</th>
  <td colspan="4">Free</td>
</tr>

Value

This attribute takes a number, which should equal the number of cells that this single td should replace. There’s also a special value of "0", which should inform the browser to span the cell to the end of the current group of columns.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Partial Partial Partial Partial Full Full Full Full Full Partial Partial Partial Partial Partial Partial Partial Partial

Browser support for colspan is generally good, with one exception: the rendering of colspan="0". Only Firefox successfully spans all the remaining columns properly. The other browsers tested render the cell in the first column only.

User-contributed notes

There are no comments yet.

Related Products