Styling tables (part II)

Alright, so in the first part we covered the structure. Now we’re going to make the pretty.

table { border-collapse: collapse; }

This means “if two borders meet against one another, collapse them rather than have a doubly-thick border.” This is handy so we don’t have to think of inventive ways to accommodate for uniform one-pixel thick borders (even though in this example it isn’t entirely a necessity.)

table { border-collapse: collapse; }
table caption { font-size: 0.9167em;
    text-align: right; }

This is for the caption saying “Events for February 2007”. We’re simply going to shift it to the right-hand side and make it a tad smaller (the em measurement is based on a font size of twelve pixels, and with a little arithmetic the end size for the caption will be eleven pixels.)

table { border-collapse: collapse; }
table caption { font-size: 0.9167em;
    text-align: right; }
table tr th,
table tr td { padding: 2px 5px;
    border: solid #bee4f4;
    border-width: 1px 0;
    vertical-align: top; }

The padding is to replace the old and deprecated cellpadding="2" attribute on the table element. The border is split into two properties to get a “one pixel thick on the top, one pixel thick on the bottom, nothing to the left or right” effect, and the vertical-align is to force every cell in the table to not be vertically centered, which is the default for tables.

table { border-collapse: collapse; }
table caption { font-size: 0.9167em;
    text-align: right; }
table tr th,
table tr td { padding: 2px 5px;
    border: solid #bee4f4;
    border-width: 1px 0;
    vertical-align: top; }
table thead tr th { background: #f0f9fd url('/images/layout/table-heading-flow.gif') repeat-x 0 0;
    border-color: #76c4e5;
    color: #0064a3; }

Okay, here we are adding a background colour and a background image (the image is a one pixel wide by 25 pixel high linear gradient, and the background colour is simply the last colour at the bottom of the gradient.) Set it to repeat horizontally (repeat-x) and then make the border colour and font colour a tad different to emphasise its heading-ness.

table { border-collapse: collapse; }
table caption { font-size: 0.9167em;
    text-align: right; }
table tr th,
table tr td { padding: 2px 5px;
    border: solid #bee4f4;
    border-width: 1px 0;
    vertical-align: top; }
table thead tr th { background: #f0f9fd url('/images/layout/table-heading-flow.gif') repeat-x 0 0;
    border-color: #76c4e5;
    color: #0064a3; }
table tbody tr td { background: url('/images/layout/table-flow.gif') repeat-x 0 0; }

This is setting another one pixel wide by 25 pixel high image to the table cells, this time of the tbody, or table body, to give a slight three-dimensional effect to each row.

And that’s it! We’re about done now …

Except for a couple of quid pro quos: border-collapse only works in IE flavours when they are pushed into standards-compliance mode, not quirks mode. Also, the font size doesn’t inherit properly in a page served to IE in quirks. I might write a post sometime in the future about differences between quirks and standards-compliance mode, but not in this one :)

Here’s one I prepared earlier: the finished table.

This entry was posted in techthings and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *