Set the table, HTML will be served
by Kurt Keller
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.
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
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
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>
<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
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
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
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:
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
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
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 |
<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>
I now move on to a different table; it's already late, but I still
didn't have dinner. See ya later!
Copyright PINBOARD 1996
© 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.
The Newsletter of the
Tokyo PC Users Group
Tokyo PC Users Group,
Post Office Box 103,
Shibuya-Ku, Tokyo 150-8691, JAPAN