MaraHTML

Coding resources, tutorials and more.

CSS Tables

Share this page:

Basic table styling

Many of these properties have been dealt with in other CSS tutorials, particularly the boxes tutorial, so I wouldn't go into too much detail here with them.

table {border: 1px dashed;}
th, td {padding: 5px; width: 20px; height: 20px;}
th {border-bottom: 2px solid black; background-color: #FFC3FF;}
td {text-align: center;}

1	2
3	4

Borders on empty cells

If you've empty cells then you can use the empty-cell property to specify whether or not the border should show.

table {empty-cells: show;}

1	2
3

table {empty-cells:hide;}

Gaps between cells

By default browsers usually leave a small gap between cells. This gap can be increased or decreased with the border-spacing property.

table {border-spacing: 5px 15px;}

1	2
3	4

In order to get rid of 'double-borders' between cells, and get the cells to collapse together, you can use the border-collapse property.

table {border-collapse:collapse;}

1	2
3	4