Styling <table> tag with CSS

Perm url with updates: http://xahlee.org/js/css_table_style.html

(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:

AB
CD

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:

AB
CD

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
cellpadding="3"padding:3px
cellspacing="5"margin:5px
bgcolor="#FF0000"background-color:#FF0000
align="right"text-align:right

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs