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's a example of a table:

AB
CD

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: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's 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="#FF0000"background-color:#FF0000
align="right"text-align:right

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

[see HTML5 Tags Complete List]

Table Layout Topic

  1. HTML Table Examples
  2. Styling HTML Table with CSS
  3. CSS: 3 Columns Page Layout Tutorial
  4. Pure CSS Table
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth