For years, tables were the only way to build a grid structure to lay out web pages. Thankfully, tables are no longer necessary—or indeed recommended—for page layout. Normally, they should be used only for the display of data that needs to be presented in a grid format—timetables, price lists, sports results, and so on. That’s the focus of this chapter: styling tables that contain data.

There are no plans to add any new features to tables in CSS3. However, using the CSS3 selectors described in the preceding chapter makes it considerably easier to style tables without the need for extra markup in the HTML.

In this chapter, you’ll learn about the following:

• Styling borders around tables and individual cells
• Adjusting the space between table cells and inside them
• Moving the position of the table caption
• Suppressing the display of empty cells
• Preventing columns from exceeding a fixed width
• Controlling the horizontal and vertical alignment of content in table cells

Before diving into the details of styling tables with CSS, it’s important to understand the basic structure of tables and how browsers lay out the various components.

Basic Table Structure

In HTML 4.01 and XHTML 1.0, you can add a border to the table, give it a width, and adjust the space around the data by adding the border, width, cellpadding, and cellspacing attributes to the opening <table> tag. In HTML5, only the border attribute is valid and, if used, its value must either be an empty string or 1.

Removing the width, cellpadding, and cellspacing attributes from the <table> tag produces only the bare bones of a data table like the one in basic_table.html, which looks like this:

<table border="1">
    <tr>
        <td>Row 1-1</td>
        <td>Row 1-2</td>
    </tr>
    <tr>
        <td>Row 2-1</td>
        <td>Row 2-2</td>
    </tr>
</table>

Setting the border attribute to 1 puts a 1px border around the whole table and each individual cell, producing the effect of a raised double border around each cell. Because there’s no width, cellspacing, or cellpadding, the table collapses around the content, as shown in Figure 14-1.

This minimalist layout not only looks ugly; it’s difficult to read if there are more than a handful of data cells. However, CSS gives you greater control over horizontal and vertical spacing than cellpadding and cellspacing. It also offers better options for controlling the borders of table elements, so it’s usually advisable to omit the border attribute from the opening <table> tag.

First, though, let’s continue exploring how tables are structured and laid out.

<table>
    <caption>Regional Sales Results</caption>
    <tr>

You specify the number of columns in the group with the span attribute. So, let’s say you have a five-column table, and you use the first column for labels and the remaining columns for data, you could style the column groups using classes like this:

<colgroup span="1" class="labelcol">
<colgroup span="4" class="datacol">

Alternatively, you can list individual columns using <col> tags inside <colgroup> tags like this:

<colgroup>
    <col class="labelcol">
    <col class="oddcol">
    <col class="evencol">
    <col class="oddcol">
    <col class="evencol">
</colgroup>

The <col> tag also accepts the span attribute, so you can apply the same class to multiple adjacent columns. The following example applies the datacol class to the three middle columns of a table:

<colgroup>
    <col class="labelcol">
    <col span="3" class="datacol">
    <col class="lastcol">
</colgroup>

The number of columns in the table must be the same as specified in the <colgroup> and <col> tags.

Defining Table Header and Footer Rows

Immediately after the column definitions, you can define table header and footer rows. The table header comes first and consists of one or more table rows enclosed in a pair of <thead> tags. The table footer follows the table header and consists of one or more table rows inside a pair of <tfoot> tags.

The principal advantage of using <thead> and <tfoot> is that browsers add the header and footer rows at the top and bottom of each page when printing a long table. Although it seems counterintuitive, the <tfoot> section normally comes before the main body of the table. You’ll see how this works in the next section.

Grouping Table Rows into Sections

To divide a table into horizontal sections, you can wrap one or more rows in pairs of <tbody> tags. The table in table_sections.html uses <tbody> tags to separate a company’s sales report into sections. It also has table header and footer rows like this:

<table>
    <thead>
        <tr>
            <th>Period</th>
            <th>Results</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Period</th>
            <th>Results</th>
            <th>Amount</th>
        </tr>
    </tfoot>
    <tbody id="q1">
        <tr>
            <td>Q1</td>
            <td>Sales</td>
            <td>$4.5m</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Expenditure</td>
            <td>$4.1m</td>
        </tr>
    </tbody>
    <tbody id="q2">
        <tr>
            <td>Q2</td>
            <td>Sales</td>
            <td>$4.9m</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>Expenditure</td>
            <td>$4.7m</td>
        </tr>
    </tbody>
