Advanced Tables

Okay till now, you must be confident with creating tables and its tags. You have already done or used tags like table, tr, td, th and even rowspan and colspan. So now I am moving on to the advance tutorial of the table tags.

Those are as below:
colgroup and col
summary and caption
headers, footers and scrolling table

colgroup and col:

These tags allow you to define the table columns and style them as desired, which is particularly useful if you want certain columns aligned or coloured differently, as without this, you need to style individual cells.

For example:
<table>
    <colgroup>
        <col />
        <col class="alternate" />
        <col />
    </colgroup>
    <tr>
        <td>Red</td>
        <td>Blue</td>
        <td>Green</td>
    </tr>
    <tr>
        <td>Voilent</td>
        <td>Black</td>
        <td>White</td>
    </tr>
</table>

Okay now what does above code do? Well the class named 'alternate' will be applied to the second column or the second cell in every row.

You can also use the span attribute on either colgroup or col, in a similar way to rowspan and colspan.

Using it with the colgroup tag will define the number of rows that the column group will belong to, for example <colgroup span="2"></colgroup> would group the first two columns. When span is used in colgroup, you shouldn't then use col tags.

Using span in the col tag is more sensible, and could, for example, be applied to the above example like this:


<table>
    <colgroup>
        <col />
        <col span="2" class="alternate" />
    </colgroup>

Summary and Caption Interlude

A brief and easy accessibility consideration is to always apply a summary and caption to the table.

A summary can be applied to a table using the summary attribute in the opening table tag. This won't be displayed, but can aid in a non-visual representation of a table.

The caption tag defines the caption straight after the opening table tag. It will appear above the table by default, but can be placed top, right, bottom or left with the caption-side CSS property, although IE won't take any notice of this.

For example:
<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
    <caption>Locust mating habits</caption>
...

Headers, footers and the quest for the scrolling table

thead, tfoot and tbody allow you to separate the table into header, footer and body. This is particularly useful for large tables and when printed for example, the header and footer rows should appear on every page.

These elements must be defined in the order thead - tfoot - tbody.

For example:
<table>
<thead>
<tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
    <td>Footer 1</td>
    <td>Footer 2</td>
    <td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
        <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
</tr>
...
</tbody>
</table>

You can make the tbody element scroll in Mozilla, by applying the style overflow: auto; max-height: [whatever] to it. You will then see the header and footer kept in place and a vertical scroll bar to the right of the body. You should use the max-height property because IE doesn't recognise it and so it is safer than using the height property, which IE would apply to every row.