Setting the table - A Guide to HTML Tables
 
The TABLE tag (and associated TR, TD, and TH tags) in HTML is one of the most useful and yet, most underused tags available. Using tables within your pages can make all the difference to the layout and general readability of your web pages. The TABLE tag is also one of the most complex tags, especially if you are using some of the more advanced features available.

So without further ado, let's dive in and unravel the wonderful world of tables.


So what do we mean by a table, really

The definition of a table is, simply, a collection of rows and columns. Figure 1.1 shows the basic components of a table and will help you understand some of the terminology we will use.


Figure 1 - The components of a table


If you are familiar with spreadsheets you will be a step ahead because they use the same terminology; rows, columns and cells.


Your every-day basic table

So now we know what a table is. Let's look at why we would use a table. First of all we need some data. Supposing that we have the information below and we want to lay it out on a web page for people to look at.

Aston Martin 100
Ferrari 80
Porsche 60
Lamborghini 50


First of all let's put that into a simple HTML page and see the result.


Figure 2.1 - Sample HTML Code



Figure 2.2 - Result of HTML code from Fig 2.1


Ok, so now we have our information in a web page. Not too readable, is it? Wouldn't it be nice if all the numbers were 'tabbed' along a bit so they all sat underneath each other? Something like this?


Figure 2.3 - Our information listed using a table


Or by adding one attribute to our TABLE tag it can look like this:


Figure 2.4 - Same table this time with a border


Here is the HTML code that we used to produce Figure 2.4:


Figure 2.5 - HTML for our list in a table


In the HTML from Figure 2.5 we are creating a table with four rows. The TR tag starts a new row and then within each row we create our table cells using the TD tag. As you can see, each row we create has two cells; the sports car manufacturer and our numeric data.

One thing to be wary of when creating tables is to make sure that you close all the TD and TR tags. If you look at the way I have laid out the HTML in Figure 2.5 you will see that I have indented each component of the table. This makes it very easy to spot any missed closing tags, and is generally good practice when coding web pages, making future editing and overall readability of your code much easier.


The Next Step - Using Attributes

We have already explored how easy it is to create tables, and simply adding more TR and TD tags will expand your table to fit your needs. We are now going to look at some of the attributes available to you for use with your TABLE, TR and TD tags.

Among the useful attributes supported by the TABLE tag are:

  • ALIGN="CENTER or LEFT or RIGHT"
    This attribute specifies how your table is aligned on the page.

  • BORDER="value"
    We used the BORDER attribute in our previous example. This places a border of "value" thickness around the table and each cell. Leaving this out means that all though the border does not show, space is still allocated for it. If you want a compact table set BORDER=0 instead of leaving the command out. This is also a very useful attribute when 'debugging' tables and working out what is in each cell.

  • CELLPADDING="value"
    This attribute determines the amount of space between the borders of the table cell and the actual content of the cell.

  • CELLSPACING="value"
    This attribute determines the amount of space inserted between individual table data cells.

  • WIDTH="value or percent"
    This attribute specifies the width of the entire table either in pixels or as a percentage of the browser window. For example, a table with of 100% will always be as wide as the browser window in which it is opened.

  • HEIGHT="value or percent"
    This attribute specifies the height of the entire table either in pixels of as a percentage of the browser window.

  • BGCOLOR="#rrggbb or colour name"
    This attribute specifies the background colour of the table either using the hexadecimal red-green-blue colours or specified colour names.

  • CLASS="Style Sheet Class name"
    This attribute specifies the name of the style sheet class to use when displaying the table. (Check out our CSS tutorial for more info on this)

There are several more attributes some of which are browser specific, but these are the ones I find myself using most frequently.

For the most compact table use: BORDER="0" CELLSPACING="0" CELLPADDING="0"

Among the useful attributes supported by the TR tag are:

  • BGCOLOR="#rrggbb or colour name"
    This attribute specifies the background colour of the table row either using the hexadecimal red-green-blue colours or specified colour names.

  • CLASS="Style Sheet Class name"
    This attribute specifies the name of the style sheet class to use when displaying the table row. (Check out our CSS tutorial for more info on this)

Once again, this is not a definitive list, just some of the most useful attributes.

And finally, for this section, some attributes for the TD tag, and there are some really neat ones here.

  • BGCOLOR="#rrggbb or colour name"
    This attribute specifies the background colour of the table data cell either using the hexadecimal red-green-blue colours or specified colour names.

  • CLASS="Style Sheet Class name"
    This attribute specifies the name of the style sheet class to use when displaying the table data cell. (Check out our CSS tutorial for more info on this)

  • ALIGN="CENTER or LEFT or RIGHT"
    This attribute specifies the alignment of the data within a table cell. For example you can align your numeric data to the right for further readability.

  • VALIGN="BASELINE or BOTTOM or MIDDLE or TOP"
    This attribute specifies the vertical alignment of the data within a table cell.

  • COLSPAN="Value"
    This attribute specifies how many columns in the table this cell should span. More about this below.

  • ROWSPAN="Value"
    This attribute specifies how many rows in the table this cell should span. More about this below too.

Phew! Well, the good news is that you don't need to take all those in at once. But it is good to know that they are all there to make your tables very flexible and, of course, pretty. So, I think what we need now is a little break so sit back and have a look at the example of a few of those attributes in use.


Figure 3.1 - Using a few attributes


As you can see we have, rather unfortunately, used some attributes here to change some colours and all sorts of 'interesting' things. We can't blame the bad humour on the attributes though. Sorry. So let's have a look at the code we used to create this page and you can see which attributes were responsible for what.


Figure 3.2 - The HTML used to create Figure 3.1



Mopping up - bits we missed

One tag that I have as yet neglected to mention is the TH tag. This tag specifies a column header. It has roughly the same attributes as the TD tag, or at least, all the ones mentioned in this tutorial. The notable thing about the TH tag is that data within it is centred and bold by default. This tag sits within a table's TR tag.


Figure 4.1 - Using the TH tag



Figure 4.2 - The HTML code using the TH tag


The other two attributes I wanted to touch on briefly are the COLSPAN and the ROWSPAN. These two do pretty much what they say. COLSPAN allows a table data cell to span multiple columns and ROWSPAN allows a table data cell to span multiple rows. The example below should illustrate this a little better.


Figure 4.3 - Using the ROWSPAN and COLSPAN attributes



Figure 4.4 - HTML for using the ROWSPAN and COLSPAN attributes



And finally...

Well, there you go. A quick (Yeah right!) low-down on tables. Do bear in mind that this was really just a glimpse at tables that will hopefully get you started with the basics you will need to include them in your web pages. The more you use tables the more you will learn about them and the more you will see just how flexible they are.

One final note, a thought to ponder. Tables can be 'nested' within tables, and this is where indenting your HTML code is invaluable in keeping track of all the TABLE, TR and TD tags. Keep experimenting and have fun.