CSS table properties

With CSS table properties, you can set how tables and table columns should be displayed.

This tutorial focuses on:

Setting the border of a table
Setting the space between cell borders
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 space between cell borders

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:

Hello, I am a table caption
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.

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!!!!!