If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

So you think you know how to make a table. Sure, you know the table, tr, td and th tags, you’ve even got the rowspan and colspan attributes in your pocket. You can make a really cute little plywood coffee table, but don’t you want to know how to make one of those polished solid wood, glass top dining tables that can take the weight of an oversized elephant?

You do? Oh joy.

The columns strike back

Table rows tend to make table columns look rather stupid. They do all the work, as the table is built row by row, leaving the columns feeling quite dejected.

Luckily for those eager columns though, the colgroup and col tags have come to their rescue.

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.

Here is an example of these tags in use:

<table>
	<colgroup>
		<col />
		<col class=“alternate” />
		<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.

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

This would apply ‘alternate’ to the last two columns.

Oh, but there had to be a catch, didn’t there? Here it is: The only styles you can apply to columns are borders, backgrounds, width and visibility.

Internet Explorer appears to behave much better than other browsers because it takes on board pretty much any CSS property, such as color, but, as it turns out, this is only because it acts in a mad wacky way. For a detailed explanation of this peculiar anomaly, let Hixie explain.

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.

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

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.

Note: Back to normal browser differences, this time IE doesn’t have a clue when it comes to headers and footers, and although it renders them in the table, they will not appear at the top and bottom of every printed page, let alone deliver the scrolling table.

Be wary of using scrolling tables. Although they serve a very useful purpose, most users aren’t used to them and may believe that the data presented above the line is the only data available.