DESIGNING YOUR OWN WEBSITE

Vicky Vickers

PART NINE: TABLES
The first time I had to produce a table, I approached the task with trepidation. I thought it would be very difficult. However, I soon learned that is not so. Like a lot of HTML tags, those for tables are mostly intuitive, the main tags follow:

<TABLE> </TABLE> Begin and end table
<TR> </TR> Begin and end table row
<TD> </TD> Begin and end a data cell

The TR stands for Table Row and the TD stands for Table Data. Simple isn't it? So if you want to produce a table on a web page which looks something like this.

Food itemTypeDescription
OrangesTree FruitRound & orange
ApplesTree FruitRound & Red or Green
PotatoesRoot VegetableRound & Brown
CarrotsRoot VegetableElongated & Orange

You would would write it like this:

<TABLE>
<TR><TD><B>Food item</B></TD> <TD><B>Type</B></TD> <TD><B>Description</B></TD></TR>
<TR><TD>Oranges</TD> <TD>Tree Fruit</TD> <TD>Round & orange</TD></TR>
<TR><TD>Apples</TD> <TD>Tree Fruit</TD> <TD>Round & Red or Green</TD></TR>
<TR><TD>Potatoes</TD> <TD>Root Vegetable</TD> <TD>Round & Brown</TD></TR>
<TR><TD>Carrots</TD> <TD>Root Vegetable</TD> <TD>Elongated & Orange</TD></TR>
</TABLE>

This will keep each row in line. Notice that you can use other tags inside the table data tags, including tags which link to another page or another site.

If you would like to have a border around the table you write the beginning table tag like this:

<TABLE BORDER=10>

So your table would now look like this:

Food itemTypeDescription
OrangesTree FruitRound & orange
ApplesTree FruitRound & Red or Green
PotatoesRoot VegetableRound & Brown
CarrotsRoot VegetableElongated & Orange

Of course you can define the size to as many or few pixels as you wish, however the default for lines between the rows is one pixel. Don't get carried away now, 50 pixels would be overkill.

A couple of other tags which go in the beginning table tag and use pixel size are:

CELLSPACING Defines the size of the lines between the rows
CELLPADDING Places a space around the text in all the cells.

You can also flow text around a table, as if it was a graphic, by including the following in your beginning table tag:

WIDTH=50% ALIGN=LEFT

If you put this all together, you could have a beginning table tag which looks like this:

<TABLE BORDER=10 CELLSPACING=5 CELLPADDING=5 WIDTH=50% ALIGN=LEFT>

So your table would now look like this (notice that the tip section from the end of the article has moved up beside the table):

Food itemTypeDescription
OrangesTree FruitRound & orange
ApplesTree FruitRound & Red or Green
PotatoesRoot VegetableRound & Brown
CarrotsRoot VegetableElongated & Orange

TIP
You can use a table, with only one data cell, to create a picture frame effect around a group of words or a picture, just by setting the "BORDER=" to the width you wish. Acknowledgements
This article was published in the November 1996 issue of the Victoria Macintosh Users Group's monthly newsletter "MACtalk" in Vicky's monthly article "VMUG On-Line" and in the Fall 1996 issue of the Web Enthusiasts Association of Victoria's quarterly on-line newsletter.

Vicky Vickers is the owner of Word Crunchers, Etc. which specializes in website design and HTML training. She is a past-president (1994-6) and former webmaster (1995-8) of Victoria Macintosh Users Group (VMUG). She also founded and was the first president (1996) of the Web Enthusiasts Association of Victoria (WEAV).

All rights reserved. For commercial purposes, no part of this page may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopy, recording, Internet, or any information storage and retrieval system, without the express permission in writing from the author.

Return to Library Index


Call me today at 250-595-6593 to discuss your website design
or e-mail me at vicky@crunchers.bc.ca

Vicky Vickers, Word Crunchers, Etc.
3290 Shelley Street, Victoria, BC, V8P 4A5
Fax: 250-595-7384 (call first)


Copyright 2000 by Word Crunchers, Etc. ([an error occurred while processing this directive])