</table>

The <tbody> tags divide the table into sections that can be styled independently. The screenshot on the left of Figure 14-4 shows the table with some simple styles added. Note how the <tfoot> section is displayed at the bottom of the table, even though it comes before either of the <tbody> sections. This is not the result of the CSS styles. You can verify this by commenting out the styles in the <head> of the page. The <tfoot> section is still at the bottom of the table, as shown on the right of Figure 14-4.

How Browsers Lay Out Tables

That excursion into the lesser known table elements was intended as a prelude to help you understand how browsers assemble tables in six stages, as follows:

1. Table
2. Column groups
3. Individual columns
4. Row groups
5. Individual rows
6. Individual cells

To show how tables are rendered, layout_order.html progressively adds styles to the whole table, followed by a group of two columns, a single column within that group, a group of two rows, an individual row within that group, and finally two individual cells (see Figure 14-5).

Each style, apart from the one applied to the individual cells, uses a lighter shade of gray, which should make it obvious that it’s being painted on top of the previous one and obscuring it.

Styling Table Borders

When you use CSS to add a border to a table, the border affects only the table, and not the cells inside. You can control each border independently, using the same border properties described in Chapter 9. The styles in double_border.html define the table border like this (see Figure 14-6):

table {
    border: #000 double 10px;
}

In fact, you don’t need to declare a border or use the same style on every side. The styles in different_borders.html add a top and bottom border like this (see Figure 14-7):

table {
    border-top: #000 double 10px;
    border-bottom: #999 solid 5px;
}

For that extra special table, you can even use a border image. You apply it in exactly the same way as to any other element (see Chapter 9 for details). The styles in border-image.html add a default double border, and then use the border-image shorthand property with browser-specific prefixes like this:

table {
    border: 24px double #4B8896;
    -moz-border-image: url(images/frame1.png) 24 round;
    -o-border-image: url(images/frame1.png) 24 round;
    -webkit-border-image: url(images/frame1.png) 24 fill round;
    border-image: url(images/frame1.png) 24 fill round ;
}

Browsers that support border images render the table as shown in Figure 14-8.

Adding Borders to Table Cells

Because adding a table border with CSS has no effect on the table cells, you need to create a separate style for the cells. This gives you the freedom to choose a different color and/or style for the cell borders. The style rules in cell_borders.html add a 1px solid red border to all table cells like this:

td {
    border: #F00 solid 1px;
}

As you can see in Figure 14-9, the border around each cell is separate from the table border, and there is a small gap between each cell.

Eliminating the Space Between Cells

To eliminate the gap between cell borders, use border-collapse, which accepts just two values, namely:

• collapse This merges adjacent borders within a table.
• separate This is the default setting, which leaves a small gap between table cells. To create a gap larger than the default, you need to use border-spacing, which is described later in this chapter.

In border-collapse.html, the table and cells are styled like this:

table {
    border: #000 solid 5px;
    border-collapse: collapse;
}
td {
    border: #F00 solid 1px;
}

As Figure 14-10 shows, the gap between the cells is not only eliminated, but the border around each cell is just 1px thick, and there’s no red border sandwiched between the outer cells and the table border. Because the table border is wider, it hides the outer borders of adjacent cells. But if the cell borders are the same width as the table border, the table border is hidden.

Adding Borders to Columns and Rows

As long as border-collapse is set to collapse, you can define borders for table columns and rows. Most browsers support borders on all table elements, including <tr>, <tbody>, <thead>, <tfoot>, <col>, and <colgroup>, as well as <th> and <td>. However, IE 6 and IE 7 support borders only on individual table cells. As a result, the most reliable cross-browser solution is to apply a right border to table cells to create a border on table columns, and to apply a bottom border on table cells to add a border to table rows. If the table border is the same color or wider, the border of the last column or row merges with the table border. For example, column_borders.html adapts the file from one of the exercises in Chapter 13 to add a 1px border to the table and a 1px right border to the <th> and <td> cells like this:

table {
    border-collapse: collapse;
    margin-left: 35px;
    background-color: #DED68B;
    border: 1px solid #514F33;
}
th, td {
    padding: 5px 10px;
    text-align: center;
    white-space: nowrap;
    border-right: 1px solid #514F33;
}

The border color is the same as the background color of the <th> cells. Figure 14-11 shows the result.

