Mastering Tables to Make Your Site Look Great

There are still a lot of things to learn about mastering tables, even if you know such tags as the table, tr, td and th tags as well as rowspan and colspan attributes. So, let’s find out how to make the tables you made more sophisticated and great looking.

Columns

In case you also think that table rows make table columns look ugly you can use the colgroup and col tags to make things better. Thus, using these tags you can define the table columns and style them as you wish. For example, you can colour them differently or make some columns aligned without styling individual cells.

Look at the example of these tags:

<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>

The styles of the class ‘alternate’ will be applied to the second column, or the second cell in every row.

The span attribute can also be used on either colgroup or col, in a similar way to rowspan and colspan.

To define the number of rows that the column group will belong to you can use it with the colgroup tag. Thus, example <colgroup span=”2″></colgroup> will group the first two columns. If span is used in colgroup, col tags should not be used.

You also can apply span in the col tag as in the following sample that will apply ‘alternate’ to the last two columns:

<table>
<colgroup>
<col />
<col span=”2″ />
</colgroup>
…

Note: the only styles you can apply to columns are borders, backgrounds, width and visibility.

Summary and Caption

Summary and caption should be applied to the table taking into consideration brief and easy accessibility.

A summary can be applied to a table with the summary attribute in the opening table tag.

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. However, IE won’t take any notice of this.

<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 Scrolling Table

To separate the table into header, footer and body you should use thead, tfoot and tbody.

These elements must be defined in the order thead – tfoot – tbody and would look like this:

<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>

By applying the style overflow: auto; max-height: [whatever] to Mozilla, you will make the tbody element scroll in this browser. The header and footer will be kept in place and a vertical scroll bar will be to the right of the body.

The max-height property should be used because IE doesn’t recognize it. What is more, it is safer than using the height property, which IE would apply to every row.