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:


Here's the HTML code:

<table class="xyz">

Here's the CSS:
border:solid 1px black;
} th, td
border:solid 1px gray;

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's a comparison showing old HTML table's formatting attributes and the CSS equivalent.

Old HTML AttributesCSS

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

[see HTML5 Tags Complete List]

HTML Table

  1. HTML Table Examples
  2. HTML Table, thead, tbody, tfoot
  3. HTML Table, colgroup, col
  4. Styling HTML Table with CSS
  5. CSS: 3 Columns Page Layout
  6. Pure CSS Table
Liket it? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Object Reference
  5. DOM Scripting
  6. SVG
  7. Blog