Web Development and Design Foundations with XHTML, 5th Edition

8.3 Using CSS to Style a Table^335

3. Notice the empty space between the table cells borders. The border-collapse
   propertycan be used to eliminate this space and “collapse” the table border. Add
   a style rule with the border-collapseproperty to the table selector as shown
   below.
   table { border: 1px solid #5c743d;
   width: 75%;
   margin: auto;
   border-collapse: collapse;
   }
   Save the file and display your page in a browser. The table area should look
   similar to the one shown in Figure 8.29.

Figure 8.28
CSS configures
border and padding
for each table cell

Figure 8.29
The CSS border-
collapseproperty
in action

Figure 8.30
Rows are configured
with alternating
background colors

4. Let’s experiment with a slightly different design that uses background colors for
   the rows instead of cell borders. Modify the style rules, configuring the tdand
   thselectors to have padding but without configuring a border.
   td, th { padding:5px; }
   Create a new class called altrowthat sets a background color.
   .altrow { background-color:#d5edb3; }
   Modify the elements in the XHTML: assign the first and third elements
   to the altrowclass.
   Display your page in a browser. The table area should look similar to the one
   shown in Figure 8.30.