This is the most complex topic we've covered so far, so we're going to break it across two lessons. It's not that it's so difficult, but there's a lot of it. Tables are one of the most useful features of HTML, because they give us much more than just a way to arrange text and figures in neat columns. Tables are used widely as a powerful page layout tool; indeed, tables are used more for this purpose than for tabular presentation of data!

We'll begin our discussion of tables with simple examples. First of all, we need to get to grips with the HTML elements used to construct tables. Because of their complexity (relative to the subjects we've covered before), tables need more than one tag to control their presentation. If you think about a typical table of data, it's composed of rows and columns of cells -- and we need tags to represent these rows and columns.

The first tag we need to know is <TABLE> and its closing partner, </TABLE>. Every table must begin with <TABLE> and end with </TABLE>, and we will use other tags between these to define the table completely.

To start building up the table, we need to specify the table rows, using the <TR> ("table row") tag, which takes the closing partner </TR>. We need a pair of <TR> and </TR> tags for each row in the table.

We can look on the table row element as a container for a row of table cells. Table cells are specified using the <TD> ("table data") tag, and its closing mate </TD>. We need a pair of <TD> and </TD> tags for each cell in the row. It is between the <TD> and </TD> tags that we place the text for the cell.

OK, let's build an example to see how all this goes together. Look at this piece of HTML code:

The first point to note is that as I stated earlier, everything to do with the table is contained within the <TABLE> and </TABLE> tags. Second, you'll see that in the opening <TABLE> tag, I've introduced the border attribute. This takes a value in pixels, and controls the width of the frame around the table. It can be set to any value including zero.

Next, note that there are three sets of <TR> and </TR> tags, indicating that the table will have three rows. Within each of these pairs of tags, there are three pairs of <TD> and </TD> tags, indicating that there are three cells within each row. So we have a table of three rows by three columns. The text enclosed by each <TD> and </TD> pair shows the position of that cell in the table.

Now take a look at the result in your browser.

By examining the code and the resultant output, the logic should be quite apparent. Since I've introduced the border attribute in the <TABLE> tag, we can take a little diversion at this point to see how it works. Have a look at this page, which shows the same table as before but with different border sizes. Notice that when border="0", not only does the frame around the table disappear, but the lines around the cells disappear too.

Looking closely at these tables, it might strike you that the text in each cell seems rather cramped. This is because generally, in the absence of any other instructions, table cells will automatically size themselves to enclose the text, and nothing more. But we can add a little more white space around the text in each cell with the cellpadding attribute in the <TABLE> tag. This also takes a value in pixels. Have a look at the code below:

If you now view this in your browser, you'll see the effect of cellpadding. In this case, we have added 10 pixels of space around the text in each cell.

Now look at this page to see the effect of varying the value of cellpadding.

Cellpadding allows us to add space around the text in each cell, but we can also vary the space between cells. We do this using the cellspacing attribute in the <TABLE> tag, as in the code below:

Now look at the effect in your browser. We've added 10 pixels of space between all of the cells.

This page shows the effect of varying the cellspacing value.

In the example tables we've used so far, it happens that the text in each of the cells is about the same length. What happens to the cell dimensions when the length of the text in each cell is different? Look at this example, making sure that the new browser window is maximised.

You'll see that the first column in the table has widened automatically to accommodate the longest bit of text. Now go back to this example again, and re-size the browser window to make it narrower than the width of the table as it first appears. You'll see that the table automatically re-sizes itself to fit within the browser window, causing text in the cells to wrap around to a new line. This automatic re-sizing is a useful feature of tables, but we'll see later that there are ways in which we can control this behaviour and the width of tables.

I'm sure you can see already how useful tables will be for presenting tabular data. But sometimes in tables of data, we need "empty" cells -- cells with no data in them. How do we deal with this? Study the code sample below:

Notice that the first cell in the first row contains no text, like this: <TD></TD>. Now see how the table looks in your browser.

The exact appearance of the empty cell depends upon your browser. In some browsers, it looks as if the cell just isn't there: there are no lines around the empty cell, even though we have set a border. If you want to ensure that the cell is visible, but doesn't have any text in it, all you have to do is place a non-printing character in the cell, like &nbsp;. Using the same example, we would modify the code as in the following snippet:

Now take a look at the difference.

It's probably worth pointing out at this stage that you need to make sure you don't end up with any accidental empty cells. While you're still getting to grips with tables, it's a good idea to plan them out carefully. Sketch your table on paper first; be clear in your own mind about how many rows and columns there are. Then make sure as you write the code for the table that you have the same number of <TR> tags as there are rows in your sketch, and that within each row you have the same number of <TD> tags as there are columns in your sketch.

Let's see what can happen if it goes wrong. Study the code below:

Now view the result in your browser.

Look at the table, and look back at the code. Can you see what's wrong? Clearly the first row of cells containing the subject headings should all have been one place to the right of where they actually are. When you look back at the code, you'll see that there are only five cells in that row instead of six, as in all the other rows. There ought to have been a deliberate empty cell in the first position in that row, like this:

