Styling Table Borders with CSS

We can choose to display our table borders in one of two ways using the border-collapse CSS property.

border-collapse: collapse

The first way, border-collapse: collapse displays our table cells so that they share the borders with adjacent cells. This means that there is only one dividing line between cells:

table {
	border-collapse: collapse;
}

This gives the following effect:

Company accounts
Year Income Expenditure Profit
2004 10m 8m 2m
2005 13m 10m 3m
2006 16m 12m 4m

border-collapse: separate

The second method, border-collapse: separate displays each cell as being separate to those around it:

table {
	border-collapse: separate;
}

Which gives us:

Company accounts
Year Income Expenditure Profit
2004 10m 8m 2m
2005 13m 10m 3m
2006 16m 12m 4m

The way you choose to display your HTML tables is entirely down to you personal preferences, but it can be a good idea to stick to one choice for your entire website in the interest of consistency.

In the next part we will see how we can adjust the colors of our table borders and cells.