CSS table properties
With CSS table properties, you can set how tables and table columns should be displayed.
This lesson focuses on:
- Setting the border of a table
- Setting the spacing between borders of cells
- Setting the position of a table caption
- Setting the visiblity of empty cells
- Setting the method of display for table cells, rows, and columns
Setting the border of a table
A table border is set using the border-collapse property. This property takes the value "collapse" to specify that a table border should appear for all cells or the value "separate" to specify that a table border should appear detached.
NOTE: This property only sets whether a tables border is collapsed or not. It does not set the borders size or color.
Example:
<table border="2" width="94%" style="border-collapse: collapse;"> <tr> <td>This table</td> <td>has the <b>border-collapse</b></td> </tr> <tr> <td>property</td> <td>set to "collapse"</td> </tr> </table> <table border="2" width="94%" style="border-collapse: separate;"> <tr> <td>This table</td> <td>has the <b>border-collapse</b></td> </tr> <tr> <td>property</td> <td>set to "separate"</td> </tr> </table>
Output:
This table has the border-collapse property set to "collapse"
This table has the border-collapse property set to "separate"
Setting the spacing between borders of cells
The spacing between borders of cells is set using the border-spacing property.
Example:
<table border="2" width="94%" style="border-spacing: 5px;"> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>border spacing</td> <td>of 5px</td> </tr> </table>
Output:
| This table | has a |
| border spacing | of 5px |
Setting the position of a table caption
The position of a table caption is set with the caption-side property. This property can take a value of "top", "bottom", "left", or "right"
Example:
<table border="2" width="94%" style="caption-side: bottom;"> <caption>Hello, I am a table caption</caption> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>caption at the</td> <td>bottom of it</td> </tr> </table>
Output:
| This table | has a |
| caption at the | bottom of it |
Setting the visibility of empty cells
Sometimes you will have empty cells in a table. You can set whether or not these empty cells are visible using the empty-cells property. This property takes the value of "show" to display empty cells or "hide" to hide empty cells.
NOTE: Empty cells are hidden by default.
Example:
<table border="2" width="94%" style="empty-cells: show;"> <tr> <td>This table</td> <td>shows</td> </tr> <tr> <td>empty cells</td> <td></td> </tr> </table>
Output:
| This table | shows |
| empty cells |
Setting the method of display for table cells, rows, and columns
The method of display for table cells, rows, and columns is set using the table-layout property. This property can take the value "auto" for an automatic table layout where the width of columns is set according to the width of the widest column or "fixed" for a fixed table where the width of columns is set according to the browser.
Example:
<table border="2" width="94%" style="table-layout: auto;"> <tr> <td>This table</td> <td>has a</td> </tr> <tr> <td>table-layout</td> <td>of auto. Auto!!!!!</td> </tr> </table>
Output:
| This table | has a |
| table-layout | of auto. Auto!!!!! |
