News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 22 – Table

CSS tutorials

The table properties are used to change the layout of tables.


The border-collapse property sets whether the table borders are collapsed into a single border or separated as by default.

border-collapse : inherit | separate | collapse


If the borders are separate the border-spacing property can be used to change the spacing. This property can be provided with either one or two length values. With two values the first one sets the horizontal spacing and the second one the vertical spacing.

border-spacing : inherit | <length> | <length> <length>


If a table has a caption the caption-side property can be used to position the caption at either side of the table. The initial value is “top”.

caption-side : inherit | top | bottom | left | right


The empty-cells property sets whether or not to show the borders for any empty cells in the table. Although the CSS specification says the initial value should be “show”, both Firefox and Internet Explorer will hide the empty cells by default.

empty-cells : inherit | show | hide

The border-spacing, caption-side, and empty-cells properties are not supported in Internet Explorer versions before IE8.


The table-layout property is by default set to “auto”. Therefore, the width of table cells will automatically expand to fit their content. To enforce a table’s width the table-layout can be set to “fixed”. The horizontal layout will then only depend on the table’s set width and not the content of the cells. This also means that a browser can render the table faster, since it will know the dimension of the table as soon as the first row has been received.

table-layout : auto | fixed
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours