Separated Borders Model

In the separated borders model, you can only set borders on cells, and on the table itself, not on rows, columns, or groups of rows or columns. Every cell has its own borders, so there are never any conflicts. This method is not so easy if you want to visually delimit row or column groups with borders, but it works well for the "3D" border styles, especially inset and outset. Here is an example (see Figure 17.5):

 TABLE { border-collapse: separate;   border: 0.2em outset; cell-spacing: 0.2em } TD, TH { border: 0.1em inset } 

Figure 17.5. Table borders example.

This makes use of the cell-spacing property, which works only for the separated borders model. separate is the initial value for the border-collapse property, so we could have omitted it, but we set it here explicitly for clarity.

Name:	border-collapse
Value:	collapse | separate
Initial:	separate
Applies to:	tables and inline tables
Inherited:	yes
Percentages:	N/A

The border-collapse property determines what border model a table uses. If all tables in a document use the same model (which they usually do), you can set the property most easily on the BODY element, and all tables will inherit it.

Name:	border-spacing
Value:	<length> <length>?
Initial:	0
Applies to:	tables and inline tables
Inherited:	yes
Percentages:	N/A

border-spacing is only used by tables with the separated borders model. It determines the space between every pair of borders. You cannot set it on individual cells. Whatever the value of border-spacing is for the table element, it is used throughout the table. You can, however, set different values for the space between vertical borders and between horizontal borders. If the property has only one value, it will be used for both horizontal and vertical spacing. If it has two, the first gives the horizontal space (between columns) and the second the vertical space (between rows).

Borders for Empty Cells

Name:	empty-cells
Value:	show | hide
Initial:	show
Applies to:	table cells
Inherited:	yes
Percentages:	N/A

The separated borders model distinguishes between empty cells and non-empty cells. Normally, borders are drawn around all cells, but the empty-cells property makes it possible to suppress borders if the cell has no content. This property can be set for each cell individually, but usually, you would set it on the table, or even on the BODY element, to apply to the entire document. Figure 17.6 shows the effect.

Figure 17.6. The effect of the empty-cells property.