Extras & Tools
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.
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.
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.
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).
Column Styles
Sometimes you will see highlighting on a column, like this. It draws attention to that particular column.
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.