Styling <table> tag with CSS

Perm url with updates:

(css effect may not show in blogger. Visit the link above to see full effect.)

Styling <table> tag with CSS

Xah Lee, 2010-03-15

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 source code:

<table class="xyz">

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: {border:solid 1px black; border-collapse:collapse; margin:.5ex} th, 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 “1ex” is a CSS unit, “ex” means the height of the letter “x”.

Margin vs Padding

The “margin” and “padding” both gives the area a little room.

css padding vs margin

Padder is the inner area, margin is the outer area, border is between them.

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

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs