Search billions of records on Ancestry.com

Tables
Part 1

Tables are one way of organising your page, by breaking it down into manageable sections. It is a good way to show photos and their accompanying text, and can also be used to create "buttons". However, it doesn't work with very large amounts of text.

Like all tags, they need to be turned on and off. These tags are:
<TABLE>
</TABLE>

In between these tags you will divide your table into rows and cells/columns. The rows are tagged by:
<TR>
</TR>
(<TR> = Table Rows)

and cells (or columns)by:
<TD>
</TD>
(<TD> = Table Data)

now, nest these tags and add some words like A Table, and you will have something like the following:
<TABLE>
<TR>
<TD>A Table</TD>
</TR>
</TABLE>
which should end up looking like this:
A Table

OK - so all it has done is put it at the side of the page just like plain, ordinary text. If we want to change that, we have to add ATTRIBUTES to the tags.
What it needs now is a border around it. To do this "BORDER" is added to the first <TABLE> so you end up with:
<TABLE BORDER=1>
<TR>
<TD>A Table</TD>
</TR>
</TABLE>
which will look like:
A Table

If that border seems a little narrow try using "BORDER=5" and it should look like:
A Table

or you can go for a very large one and use "BORDER=20" to get:
A Table

Now the tables, in these cases, fit neatly around the text as no size has been specified. So, if you want the table to be bigger you need to specify the width, like:
<TABLE BORDER=5 WIDTH=100%>
<TR>
<TD>A Table</TD>
</TR>
</TABLE>
which will look like:

A Table

When you use 100%, it is telling the browser that the table is to take up the full width of the screen. You can play with these percentages to make the width smaller. You can also specify the height of the rows by adding "HEIGHT" to the <TABLE BORDER=5 WIDTH=75%> tag and you end up with:
<TABLE BORDER=5 WIDTH=75% HEIGHT=80>
<TR>
<TD>A Table</TD>
</TR>
</TABLE>
which will look like:
A Table

I know, it is still all squashed up over on the left of the table, so we need to centre the text in the cell by adding "ALIGN=CENTER" to the cell tag <TD> to end up with:
<TABLE BORDER=5 WIDTH=75% HEIGHT=80>
<TR>
<TD ALIGN=CENTER>A Table</TD>
</TR>
</TABLE>
which will look like:
A Table

Experiment with it by changing it to read <TD ALIGN=RIGHT> then <TD ALIGN=LEFT> and see what happens.

You can also specify whether the text appears at the top or the bottom of the cell by adding "VALIGN=TOP" or "VALIGN=BOTTOM" to the cell tag <TD ALIGN=CENTER> which should read:
<TABLE BORDER=5 WIDTH=75% HEIGHT=80>
<TR>
<TD ALIGN=CENTER VALIGN=TOP>A Table</TD>
</TR>
</TABLE>
which will look like:
A Table

Then, when you want it back in the middle, change it to:
<TABLE BORDER=5 WIDTH=75% HEIGHT=80>
<TR>
<TD ALIGN=CENTER VALIGN=MIDDLE>A Table</TD>
</TR>
</TABLE>
which will look like:
A Table

Confused? Well, if you have got this far, congratulations. Now go and get yourself a cup of coffee and when you have calmed down, we will continue.

Back to #htmlhelp page


Created and maintained by Marion McCreadie
Created 11 December 1998
Updated 13 December 1998