Styling HTML Table with CSS

This page shows you how to style the HTML “table” tag with CSS.

Here is a example of a table:

Here is the HTML code:

<table class="xyz">
<tr><td>A</td><td>B</td></tr>
<tr><td>C</td><td>D</td></tr>
</table>

Here is the CSS:

table.xyz
{
border:solid 1px black;
border-collapse:collapse;
margin:4px
}

table.xyz th, table.xyz td
{
border:solid 1px gray;
padding:4px
}

The border:solid 1px black means give the border a solid line style, with 1 pixel width, and black color.

The border-collapse:collapse means draw a single line between neighbor cells.

The alternative is border-collapse:separate. Here's how “separate” looks:

Margin vs Padding

CSS: Margin vs Padding

CSS Styling vs Old HTML Table Tags

Here is a comparison showing old HTML table's formatting attributes and the CSS equivalent.

Note that these HTML 4 table attributes are obsolete in HTML 5.

〔see HTML Tags Complete List〕