Column Headings - thead

The thead element is used to define the column headings for your table content. Needing headings for the columns is a good indication that you should be using a table.

There are a couple of reasons why the column headings are separated out into their own element of the table like this.

Unfortunately there are very few browsers that know how to print tables properly at the moment but more browsers should implement this correctly in the future and so if you place your column headings inside the thead now your page will be ready when the browsers do implement tables properly.

So what goes inside the thead container? As an example let's assume that we want a table with three columns.

<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>

The tr container defines a row within our table. Because this one is in the thead we know that it is a heading row for our table. The only attributes that we will ever need to add to a tr tag are class and id.

We can have more than one tr container within our heading if we need more than one heading row however most of the time there will only ever be a need for one tr container within the heading. Rows are the only things that can go directly within a table heading and so everything within a thead needs to be contained within one of the tr containers within the thead. No other tags can be used within the thead unless they are contained within a tr.

Within each row we have as many th containers as we have columns. Each th container defines the heading for one of the columns in our table. It is possible to merge heading elements together where we want a single element over more than one column or row but we will leave looking at that until a later tutorial.

A tr container can only contain two types of elements th heading elements and td detail elements. Since we are defining a table heading we would expect all of the content within the table heading rows to consist of table headings and hence the th elements will be used rather than the td elements.

The th elements themselves can contain just about any XHTML content that you can use outside of a table. There is one important attribute that you may want to add to the th tags in your thead and that is scope="col" which identifies to the browser that this heading is a column heading (which may not otherwise be obvious to someone listening to the page for example).

You can of course use class and id attributes with a th element in order to define its appearance. We'll look at what other attributes you may want to use there in a later tutorial.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow