Collapsing Borders Model

The first of the two methods for setting borders on tables allows you to set borders on all parts of a table: the outer edge of the table itself, each of the rows, columns, groups of rows and columns, and, of course, the cells themselves. However, no matter how many style rules you write, in the end, there will only be one border between every pair of cells or on the outside of the table.

For example, if you specify a border style for the rows, for the cells and for the row groups, there will be places in the table where all three of these declarations apply. The border that is drawn there is the one that is the "strongest," in the sense of the most visible. For example, if these are the style rules

 TBODY { border: thick double } TR { border: medium solid } TD { border: medium dotted } 

the strongest is the thick double, next is the medium solid, and the weakest is the medium dotted. The result is that there will be a dotted line between all cells, and a solid line between all rows, except at the edge of a row group (TBODY), where the border will be a thick double line.

Thicker lines are stronger than thinner lines, and double lines are stronger than single ones, which are in turn stronger than dashed lines and dotted lines. The "3D" styles (ridge, outset, groove, and inset) are the weakest of all, but that is because they are more commonly used with the separated borders model, which is explained later. If the specified styles for the cells, rows, columns, etc., differ only in color, a different rule is applied: The cell's border style wins over the row, row over row group, and so on in the following order: cell, row, row group, column, column group, and table.

Here is an example of a complex table. We use it in several examples in the following sections. First, here's the HTML code:

 <TABLE SUMMARY="The count of things each person saw,   organized by thing, time of day and person">   <CAPTION>What we saw on our trip     to the beach</CAPTION>   <COLGROUP>     <COL CLASS=when><COL CLASS=who>   <COLGROUP>     <COL CLASS=dog><COL CLASS=cat><COL CLASS=croco>   <COLGROUP>     <COL CLASS=bak><COL CLASS=ant><COL CLASS=book>   <COLGROUP>     <COL CLASS=yel><COL CLASS=pur><COL CLASS=blk>   <THEAD>     <TR><TH> <TH> <TH COLSPAN=3>Animals       <TH COLSPAN=3>Shops <TH COLSPAN=3>Cars     <TR><TH>When? <TH>Who?       <TH>Dogs <TH>Cats <TH>Crocodiles       <TH>Bakeries <TH>Antiques <TH>Book       <TH>Yellow <TH>Purple <TH>Black   </THEAD>   <TBODY>     <TR><TH ROWSPAN=3>Morning       <TH>Judy       <TD>4 <TD>0 <TD>0       <TD>4 <TD>6 <TD>2       <TD>0 <TD>0 <TD>5     <TR><TH>Alan       <TD>3 <TD>1 <TD>0       <TD>3 <TD>2 <TD>1       <TD>1 <TD>0 <TD>2     <TR><TH>Tim       <TD>2 <TD>0 <TD>2       <TD>2 <TD>1 <TD>7       <TD>0 <TD>0 <TD>1   </TBODY>   <TBODY>     <TR><TH ROWSPAN=3>Afternoon       <TH>Judy       <TD>2 <TD>1 <TD>0       <TD>4 <TD>2 <TD>2       <TD>0 <TD>1 <TD>1     <TR><TH>Alan       <TD>2 <TD>1 <TD>0       <TD>1 <TD>2 <TD>3       <TD>0 <TD>0 <TD>1     <TR><TH>Tim       <TD>4 <TD>4 <TD>1       <TD>3 <TD>3 <TD>6       <TD>1 <TD>1 <TD>5   </TBODY> </TABLE> 

We'll first show a style that uses only borders to indicate the way the information is grouped: A thick double border below the headings, a thick border underneath the groups of rows, and a thin border between the groups of columns (see Figure 17.4).

Figure 17.4. Table borders example.

What we saw on our trip to the beach

The style sheet that draws these borders is rather simple:

 TABLE { border-collapse: collapse } COLGROUP { border-left: thin solid } THEAD { border-bottom: thick double } TBODY { border-bottom: thick solid } TABLE { border: hidden } TH { text-align: left } 

We've thrown in a text-align: left because it looks better than the default style for HTML, which centers all TH elements. But, the real trick is in the fifth line. The border style hidden is a "style" that is peculiar to tables, and in fact to the collapsing borders method of creating borders.

If you look at the first line, you see that a thin rule is specified for the left side of all column groups. But, we don't want a rule on the left side of the first column group. The hidden style gets rid of that extra border. Because this border is shared with the table itself, we can set a style on the table that overrides the border. The same happens with the third rule: Setting a thick rule below the row groups produces one rule too many, but the hidden style on the table takes it away.

Setting the style to none wouldn't have helped because none is the weakest style of all. In fact, all cells implicitly have a border: none, but any other border style overrides it.