If we had got that right in the first place, our table would have looked like this.

Believe it or not, we've already covered the key things you need to know about tables. The rest of this lesson is about ways of smartening them up -- but there are lots, so let's get on with it!

Captions

Now take a look at this in your browser.

Two points to note:

1. You see that I used the <STRONG> and </STRONG> tags inside the <CAPTION> tags to emphasis "Table 1".

2. When displayed in most browsers, the caption appears above and centred with respect to the table.

Headings

Now check the effect in your browser. Most browsers will render text within the <TH> and </TH> tags in boldface. So using <TH> instead of <TD> gives you headings without having to put in additional tags like <B>.

The next refinement we can introduce is to align the text within individual cells.

I'm sure you've spotted in all the examples so far that the text in every cell is aligned to the left: that's the default position. But we can control this horizontal alignment using the align attribute within the <TD> tag. More than that, we can control the vertical alignment of text in a cell using the valign attribute, again in the <TD> tag. align takes the values of "left", "right" or "center"; valign takes the values of "top", "middle" or "bottom". This is demonstrated in the following code:

Take note of how the align and valign attributes have been set in the <TD> tags, then check the result.

Let's just analyse what's going on. First of all, you probably spotted the attribute width="100%" that I slipped into the <TABLE> tag. Don't worry about it at the moment, we'll come to that subject shortly. I did this just to make sure the table would be wide enough to make the horizontal alignment effects clear.

Looking at the horizontal alignment examples, you can see that the text sits left, centre and right in the cells in accordance with the align attributes in the <TD> tags. But you should also see that the text is vertically aligned to the middle of the cell. Since we didn't include any valign attributes in the <TD> tags for these cells, you can deduce that the default vertical alignment is "middle".

Similarly in the vertical alignment examples, the text is aligned to the top, middle and bottom in accordance with the valign attributes in the <TD> tags. But in each case, it is horizontally aligned to the left: the default horizontal alignment is adopted because we did not include align attributes in the tags for these cells to tell them to do anything different.

Finally, you should have spotted that the headings, which had no alignment attributes in the <TH> tags, are horizontally aligned in the centre of the cell: this is the default alignment for <TH> headings, in contrast with that of <TD> cells. Headings also differ in their default vertical alignment, which is to the top of the cell rather than the middle as with <TD>. But we can modify the behaviour of <TH> cells with the align and valign attributes in exactly the same way as with <TD> cells.

And of course, we can use both align and valign within the same tag.

To demonstrate this, look at this piece of code:

Take a look at the result in your browser.

The first cell in each row contains text intended simply to ensure that each row occupies enough vertical space to let you see the vertical alignment effects clearly. Note how this example shows that we can control <TH> alignment in the same way as <TD>.

That might seem like the end of the cell alignment story -- but not quite. You see, we can use the same align and valign attributes in the <TR> tag. If we do that, then the alignment instructions will apply to every cell within that row. This is a useful short-cut, when we want to apply the same conditions to a whole row of cells.

Check the result in your browser.

This demonstrates how placing these attributes in the <TR> tag can control the alignment of all cells in the row, whether <TD> or <TH>. But -- and it's an important but -- you can override the alignment given in the <TR> tag for any given cell by including alignment attributes in its own <TD> tag. In other words, the alignment specified in a <TD> takes precedence over any alignment specified in the <TR> tag for the row. This is very useful, because it means if we want to have all of the cells in one row to have the same alignment attributes except perhaps for one, then we can stipulate the alignment for all of the other cells in the <TR> tag, and set the alignment for the single cell in its own <TD>. This minimises the overall amount of typing you have to do! Read that bit over again if you didn't quite catch it, then look at this:

According to the code, all of the cells in this single-row table should have text aligned to the right and to the bottom of the cell (because that's what's specified by the attributes in the <TR> tag) except for the final cell, which should be to the left and to the middle (because that's what's specified by the attributes in the <TD> tag). Check out now if it works.

Tables are defined within the <TABLE> and </TABLE> tag pair, using <TR> and </TR> to enclose rows, <TD> and </TD> for data cells, and <TH> and </TH> for cell headings.

The <TABLE> tag can take the border attribute with a value in pixels to define a border or frame around the table. Also available to <TABLE> are the cellpadding and cellspacing attributes (which also take values in pixels). The former controls the space around the text or images in each cell, while the latter determines the spacing between cells.

It's possible to have empty cells, but to make these cells visible in all browsers it's necessary to insert a non-printing character like &nbsp; or <BR> in the cell.

Captions can be added to tables by enclosing the caption text within <CAPTION> and </CAPTION> tags, placed immediately after the opening <TABLE> tag.

The <TD> and <TH> tags can take the align attribute with the left, right or center values to align text or images horizontally within a cell. The valign attribute with values of top, middle or bottom aligns data vertically within cells.

These same attributes and values can be used in the <TR> tag to set the alignment for a whole row; though any alignment attributes in individual cell tags will override those in the related <TR> tag.