HTML and CSS Reference
In-Depth Information
collapsed into a single cell taking up both rows. Importantly, the top table has ten cells and the
bottom table has only seven cells. When you code tables with rowspan and colspan , you'll
use fewer <td> tags compared to a table that does not (see RowColSpan.html in this
chapter's folder at www.wiley.com/go/smashinghtml5 ).
<! DOCTYPE HTML >
< html >
< head >
< style type = ”text/css” >
caption {
font - family : ”Arial Black” , Gadget , sans - serif ;
color : #C60;
}
table {
font - family : Verdana , Geneva , sans - serif ;
}
td , tr {
border - style : solid ;
border - width : thin ;
border - color : #ccc;
width : 120px ;
padding : 5px ;
}
</ style >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Colspan and Rowspan </ title >
</ head >
< body >
< table >
< caption >
Rowspan and Colspan
</ caption >
< tr >
< td rowspan = ”2” > Row A and Row B
< td > Column 2a
< td > Column 3a
< td > Column 4a
< tr >
< td > Column 2b
< td > Column 3b
< td > Column 4b
< tr >
< td > Row C
< td > Column 2c
< td colspan = ”2” > Column 3c and Column 4c
</ table >
</ body >
</ html >
121
h is example uses a very light gray border so that you can better see the spans — vertically
and horizontally. However, you don't need the borders to use spans. In fact, without borders,
 
Search WWH ::




Custom Search