Styling HTML Table with CSS

By Xah Lee. Date: . Last updated: .

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

Here is a example of a table:

AB
CD

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:

AB
CD

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.

Old HTML AttributesCSS
cellpadding="3"padding:3px
cellspacing="5"margin:5px
bgcolor="lightgrey"background-color:lightgrey
align="right"text-align:right

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

[see HTML Tags Complete List]

HTML Table