CSS Styling Tables

The table properties are used to apply style to the <table> element. You can format a table by changing its layout, spacing between table cells, positioning of table caption etc.

CSS Caption-Side

The CAPTION-SIDE property is used to specify the position of the caption relative to the table’s box. If it is assigned a value right then the caption will appear on the right of the table. Similarly, you can assign top (default), bottom and left values. MS-Internet Explorer does not support this property. For example:

Table {caption-side : bottom ;}

CSS Table-Layout

The TABLE-LAYOUT property is used to control the layout of the table. The possible values that can be assigned to this property are fixed, auto (default) and inherit.

                                                 Table {width: 10px; border : thin; table-layout: fixed ;}

CSS Border-Collapse

The BORDER-COLLAPSE property is used to add or remove spacing between each cell of a table. The possible values that can be assigned to it are collapse, separate (default).

For example: 
Table {width: 10px; border : thin solid blue ; border-collapse : collapse ;}

CSS Border-Spacing

The BORDER-SPACING property is used to specify the spacing between table cells. The spacing can be specified in term of pixels or in percentage. For example:

Table{border-spacing : 4px;} 
 Td{border-spacing : 2px;}

CSS Empty-Cells

By default, the table cells without contents do not have any border displayed around it. If you want to display a border around it use EMPTY-CELLS property. The possible values that can be assigned to it are SHOW (default in Netscape) and HIDE. For example:

Table{empty-cells : show ;}