Although IE 6 doesn’t support the alternate background colors, it renders the borders correctly, as Figure 14-12 shows.

Switching the border from the right to the bottom of each cell creates row borders, as shown in Figure 14-13 (the code is in row_borders.html):

Applying Other Styles to Columns

The CSS table model is described as being row primary because you specify rows explicitly in the HTML markup. Columns are derived from the cells in each row. Although the HTML <colgroup> and <col> elements allow you to specify column groups and individual columns, neither is required.

If you decide to specify column groups and columns in the HTML markup, you need to be aware that columns accept only four styles, namely:

• background
• border
• width
• visibility

For borders on columns and column groups, border-collapse must be set to collapse.

When used for <colgroup> or <col>, the only legal value for visibility is collapse. According to the specification, this hides the column and reduces the width of the table by the column’s width. However, this is currently implemented correctly only by IE 8+ and Opera 11 + .

To demonstrate the use of visibility with columns, the HTML markup in column_collapse.html identifies the six columns in a table like this:

<colgroup span="1">
<colgroup>
    <col id="avg">
    <col id="eng">
    <col id="wales">
    <col id="scot">
    <col id="ni">
</colgroup>

The styles then hide the second and fourth columns like this:

#avg, #wales {
    visibility: collapse;
}

Figure 14-14 shows the result in IE 9. The columns are correctly hidden, and the width of the table has been reduced accordingly. Recent versions of Opera produce the same result. Firefox 14 removes the columns correctly, but leaves the outlines of two empty columns on the right. Chrome 21 and Safari 6 ignore the visibility property on columns.

Using the visibility Property with Table Rows

The visibility property can also be used with table rows. As with <colgroup> and <col>, the only legal value is collapse. The styles in row_collapse.html hide the third row like this:

tr:nth-child(3) {
    visibility: collapse;
}

IE 9, Firefox 14, and Opera 12 hide the row and close the gap. However, Chrome 21 and Safari 6 leave the ugly gap shown in Figure 14-15.

IE 8 doesn’t hide the row because it doesn’t support the :nth-child() pseudo-class, but it works correctly if you use an ID selector instead. Interestingly, when you use an ID selector, IE 6 and IE 7 handle the visibility property more gracefully than Chrome and Safari. They simply ignore it, and display the row as normal.

Adjusting the Space Between Table Cells

The CSS equivalent of the HTML cellspacing attribute is border-spacing, which is mutually exclusive with border-collapse. If you want to control the spacing between cells, border-collapse must be set to separate or omitted altogether (it’s the default way of displaying tables).

Unlike cellspacing, which adds the same amount of space around all sides of each cell, border-spacing lets you specify different values for horizontal and vertical spacing. If you supply one value, it applies to both axes. However, if you supply two values, the first is applied to horizontal spacing, and the second to vertical spacing.

Adjusting Horizontal and Vertical Space Inside Table Cells

If you’re wondering what the CSS equivalent of cellpadding is, there isn’t one. You just use the ordinary padding property, which gives you complete control over the padding in every table cell, and you can have different amounts of padding on each side. It’s important to remember that table rows are always as high as the tallest cell; and columns normally expand to accommodate the widest cell.

To demonstrate how padding works in table cells, the styles in padding_cells.html applies a different amount of padding to each side like this:

td {
    border: #F00 solid 1px;
    padding: 5px 10px 20px 15px;
}

However, the second cell in the third row is styled like this:

tr:nth-child(3) > td:nth-child(2) {
    padding: 40px;
}

This adds considerably more padding than to other cells. As Figure 14-17 shows, this increases the height of the entire row, as well as the width of the column. The extra height also affects the top padding in the cells on either side but does not apply the same value as in the center cell.

Controlling the Position of the Table Caption

By default, the caption appears above the table, but you can move it underneath using the caption-side property, which accepts two values:

• bottom Puts the caption under the table.
• top Puts the caption above the table. This is the default value.

In the original CSS2 draft, there were two other values: left and right. However, Firefox was the only browser to offer support, so they were removed from the final specification.

All mainstream browsers, including IE 8, support caption-side. It’s not supported in IE 6 or IE 7.

Because the caption is an integral part of the table, you can define the caption-side property in the style rule for the table or in a separate rule for the caption itself. The caption inherits its text color and width from the table. You can style a caption like any other text element, giving it a color and font properties of its own.