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

Figure 8.28
CSS configures
border and padding
for each table cell
3. Notice the empty space between the table cells borders. The border-collapse
property can be used to eliminate this space and “collapse” the table border. Add
a style rule with the border-collapse property 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.29
The CSS border-
collapse property
in action
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 td and
th selectors to have padding but without configuring a border.
td, th { padding:5px; }
Create a new class called altrow that sets a background color.
.altrow { background-color:#d5edb3; }
Modify the <tr> elements in the XHTML: assign the first and third <tr> elements
to the altrow class.
Display your page in a browser. The table area should look similar to the one
shown in Figure 8.30.
Figure 8.30
Rows are configured
with alternating
background colors