Tables - Web Development and Design Foundations with XHTML - page 336

Notice how the background color of the alternate rows adds subtle interest to the Web page.
Compare your work with the sample located in the student files (Chapter8/8.4/myservices
.html). In this Hands-On Practice you configured the display of an XHTML table using
CSS. You'll see this coding technique used increasingly in the future.
Recall from Section 8.1 that the <thead> , <tbody> , and <tfoot> tags designate groups
of table rows. Figure 8.31 demonstrates the use of CSS to configure a table head, table
body, and table footer with different styles.
Figure 8.31
CSS configures the
thead , tbody , and
tfoot selectors
The CSS styles a centered 200-pixel-wide table with a caption that is rendered in large,
bold font; a table head section with a light gray ( #eaeaea ) background color; a table
body section styled with slightly smaller text ( .90em ) using Arial or sans serif font; table
body td selectors set to display with some left padding and a dashed bottom border;
and a table footer section that has centered, bolded text and a light gray background
color ( #eaeaea ). The CSS code is shown below.
table { width: 200px;
margin: auto;}
caption { font-size: 2em;
font-weight: bold;}
thead { background-color: #eaeaea;}
tbody { font-family: Arial, sans-serif;
font-size:.90em;}
tbody td { border-bottom: 1px #000033 dashed;
padding-left: 25px;}
tfoot { background-color: #eaeaea;
font-weight: bold;
text-align: center;}