XHTML - Tables

by Scott Klein

This is the third article in our series of XHTML, written by Scott Klein, which is aimed at beginner HTML starters.  For the experts it details any differences between XHTML and HTML for tables.

It is a basic introduction to tables in XHTML, which covers how to construct a table and the options available with different properties.

For HTML experts, the information in this series of articles  is going to mainly be general information on how to accomplish certain tasks (such as today's article on Tables, future articles such as Links and Frames) in XHTML, with a few new added bits like the differences, if any, between XHTML and HTML.  As we have mentioned before, this is because XHTML is HTML 4 with an XML flavor. 

For those really techie individuals we have also provided the DTD information on tables in the Appendix, for your peruse.

Table Structure

Tables are made up of columns and rows and can range in complexity anywhere from a simple row/column table to one that utilizes headers, footers, and captions.  Let's start by defining the structure elements of an XHTML table.

·        table:  this element makes up the entire table structure. 

·        caption:  this element is optional, but if it is included it must be the first element in the table.

·        thead, tfoot, and tbody:  if these elements are used (they are also optional) they must be used in the order shown here.

·        tr:  this element makes up the row structure of the table.

·        th and td:  table header and table detail.  They are always used in conjunction with the <tr> element.  These two elements make up the cells of the table.

We'll talk more about each of these as we use them.  But for now, let's put our new found XHTML knowledge to work and start building some tables!  Open up your favorite editor and type the following:

 

Here is what it looks like it IE5:

        

What did we do? 

Using the <table>, <tr> and <td> elements we created a simple 2 row, 2 column table.  We used the <table> element to define the table structure and then we used the <tr> and <td> elements to define 2 rows and 2 columns. 

HTML/XHTML Differences

If you take a good look at the code that builds the table you'll notice that there really are no differences between standard HTML and XHTML.  However, we should point out that unlike HTML, this is well-formed.

Pretty neat, huh?  Well, yes and no.  There's nothing that tells us what is contained in the cells or what type of data we are showing in the table. 

So how do we fix that?  We add a header and a caption!  Let's modify our previous code to look like the following:

 

which produces the following:

What did we do?

We used the <caption> element to add a caption to the table.  This now tells us what we are looking at in the table.  We also used the <th> element inside a <tr> element to define column headers.  We used the <tr> element to define another row in the table (the first row) but we used the <th> element to define the first row as headers and to format them as such.

HTML/XHTML Differences

No differences again here.  Still well-formed and using elements found in HTML 4.

Now we are getting somewhere.  Let's go a bit farther.  At some point in our lives we might have the need to create a table where a cell covers more than a single row or column.  How do we do that?  In XHTML we use the colspan and rowspan attributes.

Open up your first example and modify it to look like this:

 

Our results should look like this:

What did we do?

In this example we have a 3 column, 3 row table but the first column "spans" two columns.  We used the colspan attribute of the <td> element on the first row to span 2 columns.  We did this by setting the value of the colspan attribute to 2.

Following suite, we can also span rows.  Let's modify our code like this:

 

which will produce the following:

What did we do?

In this example we again have a 3 column, 3 row table but the first column "spans" two rows.  We used the rowspan attribute of the <td> element on the first row to span 2 rows.  We did this by setting the value of the rowspan attribute to 2.

HTML/XHTML Differences

We haven't used Rowspan or Colspan any differently here than you would in HTML.  Both of these allow you to make a table cell larger or smaller by specifying the number of rows or columns to span.

OK, let's wrap this up by adding a footer to our table.  Open up our first example and make the following changes:

which looks like this in IE5:

What did we do?

This is a bit different than from our first example.  We could have just used our first example and added a fourth row and used that as our footer row, but by using the <thead>, <tfoot>, and <tbody> elements we divide our table into the correct parts.  It also gives us easy access to the table's content by using the DOM, plus it's easier to style our table this way.

You are also probably asking why the <tfoot> went before the <tbody> element in our code.  Good question.  As we stated before, if you use these elements, they must be used in the order listed above.  The reason for this is that it allows the browser to render the <thead> and <tfoot> and then the content of <tbody>.  The content can then be scrolled between the header and footer.

This sequence of child elements is also defined in the XHTML DTD, therefore you need to abide by this sequence:

<!ELEMENT table

     (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

This means that when you create your table you need to list the elements in the order defined by the DTD because the DTD expects them in a particular order.  The DTD defines what order elements are to be used.  For example, the tfoot element is defined in the Table DTD to be used after the thead element.  See the Groundwork article for more information on DTD's.

HTML/XHTML Differences

As you can see, all the same elements that you would use to build Tables in HTML are used in XHTML.  The major difference we have focused on in this article is that XHTML is well-formed, meaning good, clean syntax.

Summary

Whew!  That's a lot to take in.  We've covered tables structurally and given some examples how to use tables in XHTML.  The downside is that we've only begun to scratch the surface.  As I said before, we'll be revisiting tables again and show how to apply style to tables using style sheets in a later article.

This should at least give you an understanding how tables are used in XHTML.  Your homework assignment for this article is to use style attributes in the examples above.  For example:  <table border="1" style="background-color:blue;"> or <tfoot style="background-color:red;">

Good luck!

In the next article we'll be covering links.