HTML and CSS Reference
In-Depth Information
it can be dii cult to distinguish where the spans actually exist, which can be a good thing.
Figure 6-7 shows the actual table with the two spans.
Figure 6-7: Adding vertical and horizontal spans.
You can see that the table in Figure 6-7 has 10 cells where a full 4-by-3 table would have 12.
Likewise, in the listing, you can see ten
<td>
tags. Both
colspan
and
rowspan
can be a
little tricky, but if you think of them in terms of cell mergers, they're a little easier to under-
stand and work with.
PRACTICAL SPANS IN TABLES
When creating complex tables using
colspan
and
rowspan
, the exercise may seem to be
one in futility because a practical application doesn't seem that obvious. Alternatively, you
may look to do the whole thing in CSS3 without any use of table elements or attributes. So,
the following walks through a simple but typical scenario where spanning cells is a practical
solution.
122
Consider a Web development/design i rm that has set up project management using tables as
a simple way to keep track of a project's progress. h e production team is divided into the
following groups, each with a separate record:
Team coordinator (1)
Design team (4)
Rich interactive application (RIA) design (2)
Front-end development (3)
Back-end development (2)
h e columns for the project include the following:
Ta s k
Project
Team members
Due date
