CSS Table

The CSS table property allows you to control the appearance of the table and utilize the table layout.


The "border-collapse" property merge table borders into a single border.

Value Description
separate The default, border-independent, border-spacing, and empty-cells properties are valid
collapse The adjacent edges are merged, and the border-spacing and empty-cells properties are invalid
table { border-collapse: collapse; }

Comparison of the two properties :

1 Test 1
2 Test 2

1 Test 1
2 Test 2

The table caption position

The caption-side property sets the location of the table caption

Value Description
top The default value, is on the top of the table
right Caption on the right side of the table
bottom Caption is below the table
left Caption on the left side of the table

This property sets the table caption to the top, bottom, left, and right of the table, but the text still centered. use "text-align" attribute to change the text alignment.

table caption {text-align: left;}

Table cell spacing

The "border-spacing" property sets the distance to the border of the cell.

This setting is only valid if the border-collapse attribute is separate (default).

table {
    border-collapse: separate;
    border-spacing: 10px;

Empty cells

The empty-cells property sets whether or not to display content empty cells (borders), which are only valid if the border-collapse attribute is separate.

Value Description
show By default, empty cells are displayed
hide Hide empty cells

This property may not work in some versions of Internet Explorer.

Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.