HTML and CSS Reference
In-Depth Information
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;
Search WWH ::

Custom Search