Tables

Tables are somewhat different to all of the other XHTML tags that we have looked at so far. With the tags that we have looked at so far all of the different tags can be used independently of one another provided that you don't try to place certain tags inside of certain others where they are not allowed to go. With tables though all of the relevant tags are directly related to one another and must go in the specific places relative to the other tags that are used to build up the table definition. There are a few optional tags but even these must go in a specific location if you use them at all.

For this reason I am going to take a different approach with the table tutorials to that which I have taken with the earlier ones in this series. Instead of providing you with a complete working web page to demonstrate the use of each of the tags as I did with the earlier tutorials we will instead build up the code to produce a single table step by step over several tutorials with each tutorial building on the code that we have looked at in the tutorial before. Only once we get to the end of the series of XHTML table tutorials will we have a complete table defined suitable for inclusion in an actual web page.

Just before we start though, you may be wondering why I have left tables until toward the end of the tutorial series rather than dealing with it early on. The reason is that with properly written XHTML that uses stylesheets to define the appearance of the page there is seldom any need to use tables. The only time that tables are actually needed is where you have tabular data that you wish to display. A lot of people misuse tables to do their page layout instead of doing it correctly using stylesheets. As we look at how to build up a complete table definition we will occasionally take a break to consider those parts of a table which a genuine table really ought to have which are not needed when a table is misused to force a particular layout. By recognising those elements that a genuine table will have you will be able to determine if a table is actually the correct structure to be using in your page.

Our entire table is contained within a table container. This is what identifies the table as being a table. What is within this container is the table and must follow the rules that apply to defining a table. While there are a number of optional attributes that can be attached to a table tag they are all optional. Apart from the usual id and class attributes the only other attribute that actually performs any useful task not better done via your stylesheet is the summary attribute that allows you to describe what your table is all about. If you intend placing a summary on your table then that is a reasonable indication that what you have is actually a table.

The only tags that can be nested directly inside of a table are those that we have already added into our table template. You may see tables coded on web pages elsewhere that do not include any of these tags and which instead have tr tags coded directly inside the table instead. Where this is done the browser itself adds a tbody container around all of the tr tags to correct the table definition. To create your table properly yourself you should include the tbody container yourself. Of the tags shown so far within our table the tbody is the only one which is mandatory and also the only one where you are allowed to have more than one occurrence of the container (although there is seldom a need to have more than one.

I'll conclude this first table tutorial by looking at the caption container. This optional part of the table actually appears outside of the table itself (usually either directly above or directly below the table content and contains plain text that provides a title for the table. If you intend placing a caption on your table then that is a reasonable indication that what you have is actually a table.

In the next tutorial we will look at what the other top level containers within a table are for and how to divide a table up into rows.