Extras & Tools

back to all tools and extras

Table Styles

There are lots of different ways that you can present tabular data in HTML and CSS. This page shows some very different examples of tables, and you can download the code for each of these at the bottom of the page.

A general table style

General table

Here is one of the tables you met in the book. It is suitable for many uses, and you could change the color palette to create a similar table that fits in with your site.

A dark background table

Dark Background

The use of gradients in the background of this table adds a three dimensional feel to the items in it. The border at the top of each table row is slightly lighter than the gradient, and the divider between each column is slightly darker than the gradient. The gradient used in the background of the table cells is supplied in CSS (as with the first table) and also with a backup image for older browsers that do not support CSS3 gradients.

A financial table

Financial table

The rows of this table have alternating shades of gray to make it easier to follow across a row. Under the heading row, and above the footer, there is a strong underline, to help distinguish between headings, totals, and the remaining content. Headings are made uppercase to make them stand out more, and numbers are right aligned so that the figures in the rowns above and below align correctly (even if they have a different number of digits).

A table that highlights a column

Column Styles

Sometimes you will see highlighting on a column, like this. It draws attention to that particular column.

A table with alternating rows and interactive buttons

Alternating Rows

In this example, you can see that each row has an alternating color making it easier for you to compare the different values in each row. This example also includes links that change style when you roll over them.

You can download all the table styles shown on this page using the orange button.

Download table examples