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.
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
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
Team members
Due date
Search WWH ::

Custom Search