The <table> element has several optional elements that can be used to enhance the presentation of a table, including captions, columns, headings, and footers. Take a look at a <table> element that makes use of all these optional elements. When I get into the discussion of styling tables, beginning with the section "Table Captions and the caption-side Property," you'll need to understand what is possible in a table. I also present CSS 2 properties that are table-specific, allowing more control over table presentation. The markup in Figure 12-1 shows a table complete with all the optional bells and whistles.

Figure 12-1. Figure 12-1

In Figure 12-1, you can see that (X)HTML tables support many additional, optional elements.

In the coming sections, you learn more about what properties CSS offers for tweaking the visual presentation of (X)HTML tables.

Captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.

The following table shows the caption-side property and its possible values.

Using the caption-side property, you can control whether the caption appears above or below the table. Figure 12-2 is a demonstration of the caption-side property.

Figure 12-2a. Figure 12-2a

The CSS in Figure 12-2a is included in the markup in Figure 12-2b.

Figure 12-2b. Figure 12-2b

In Figure 12-2c, you see how the caption-side property works in the browsers that support it. In Safari and Firefox, the table caption appears beneath the table, but in IE 6 and IE 7, neither of which support the caption-side property the table caption appears above the table (which is the default position of the caption).

In the next section, I continue the discussion of tables with what styles are allowed on table columns.

Figure 12-2c. Figure 12-2c

In HTML/XHTML, the <colgroup> and <col> elements allow the vertical columns of a table to be controlled. This is useful for controlling the width of a column of data or other aspects of presentation, such as background color or text color.

By using these elements, you can span more than one column or have one column defined for each actual column, as in the following example:

<table>
    <colgroup>
        <col span='2' />
        <col />
    </colgroup>
    <tbody>
        <tr>
            <td> column 1</td>
            <td> column 2</td>
            <td> column 3</td>
        </tr>
    </tbody>
</table>

<col span='2' /> controls the presentation of the <td> elements containing the text of column 1 and column 2, the first two columns of the table. The last <col/> element (without the span attribute) controls the presentation of column 3, contained in the last <td> element.

Using CSS, I can continue the example containing my favorite records. This example shows a column defined for each actual column of data, or in other words, each <td> element appearing in a row. In the example in Figure 12-3, a column is defined for each cell, and each row has three cells; consequently, there are three columns. In Figure 12-3, you see what styles are allowed on the <col /> element.

The CSS in Figure 12-3a is included in the markup in Figure 12-3b.

Figure 12-3a. Figure 12-3a

Figure 12-3c shows what you get when the markup is loaded into a browser. You can see in Figure 12-3c that Safari supports no CSS on the (X)HTML <col /> element. IE 6 (and IE 7) support the width, background, and color properties on the <col /> element. Mozilla Firefox supports the width and background properties.

Figure 12-3b. Figure 12-3b

Figure 12-3c. Figure 12-3c

In the following Try It Out, I show how all the extra bells and whistles available for <table> elements work in a real-world project and how these elements help you take advantage of CSS. This Try It Out demonstrates placing a recipe in a table. I'm also adding a little eye candy here with CSS background images to enhance the look and feel of the document. This example is also important in Chapter 14, where I show you how it can be ported to XML and styled with CSS as an XML document.

<table class='recipe'>
    <caption>
        Spicy Thai Peanut Sauce
    </caption>
    <colgroup>
        <col/>
        <col/>

<col/>
    <col/>
</colgroup>
<thead>
    <tr>
        <th> quantity     </th>
        <th> measurement  </th>
        <th> product      </th>
        <th> instructions  </th>
    </tr>
</thead>
<tbody>

body {
    font-family: monospace;
    padding: 10px;
    margin: 10px;
    /* Moz proprietary opacity property */
    -moz-opacity: 0.7;
    /* Microsoft proprietary filter property */
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    /* CSS 3 opacity property */
    opacity: 0.7;
    background: url('cross_hatch.jpg') repeat;
}

html {
   background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center;
}

table.recipe {
    width: 100%;
    margin-bottom: 5px;
}

table.recipe {
    caption-side: top;
    width: 100%;
    margin-bottom: 5px;
}

table.recipe thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.recipe thead th, table.recipe tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.recipe tbody td, table.recipe tfoot td {
    font-size: 130%;
}
table.recipe tfoot td {
    padding: 5px;
}

Now that you have seen the various elements available for use in a <table> element, the following section explores how you control table width with the table-layout property.

The following table outlines the table-layout property and its possible values.

As you learned in Chapter 7, by default, a table expands and contracts to accommodate the data contained inside. As data fills the table, it continues to expand as long as there is space. When you look at them this way, tables are inherently fluid.

table {
   border: thin solid black;
}

This rule is the same as saying:

table {
    border: thin solid black;
    table-layout: auto;
}

The table-layout: auto; declaration is the default behavior of a table.

By default, the table expands only enough for the content that it contains, and this is the same as table-layout: auto;. Sometimes, however, it is necessary to force a table into a fixed width for both the table and the cells. Figure 12-5 is a demonstration of what happens when you specify a fixed width for the table.

Figure 12-5a. Figure 12-5a

To see what a 200-pixel width looks like, Figure 12-5b adds a snippet of markup to the body of the XHTML document showing my favorite records.

This code results in the output depicted in Figure 12-5c.

The table is larger than 200 pixels because the text contained in the cells results in a width larger than 200 pixels. You can use the table-layout: fixed; declaration to force the table into a 200-pixel width. You simply add the declaration, like so:

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 200px;
    table-layout: fixed;
}

Figure 12-5b. Figure 12-5b

Figure 12-5c. Figure 12-5c

Once you've added the table-layout: fixed; declaration, you get the output that you see in Figure 12-6.

Figure 12-6. Figure 12-6

The table is forced to maintain its width of 200 pixels, regardless of how much data is contained in its table cells. If the content inside the cells results in a width larger than 200 pixels, the content overflows. The clipped content is not visible when the document is viewed using IE 6 and IE 7, which is what is supposed to happen. As you see in Figure 12-6, however, the clipped content is visible in Safari, and the same is seen when the document is viewed in Firefox or Opera. You can correct this by adding the following rule:

th, td {
    overflow: hidden;
}

The result is shown in Figure 12-7.

Figure 12-7. Figure 12-7

This is what the output is supposed to look like according to the table-layout property as it appears in the CSS 2 standard, and as supported by IE and Opera. In contrast, as you saw in Chapter 7, the overflow property may also be used to add scroll bars so that the clipped content can be viewed.

The table-layout: fixed; declaration goes by the width defined for the <table> element. In this example, the width is 200 pixels, so the table is forced into having a 200-pixel width. If a width isn't defined for the <table> element, it goes by the width for each <col> element. If no width is defined there, it goes by the width for the <td> elements in the first row of the table.

By default, tables are rendered with table-layout: auto;, which in essence means that the table can expand and contract to accommodate the data contained in its cells. What happens if a percentage width is specified for the table? When the table has a percentage width, each cell is given an equal width that expands and contracts, depending on the space available to it. If the content of the cell is larger than the width, however, the content is clipped, just as it was with a fixed width. The rule for the table is changed to width: 100%; from width: 200px;, as seen in the following example:

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
}

The result is shown in Figure 12-8.

Figure 12-8. Figure 12-8

Each cell is spaced evenly. When the browser window is resized, the table gets smaller. As it gets smaller and the content of the cells become larger than the cell, the content gets clipped as it did in Figure 12-7.

Now that I've presented what the table-layout property does, I want to demonstrate the results of this property when it's applied to the Spicy Thai Peanut Sauce recipe table. Before I apply the table-layout property, however, I first need to apply a temporary rule that adds a border to each cell so that you can see the effect of the table-layout property. In the following Try It Out, you add this rule to the style sheet.

Temporary style rules like this are often helpful in highlighting the effects of rendering that are difficult to see. Keeping the highlighted borders, examine the following Try It Out to see what this example looks like when the table-layout: fixed; declaration is applied.

Now that I've thoroughly explored the table-layout property, in the following sections I examine the other CSS properties that exist for controlling table layout.

