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 the below table (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).
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
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
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”.
This example shows an extract from a calendar, with a person’s availability apparently spanning the whole day, as shown in the above table:
<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
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.
Create a 3D CSS Printer that Actually Prints!
By Jhey Tompkins,
Learn how to make impressive 3D objects in CSS, and even how to make them do amazing things like print a real image from a URL you supply!
Squeaky Portraits: Having Fun with the CSS path() Function
By Jhey Tompkins,
The CSS path() function finally has wide browser support. Learn how to use it to take your clips paths to awesome new heights.
Canvas vs SVG: Choosing the Right Tool for the Job
By Maria Antonietta Perna,
Should you use Canvas or SVG? It depends! Let's walk through all the scenarios where Canvas and SVG are an option and work out which is the best choice.