Simple Little Table (HTML/CSS3 & PSD)

Love ‘em or hate ‘em (ok, you hate them) sometimes tables can’t be avoided. Today’s freebie is a simple little table design that should stop them burning your eyes.

The idea behind this particular table is to use it as a base, you can drop this straight into most designs and customize if necessary, leave it if not. As always the download includes the editable PSD. Enjoy!

Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
7+

Usage

Place this css style in your theme’s style.css, which you can find under Appearence> Editor (this refers to wordpress, but overall the instructions are equal for every usage).

After, paste this code in your post HTML editor.

Change back to visual and edit the contents to suit your needs, if you need more rows, add:

if you need more columns, you need to add a td in every tr, and a th in the table header.

The table markup

(copy to the HTML editor in your platform)

Dont forget to follow us on twitter or like our page on facebook :-)
and take a look at our premium scripts too ;-)


Husband, user experience designer, web developer, code addict, a geek