Set the table, HTML will be served

HTML is not a tool for designers. You never know how all the different browsers will render your 'art-work'. While one browser might use bold typeface for emphasis, another may well use italics.

And if you have to create a spec sheet or something alike in HTML you're in trouble too. Of course, you could just make a plain ASCII file and include it in <PRE> tags. For surfers who have their browser window set to full screen with a small fontsize on a high resolution monitor, this might all look fine; but the poor souls who have to scroll right to left to right to left to right to left... just because their settings do not match yours? They're hardly going to buy your product if you give them such a hard time getting the information.

Luckily most browsers these days do support tables. (It's a pity my trustworthy old version of Lynx does not.) With tables and a few tricks, you can do quite some magic.

<TABLE>...</TABLE>              table

This is the outer shell of the table. Everything within these tags is part of the table. There are a few options that can be added to the opening <TABLE> tag:

  ALIGN="left|right|center"     alignment of the table

The table can be flushed with the left or right margins or it can be centered.

  BORDER="x"                    border width

x is the width of the border surrounding the table in pixels. BORDER="0" specifies no border, which can be conveniently used to get some alignments of text/fields done without making it obvious to the surfer, that in fact everything is within a table.

  CELLPADDING="x"               padding within cells

x is the number of pixels that will be left blank between text in a cell and the cellborder.

  CELLSPACING="x"               space between cells

x is the number of pixels individual cells will be put apart from each other.

  BGCOLOR="#rrggbb"             background colour for the whole table

Starting with version 2.0 of IE (Internet Explorer) and 3.0 of NS (Netscape Navigator), you can set a background colour for tables. The #rrggbb value is the colourcode (RedGreenBlue) in hexadecimal for the colour.

Everything what follows now, is used within the <TABLE> and </TABLE> tags.

<CAPTION>...</CAPTION>          title for the table

This tag lets you display a title for the table. It is usually displayed at the top, but including ALIGN="bottom" in the opening tag, it can also be displayed at the bottom.

<TR>...</TR>                    table row

This defines one row of the table. Individual cells of the row are contained in <TD></TD> and <TH></TH> tags, which are enclosed by <TR></TR> tags. A couple of options can be used within the opening tag:

  ALIGN="left|right|center"     horizontal alignment of text in the cells

Text in cells of this row will be aligned right, left or centered.

  VALIGN="top|bottom|middle"    vertical alignment of text in the cells

Text in cells of this row will be aligned with the top, bottom or centre of the cell.

  BGCOLOR="#rrggbb"             background colour for this row

As for the whole table, NS3+ and IE2+ can be instructed to use a specific background colour for one row. This setting overrides the BGCOLOR in the <TABLE> tag.

Everything following is enclosed in <TR> and </TR> tags, whereas you can use several <TD></TD> or <TH></TH> pairs per <TR></TR> pair.

<TH>...</TH>                    column headers

The <TH>...</TH> (Header) is basically the same as the <TD>...</TD> (Data) tag and also used the same way (including options), but the cell contents are displayed in a different font from the Data.

<TD>...</TD>                    data cell

Finally we come to the individual data cells. As already mentioned, this tag is located within <TR> and </TR> (which in turn is between <TABLE> and </TABLE>). You can have any number of cells in one row, but you should make sure that all the rows in the table have the same number of cells. Possible options are:

  ALIGN="left|right|center"     horizontal alignment of text in this cell

This option has the same function as the ALIGN option in the <TR> tag, but it is only valid for the current cell, overriding any other settings.

  VALIGN="top|bottom|middle"    vertical alignment of text in this cell

Also this one has the same function as the equivalent option in the <TR> tag, but valid only for the current cell, overriding any previous settings.

  BGCOLOR="#rrggbb"             background colour for this cell

rrggbb specify the background colour for the current cell

  NOWRAP                        disable automatic wordwrap

Usually cell contents are automatically wrapped as necessary. NOWRAP disables this behaviour for the current cell.

  ROWSPAN="x"                   number of rows spanned by this cell

By default, one cell spans only one row. However, in tables it is often necessary, that some kind of title be placed in the leftmost column which is valid for several rows. With ROWSPAN you can specify for how many rows this cell should be used. In the next x rows (<TR></TR>) you mustn't add a <TD></TD> tag for this spanned one.

  COLSPAN="x"                   number of columns spanned by this cell

As you sometimes may need to use a cell for several rows, it can also be possible that you need to have a cell span several columns. That's what COLSPAN is used for. x is simply the number of columns to span. And don't forget, for each additional column occupied by the spanned cell, you need to drop one <TD></TD> pair from the row.

Confused? No wonder. Up to now everything has been dry theory and the whole topic is not too easy because the tags are all nested in each other. If you read this online or have a browser right near you, I'd recommend to now quickly take a look at http://www.pinboard.com/html/aj710_1.html, which is a resume, making extensive use of tables. To make it easier to understand how tables have been set up, the border and individual cells are visible. At http://www.pinboard.com/html/aj710_2.html the same resume can be found as it probably would be published; without borders.

This table can be viewed at various window sizes. It will look ok independent of whether you have your browser set to use the whole screen or only half of it.

A very useful 'layout' trick has been used in this CV. Titles like Name, Address, Phone, should be separated by a small space from the actual data. How to do this? CELLPADDING would cause ugly empty space to the left and right of the whole table when viewed without borders. CELLSPACING, on the other hand, causes the rows to be separated too, so the whole multiple-row table does not look fine.

The chosen solution was to add empty columns where necessary. Simply adding <TD>     </TD> does not work, since multiple spaces are not displayed as multiple spaces. So instead of normal space characters, NonBreakingSPace has been used:

    <TD>&nbsp;&nbsp;&nbsp;</TD>

Tables are a very powerful tool and there are lots of possibilities and tricks. For example it is also possible to use tables within tables etc. It should be no problem to fill a whole booklet with information on using tables.

This here is only a short introduction and not even all the options for the tags have been mentioned. Take it as a foundation on which you can build. Try and practice (on your own harddisk or even better, use PINBOARD's HomePage Hosting Service, available at a very reasonable rate).

For the ones of you who do not yet have a browser, a small, very simple example (would be displayed slightly different than drawn here when actually viewed with a browser):

                 --------------------------------------------
                |    Name       |    age      |    points    |
                |---------------|-------------|--------------|
                |    Claus      |     12      |      49      |
                |---------------|-------------|--------------|
                |    Mario      |     13      |      53      |
                |---------------|-------------|--------------|
                |    Sven       |     12      |      47      |
                 --------------------------------------------

   <TABLE BORDER="5">
            <TR><TH> Name  </TH> <TH>age </TH> <TH>points</TH></TR>
            <TR><TD> Claus </TD> <TD> 12 </TD> <TD>  49  </TD></TR>
            <TR><TD> Mario </TD> <TD> 13 </TD> <TD>  53  </TD></TR>
            <TR><TD> Sven  </TD> <TD> 12 </TD> <TD>  47  </TD></TR>
   </TABLE>

I now move on to a different table; it's already late, but I still didn't have dinner. See ya later!

© Algorithmica Japonica Copyright Notice: Copyright of material rests with the individual author. Articles may be reprinted by other user groups if the author and original publication are credited. Any other reproduction or use of material herein is prohibited without prior written permission from TPC. The mention of names of products without indication of Trademark or Registered Trademark status in no way implies that these products are not so protected by law.