Working with Tables and Columns - HTML, CSS, and Dynamic HTML - page 357

Figure 5-34 Reconciling different border styles

double border s take
precedence over solid borders

separate borders collapsed borders

table {border-style: 5px solid red;
border-collapse: separate; }
td {border: 5px double blue;}

table {border-style: 5px solid red;
border-collapse: collapse; }
td {border: 5px double blue;}

Although the collapsed borders model appears more complicated at fi rst, the rules are
reasonable and allow for a wide variety of border designs.

Setting Table Borders with CSS
• To define the border model used by a table, apply the table style

border-collapse: type ;
where type is separate (the default) to keep all borders around cells and the table
itself apart, or collapse to merge all adjacent borders.
• To set the space between separated borders, apply the table style

border-spacing: value ;
where value is the space between the borders in any of the CSS units of measure.

For the KPAF program schedule, Kyle thinks the table would look better if there were
no space between the table cells. He asks you to collapse the borders.

To collapse the cell borders:

◗

1. Return to the tables.css file in your text editor. Add the following style to the
table element, as shown in Figure 5-35:

border-collapse: collapse;