Tables

First quarter	Second quarter	Third quarter	Fourth quarter
10,000 cars sold	20,000 cars sold	30,000 cars sold	You want more??
10,004 cars returned	Wait a minute!	Do we have a problem?	Perhaps I'd better write a different table!

Well, you can do that. But mainly on Web pages we use tables because they let us exactly position columns of text, or text and images, relative to each other or relative to backgrounds. (HTML 4.0 introduced the <MULTICOL> command but only the version 4 browsers understand it and it still doesn't solve the problem of how to exactly position images).

Tables are made up of one or more rows, each of which contains one or more cells. The code for a row is <TR> (i.e. Table Row). The code for a cell is <TD> (i.e. Table Data). Everything actually displayed in the table must be in a cell. There is no such thing as text (or image) in a row but outside a cell. The browser reads and interprets the table from the top row to the bottom, and within each row from left to right. The least you can have is one row containing one cell. You can, but need not, have a caption either above or below the table.

<CAPTION> text </CAPTION> places a caption over your table. You can place it under the table instead of over it by writing <CAPTION align="bottom">.

You don't absolutely need the </TR> since a row is ended either by the next <TR> or by </TABLE>, the end of the table. But tables can be tricky things and writing the </TR> helps you troubleshoot. You should put it at the end of the last row anyhow.

Similarly, you don't really need </TD>, since a cell is ended either by the start of the next cell or the end of the row or the start of the next row. Remember that what ever follows the <TD> command will appear in the cell.

There's also <TH> -- table header. This isn't what it says it is: it's a column header. The idea is that the first row has <TH> instead of <TD> for each cell. The only difference is that the text in the cell is boldface. Not even centered: you have to add the <CENTER> command. A lot of people use <TH> whenever they want the text in the cells to be boldface. It's rarely used as originally intended, probably because very few people actually write tables with column headings like the one above.

Obviously you can see columns as well, but they aren't defined as such. Until HTML 4, you couldn't specify something (such as a background color or a width) for all the cells in a column, whereas you could for all the cells in a row because a row is a defined entity and a column isn't. However, since the table is always symmetrical, all the cells in a column are the same size as the largest cell in it. Similarly, if you only define 2 cells for one row and the other rows have 3, the table will leave space for the absent cell (at the right-hand side of the row) because the table has to be square or rectangular.

Defining borders and spacing

You can alter the border width, or remove the border altogether, and you can alter the spacing of cells and the margins between cell borders and their contents. You do all this by adding attributes to the basic <TABLE> command:

<TABLE border=number> tells the table how large the border should be, in pixels. border=0 removes the border. Different browsers have different defaults for this: some don't show a border unless you include the border parameter, others show a 2-pixel border unless you specify something else. So if you want a table without a border (as we usually do), don't assume every browser will show it that way just because the one you use does. Include the border=0 attribute..

<TABLE cellspacing=number> defines the amount of space between cells; cellpadding=number defines the space between the border or the edge of the cell and its contents. Both numbers are in pixels.You won't be able to see what part of the "white space" is spacing and what part is padding unless you color your cells a different color from the page background color. When you do that, the cellspacing keeps the page background color whereas the cellpadding, being part of the cell, uses the cell's background color. Play around with them till you get a number that looks nice in your table. 2 or 3 for each is a good place to begin.

<TABLE cellspacing=0 cellpadding=0 border=0> gives you the "tightest" possible table, with no extra space anywhere. If you have text in the cells, it looks terrible. But if you want to align a series of images so that they look like one image (for instance, to fake a navigation bar), this is just what you need.

Aligning a table on the page

Tables use the usual align=left/center/right attribute:
<TABLE align="center"> will center the table. I'd recommend actually writing this:
<CENTER><TABLE align="center">
(your table comes here)
</TABLE> </CENTER>

since older versions of Netscape won't center the table without a <CENTER> command, whereas older versions of MS Internet Explorer refuse to recognise Netscape's <CENTER> command.

Especially useful is the ability to make the table narrower than the page. You can use the regular width=number or width=percentage attribute in the <TABLE> command:

<TABLE width=70%> will produce a table only 70% of the current window size. If you do that, it looks much nicer when centered. You would normally only use a pixel size if the table contained an image; even then, it's much better to specify the width of the cell the image is in as the same in pixels as the image width.I very often use width=90% or 95% to make the table slightly narrower than the page: it looks better, and guarantees that the browser won't produce a horizontal scroll bar when displaying the table.

Theoretically you can specify table height but there's not much point in doing it.

Of course you usually use most of the attributes in defining a table, so your <TABLE> command can be pretty long. Here's a typical one:

Defining parameters for cell contents

You can use align=left/right/center in cells too.
<TD align="center"> willl center the cell contents.

One of the annoying things about tables is that you have to define every cell individually: if you want centered, boldfaced text with the Arial font in your table, every single cell has to look like this:

Of course you can cut-and-paste it but it's still a hassle. A WYSIWYG editor like FrontPage helps a lot here by letting you select all the cells once the table is written, and format them all.

The bgcolor=colorcode attribute that we learnt in connection with the <BODY> tag, to define a page's background color, works here too. You can define the color of a cell, a row or the whole table. The most specific definition takes precedence. For example:

This cell is defined as aqua	This cell is not defined but the row is defined as white	This cell is defined as red
This line is not defined. The whole table is defined as teal (dark green-turquoise)	This cell is defined as yellow	This cell is defined as silver.

The code for that table is below: remember that in FrontPage and most other editors you choose the colors from a list, you don't have to actually type in the hex codes. Sometimes the editor will write the word for your choice (e.g. bgcolor="white") and sometimes the code (e.g. bgcolor="#FFFFFF").

<table border="2" cellpadding="3" width="90%" bgcolor="#408080">
<tr bgcolor="#FFFFFF">
<td align="center" bgcolor="#00FFFF">This cell is defined as aqua</td>
<td align="center">This cell is not defined but the row is defined as white</td>
<td align="center" bgcolor="#FF0000">This cell is defined as red</td>
</tr>
<tr>
<td align="center"><font color="white">This line is not defined. The
whole table is defined as teal (dark green-turquoise)</font></td>
<td align="center" bgcolor="#FFFF00">This cell is
defined as yellow</td>
<td align="center" bgcolor="#C0C0C0">This cell is
defined as silver.</td>
</tr>
</table>

At least, that's what the code ought to be. FrontPage didn't actually write that. It doesn't allow you to define colors for table rows, and when I edited the HTML code directly to put them in, it insisted on removing them and getting the same effect by defining every cell I had left undefined as the color I'd defined for that row. (It also re-defined as the row color, cells that should have been the table color and I had to re-define them as the default, which was annoying! Perhaps Microsoft will get it right with Version 3??) In the end I used another HTML editor to make sure that what I said would work was also what's in the file.

It doesn't matter which way you do it, but rest assured that defining a row color is standard HTML.

What can you put in a table?

Just about anything you can put in a page. Here are 2 examples. The first is a single-cell table containing an image and a wide border, which gives the effect of a framed image: