Delphinidin

The <table> element has several optional elements that can be used to enhance the presentation and semantic value 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,” you’ll need to understand what is possible in a table.

- Table Captions
Captions are presented in the <caption> element. By default, they are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. The following code shows the caption-side property and its values.

{caption-side: top | bottom;}
Initial value: top

Although IE 6 and IE 7 support the <caption> element for tables, neither IE 6 nor IE 7 supports the CSS caption-side property. The <caption> element is displayed but is always positioned above the table. All other browsers (including IE 8 and 9) have full support.

- Table Columns
In HTML, 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, background color, or text color. IE is the only browser that supports the setting of text color on <col> elements. This is non-standard behavior, so don’t expect to see it in other browsers in the future. All browsers have support for width and background color properties.

- Controlling Table Layout
The following code outlines the table-layout property and its values.

{table-layout: auto | fixed;}
Initial value: auto

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

- Collapsing Borders
Tables, by default, include some spacing between each of the cells appearing in the table. As you have seen in the previous examples, each cell has its own border with a space between the borders of its neighboring cells. The border-collapse property allows you to remove this space completely, and for finer control, the border-spacing property allows you to specify the spacing. The following code outlines the border-collapse property and its values.

{border-collapse: collapse | separate;}
Initial value: separate

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.

- Controlling Border Spacing
The following code outlines the border-spacing property and its values.

{border-spacing :<length>;}
Initial value: 0

IE 6 and IE 7 do not support the border-spacing property. Instead, if you must support these browsers, a common workaround is to remove borders from the table cells completely, and instead wrap the contents of each cell in a <div> element, to which you apply the borders and padding you need. The border-spacing property allows more control over cell spacing than border-collapse because it allows the length to be specified.