The following table outlines the border-collapse property and its possible values.

Tables, by default, include some spacing between each of the cells appearing in the table. In this chapter, you've observed this in each of the "My Favorite Records" examples. In HTML, this was controlled with the cellspacing attribute. CSS 2 replaces this attribute with the border-collapse property and the border-spacing property. By default, the border-collapse property has a value of separate. If you set the value to collapse, you remove the spacing between each cell. When you use the "My Favorite Records" table example again, this is what the rule looks like with the border-collapse: collapse; declaration applied.

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

If you apply the collapse value, all the cells are squeezed tightly together. Figure 12-11 shows what happens.

Figure 12-11. Figure 12-11

The next section talks about how you can control spacing between table cells with greater precision with the border-spacing property.

The following table outlines the border-spacing property and its possible values.

To control the spacing between cells, the border-spacing property was added in CSS 2. The border-spacing property allows more control over cell spacing than border-collapse because it allows the length to be specified.

If, as in the following example, you provide a single length value of 15px, 15 pixels of space are added between each cell, both vertically and horizontally:

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
    border-spacing: 15px;
}

The result is shown in Figure 12-12. You can see that IE 6 does not support the border-spacing property (nor does IE 7, for that matter). Firefox, Opera, and Safari do support this property.

The border-spacing property has the following syntax:

border-spacing: <vertical spacing length> <horizontal spacing length>;

If the optional second value is present, this property allows the vertical and horizontal spacing to be specified. The following snippet results in 15 pixels of space between the top and bottom of each cell:

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
    border-spacing: 0 15px;
}

Figure 12-12. Figure 12-12

The result is shown in Figure 12-13.

Figure 12-13. Figure 12-13

Whereas, if I flip the values around, as in the following:

table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
    table-layout: fixed;
    border-spacing: 15px 0;
}

I get 15 pixels of space between the left and right edges of each cell. The result is shown in Figure 12-14.

Figure 12-14. Figure 12-14

Now that I've shown you how to control the spacing between cells, you can apply this knowledge to the Spicy Thai Peanut Sauce recipe table. The following Try It Out demonstrates a practical use of the border-collapse property in action.

Try It Out: Applying Cell Spacing

Example 12-4. The following steps show how to work with cell spacing.

1. Open Example_12-3. css and make the following modifications to the file:

   table.recipe {
       width: 100%;
       margin-bottom: 5px;
       table-layout: fixed;
       border-collapse: collapse;
   }

2. Save the file as Example_12-4. css.

3. Update the markup in Example_12-3.html to reflect the new style sheet:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                         "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
   <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en1>

   <head>
       <title>Spicy Thai Peanut Sauce</title>
       <link rel='stylesheet' type='text/css' href='Example_12-4.css' />
   </head>
   <body>
       <table class='recipe'>
           <caption>
               Spicy Thai Peanut Sauce
       </caption>

4. Save the file as Example_12-4.html. The result of these changes is shown in Figure 12-15.

   

   Figure 12-15. Figure 12-15

How It Works

As you can see in the output, the addition of border-collapse: collapse; fine-tunes the design for the Spicy Thai Peanut Sauce recipe table. Removing the extra space between the cells tightens up the design.

At this point, I can remove the temporary borders that I included to make the cell edges obvious:

th, td {
    border: 1px solid crimson;
}

With this rule removed, the page looks like what's shown in Figure 12-16.

Figure 12-16. Figure 12-16

The final product shown in Figure 12-16, with the temporary border removed, is saved in the source code files for download at www.wrox.com. After downloading the entire folder structure, you can find the files, Example_12-5.html and Example_12-5.css, under Chapter 12/Try It Out.

In this chapter, I showed you what is possible with HTML/XHTML tables. Here is what I covered:

In the next chapter, I discuss what CSS offers for styling content printing.

Later on, in Chapter 14, I begin discussing how to style an XML document. As I mentioned earlier in this chapter, Chapter 14 relies heavily on the content presented in this chapter because it shows you how to create the examples presented in this chapter with XML and CSS.