∑ Home ◇ Math ◇ Computing ◇ Arts ◇ Words ◇ Literature ◇ Music ◆

Styling HTML Table with CSS

Xah Lee, 2010-03-15, 2010-07-30

This page shows you how to style the html “<table>” tag with CSS.

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.

Styling a html table with css is pretty easy. Here's a example of a table:

Here's the source code:

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

In the above table, we give it a class name “xyz”, so we can use CSS to pretty up all tables of this class.

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 it would look:

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.