CSS TABLE
Menu
Turn Mobile View Off
by Dinesh Thakur

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.

 

VALUE                                                   PURPOSE

Auto                        It expands the table according to the contents it contains.

Fixed              The table does not depend upon the contents but depends on the width of columns, borders, cell spacing etc.

 

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).

 

VALUE PURPOSE

 

Collapse                  It is used to remove the space between each cell i.e. cells are squeezed tightly together.

Separate                 Space is present between each cells of a table.

 

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 ;}

 

Dinesh Thakur is a Technology Columinist and founder of Computer Notes and Technology Motivation. Turn Mobile View Off