DISPLAYING DATA WITH TABLES - HTML5 - page 120

< td > Emma Peel
< td > 01-21-2012
< tr class = ”brownish” >
< td rowspan = ”4” > Design Team
< td rowspan = ”4” > Cold Fire
< td > Sancho Panza
< td rowspan = ”4” > 10-01-2011
< tr class = ”brownish” >
< td > John Watson
< tr class = ”brownish” >
< td > Edward McMahon
< tr class = ”brownish” >
< td > Vanna White
< tr class = ”bluish” >
< td rowspan = ”2” > Rich Interaction < br >
Design
< td rowspan = ”2” > Cold Fire
< td rowspan > Garth Algar
< td rowspan = ”2” > 11-12-2011
< tr class = ”bluish” >
< td > John McIntyre
< tr class = ”brownish” >
< td rowspan = ”3” > Front End < br >
Development
< td rowspan = ”3” > Cold Fire
< td > Barney Rubble
< td rowspan = ”3” > 12-15-2011
< tr class = ”brownish” >
< td > Ethel Mertz
< tr class = ”brownish” >
< td > Paul Schaffer
< tr class = ”bluish” >
< td rowspan = ”2” > Back End < br >
Development
< td rowspan = ”2” > Cold Fire
< td rowspan > Louise Sawyer
< td rowspan = ”2” > 01-15-2012
< tr class = ”bluish” >
< td > Andy Richer
</ table >
</ body >
</ html >

124

Basically, the <td> tags that include a rowspan attribute are those that have to be large
enough to match the number of team members that will be in the same row. Figure 6-8 shows
how the page appears in a browser.

h e most important thing to remember about tables is that they should be used judiciously.
h ey aren't general design tools, but you can use CSS3 to design the look of tabular data set in
table elements. So think, “Tabular data, tables; non-tabular content, CSS3 only.”