5.1 Table Properties
The next five properties are specifically for use with tables.
| Property | Function |
|---|---|
| border-collapse | Defines if table borders should be collapsed |
| border-spacing | Defines the distance between the borders of adjacent cells |
| caption-side | Defines the placement of a table caption |
| empty-cells | Defines whether or not to display borders and background on empty cells in a table |
| table-layout | Defines the layout algorithm to be used for a table |
Border-collapse
The border-collapse property defines whether the table borders are collapsed into a single border or separated to show table and cell borders. There are three values:
| Value | Description |
|---|---|
| collapse | Borders are collapsed into a single border when possible (border-spacing and empty-cells properties will be ignored) |
| separate | Borders are detached (border-spacing and empty-cells properties will not be ignored). This is default |
| inherit | Specifies that the value of the border-collapse property should be inherited from the parent element |
For example:
table {border-collapse::collapse;}
Border-spacing
The border-spacing property defines the distance between the borders of adjacent cells, and this property replaces the old HTML cellspacing attribute (although browser support is questionable). There are 2 values:
| Value | Purpose |
|---|---|
| length length | Specifies the distance between the borders of adjacent cells in px, cm, etc. Negative values are not allowed If one length value is specified, it specifies both the horizontal and vertical spacing If two length values are specified, the first sets the horizontal spacing and the second sets the vertical spacing |
| inherit | Specifies that the value of the border-spacing property should be inherited from the parent element |
table {border-collapse::separate; border-spacing::10px 25px; }
Caption-side
The caption-side property defines the placement of a table caption. There are three values:
| Value | Description |
|---|---|
| top | Puts the caption above the table (default) |
| bottom | Puts the caption below the table |
| inherit | Specifies that the value of the caption-side property should be inherited from the parent element |
For example:
caption {caption-side:top;}
Empty-cells
The empty-cells property defines whether or not to display borders and background on empty cells in a table. There are three values:
| Value | Description |
|---|---|
| hide | No background or borders are shown on empty cells |
| show | Background and borders are shown on empty cells (default) |
| inherit | Specifies that the value of the empty-cells property should be inherited from the parent element |
For example:
table {border-collapse:separate; empty-cells:hide; }
Table-layout
The table-layout property defines the layout algorithm to be used for a table. There are 3 values:
| Value | Purpose |
|---|---|
| auto | Automatic table layout algorithm (default). Column width set by the widest unbreakable content in the cells. Can be slow as it needs to read through all the table content before determining the final layout |
| fixed | Fixed table layout algorithm. Horizontal layout only depends on the table's width and the width of the columns, not the cell content. Quicker than automatic. |
| inherit | Specifies the value should be inherited from the parent element (no IE support) |
For example:
table {table-layout:fixed;}
It should hopefully be clear by now that the general and specific properties that can be applied to HTML tables from within a stylesheet offer some fantastic opportunities towards styling and laying out tables.