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

Where header information may be relevant to multiple columns, the cell can be set to span those columns using the colspan attribute. In the HTML example shown, we have four pieces of information for a number of employees—Name, Email, Phone, and Floor/Block—and the th is set to span all four of these columns, as shown in Figure 1.

Figure 1. A th element spanning four columns A th element spanning 4 columns

When you’re introducing a colspan attribute, take care to ensure that every row adds up to same number of cells. 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. However, if you use such a package, you must pay close attention—unless you’re using quite a recent web editor, it may inject some extra unnecessary markup into your table.

Example

In this example, contact details share a common header, “Work Contact Points,” which is spanned across four columns:

<table border="1">
  <tr>
    <th colspan="4">Work Contact Points</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Email</td>
    <td>Phone</td>
    <td>Floor/Block</td>
  </tr>
  ⋮
</table>

Value

This attribute takes a number, which should equal the number of cells that the th should replace. There’s also a special value of "0", which tells 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—rendering colspan="0". Only Firefox is able to span the cell across all remaining columns; the other browsers tested render the cell in the first column only.

User-contributed notes

There are no comments yet.

Related Products