Just as the
th element uses
colspans, so can
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).
colspans applied to several cells in a table to show someone’s availability for work
When you’re introducing a
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
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
tbody elements). So if the
comprises ten rows, the
rowspan of a cell that’s
defined in the first row can’t have a value greater than
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>
This attribute takes a number, which
should equal the number of cells that this single
should replace. There’s also a special value of
which should inform the browser to span the cell to the end of the current
group of columns.
Browser support for
colspan is generally good, with one exception: the
colspan="0". Only Firefox successfully spans
all the remaining columns properly. The other browsers tested render the
cell in the first column only.
There are no comments yet.