Styling HTML Table with CSS

Xah Lee, 2010-03-15, …, 2011-07-07

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

Styling a HTML table with CSS is pretty easy. Here's a example of a table:

Here's the HTML code:

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

Here's the CSS:

table.xyz {border:solid 1px black; border-collapse:collapse; margin:.5ex}
table.xyz th, table.xyz td {border:solid 1px gray; padding:.5ex}

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:

The .5ex is a CSS unit, “ex” means the height of the letter “x”.

Margin vs Padding

See: CSS Margin vs Padding.

CSS Styling vs Old HTML Table Tags

Here's 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: HTML5 Tags).

Misc

If you want a Table without using the HTML “table” tag but pure CSS, see: CSS Table (Tableless Table).

If you want to layout using CSS, such as 3-column layout, see: Tableless Layout with CSS.