CSS Properties

We can apply style on HTML tables for better look and feel. There are some CSS properties that are widely used in designing table using CSS:

• border
• border-collapse
• border-spacing
• caption-side
• empty-cells
• table-layout

border

For specifying table we use border property.

Example:

table, th, td{
border : 2px solid blue;
}

border-collapse

This property sets whether the table borders are collapsed into a single border or detached. We can set this property to separate(default) and collapse.

Example:

table{
border-collapse : collapse;
}

border-spacing

This is property is used to set the distance between the borders of adjacent cells. This will work only when border-collapse is separated. We can set this property to horizontal spacing and vertical spacing in the form of cm, px.

Example:

table{
border-collapse : separated;
border-spacing : 5px 10px;
}

caption-side

This property is used to place a caption for table. We can set this property to top(default) or bottom.

Example:

caption{
caption-side : bottom;
}

empty-cells

This property is used to set whether or not to display borders and background on empty cells in a table. It will work only if the border-collapse is set to separate. We can set this property to show(default) or hide.

Example:

table{
empty-cells : hide;
}

table-layout

This property is used to set table layout. We can set this property either auto(default) or fixed.

Example:

table{
table-layout : fixed;
}

Width and Height

We use width and height property to set table width and height. We can also set table heading (th) width and height.

Example:

table{
width : 100%;
height : 10px;
}

Padding

This property is used to control the space between the border and the content in a table, this is used on <td> and <th> elements.

Example:

th,td{
padding : 10px;
}