DISPLAYING DATA WITH TABLES - HTML5 - page 119

h at should be simple enough to understand and complex enough to be useful. h e irony of
making this table is in adding the spans where only one item is in the cell. It's almost counter-
intuitive because the column for the team members will have several rows within the other
cells that have a rowspan the size of the team size. h e following program ( SpanProject.
html in this chapter's folder at www.wiley.com/go/smashinghtml5 ) illustrates how
this is done.

<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
/* F2F0E6,595443,A6A08D,3A3F59,8D91A6 */
caption {
font - family : ”Arial Black” , Gadget , sans - serif ;
color : #3A3F59;
}
table {
font - family : Verdana , Geneva , sans - serif ;
background - color : #F2F0E6;
padding : 5px ;
border - collapse : collapse ;
}
td , tr {
padding - right : 8px ;
font - size : 11px ;
border - collapse : collapse ;
}
. bluish {
background - color : #8D91A6;
}
. brownish {
background - color : #A6A08D;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Project Tracker </ title >
</ head >
< body >
< table >
< caption >
Project Plan
</ caption >
< tr >
< th > Task
< th > Project
< th > Team
< th > Due Date
< tr class = ”bluish” >
< td > Coordinator
< td > Cold Fire

123