Styling Tables

Tables should be only used for tabular data, but when you do use a table, you can control its appearance with CSS. This page explains how the table on the Tables for Tabular Data page was styled.

HTML

The first few lines of the table in the presentation are:

<table id="data" cellspacing="0">
    <caption>www.washington.edu Browser Usage 2003</caption>
    <tr class="top"><td</td><th>Sep</th><th>Oct</th><th>Nov</th></tr>
    <tr><th>IE</th><td>78.65%</td><td>77.18%</td><td>75.89%</td></tr>

The first thing which is noticable is the small amount of markup for the table. Only one class is declared for the first row of the table, but the rest of that and the other rows have no markup other than for the table's structure.

The <table> tag itself defines an identifier and removes the cell spacing. You can set the cell spacing with CSS, but some browsers ignore that, especially those without CSS table support. The other values we can control with CSS, however.

CSS

The CSS for this table is split up into different parts, working from the general rulese to the more specific ones.

table#data {
    font-size: 0.9em;
    border-collapse: collapse;
    empty-cells: show;
}

The last two declarations are table-specific, but if the browser doesn't support them, the presentation will still be OK. We want to collapse the borders so the thin lines between the cells in the main part of the table will look consistent. Without collapsed borders, the outer lines will be a bit thinner than the others, and the thicker lines at the left and top would be slightly thicker in the body than where the axis labels are. Safari doesn't currently support border collapsing, so it has the less desirable appearance.

We add a declaration to show empty cells so the top-left cell's borders appear on Internet Explorer.

table#data td, table#data th {
    padding: 0.25em 0.5em;
}
table#data td {
    border; 1px #636 solid;
    text-align: right;
}

We set a consistent amount of padding for each of the cells, both header and data. For the data cells, we set a 1-pixel border and align the text to the right so the % symbols will line up.

table#data th {
    border: #636 solid;
    border-width: 0 3px 0 0;
    text-align: right;
}
table#data tr.top th {
    border-width: 0 0 3px 0;
    text-align: center;
}
table#data tr.top td {
    border-width: 0 3px 3px 0;
}

For all the header cells, we define the border color and style, and separately define the width for the four sides. We also want the header cells which aren't in the top row to be right-aligned, so we set that as the default.

We then turn our attention to the top row, where the cells will only have a border on the bottom. We want these labels to be center-aligned, so we set those there.

Lastly, the top-left cell (the only one in the row which is a data cell rather than a header cell) needs borders on both the right and bottom, so we set those here.

table#data caption {
    margin-top: 0.5em;
    font-size: 0.8em;
}

We do only a small amount of styling on the table's caption.