| Depr. | Version |
|---|---|
| No | HTML 3.2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Partial | Full | Partial | Partial | Partial |
Syntax
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.
th element spanning four 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.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.