Dianne's Anything page - help with writing your webpages : Tables

Using Tables to organise your page

table

No - not THAT sort of Table!!

TABLES can improve the layout and organisation of your pages in a number of ways, but don't use them just because you CAN - they need to be there for a reason! When your page is being viewed, the whole table has to be loaded before any of it shows up on the page so if your whole page is one giant Table this could slow the procedure down considerably, and the casual surfer could well get tired of waiting and move on. If you need to use Tables, try to use several and cut the information into manageable "chunks" which will load one at a time and give the surfer something to look at while the next bit loads!

You can use a table in the conventional way, to organise data into separate compartments in the same way as you would on a word-processor table or database :

NAME	ADDRESS	PHONE
Tony Blair	10 Downing Street London	0700 123456
Philip Mountbatten	Buck House London	0700 654321
I.M.A.Raven	10 The White Tower London	0700 112233

this type of table requires a border to be set in the opening Table tag - you can set border width and (in MIE) colour. (Default colour is grey and is the one you are most likely to see used.) The table above has a border set at 5 and is in the default grey, which doesn't show up very well on a white page!

This one is set with a border width 5 and colour in red - much better, but you lose the 3-D effect you get with a plain border on a coloured backgound (see my index page.)

You will also want to set the Table Width in either pixels or a percentage of the page width, cellspacing -also in pixels, the distance between the cells of the table - usually a small number, and cellpadding, the distance between the sides of the cell and the data within it.
The opening Table tag for the "address book" table shown above is

<TABLE WIDTH="450" BORDER="5" cellspacing="2" cellpadding="10"></B></CENTER>
where all the numbers (sizes in pixels) are variables you can alter to suit yourself - and at the very end of the Table, don't forget the closing tag! </TABLE>

You now have the boundaries of your table set; next you have to start adding data. If you can't easily visualise the layout of your table, you might find it helpful to do a rough sketch on paper first.

The table will be divided into a number of rows, each containing a number of cells. These are denoted by tags for table row - <TR> and table data cells - <TD> (each with their corresponding Close tag.) Think of the TR tags as the ends of each row of cells, and the TD tags at each end of each individual cell. The information in each cell, be it text, image, link etc., is placed between the pair of TD tags:

<CENTER><TABLE BORDER="2"><TR><TD>information here</TD></TR></TABLE></CENTER>

will produce this:

information here

In actual practice you will also want to specify cellspacing and cellpadding too, and possibly table border colour and background, as in the first Table tag example on this page.

You can put a number of sets of data across the width of your table, depending entirely on the width of the table and the width of the cells (or the data you want to put in the cells) - the more cells there are, the smaller they will be.

When you have filled one row of data cells, close that row with a </TR> tag and begin a new one (the next row down) with a new <TR> tag. When you have put in as many rows in your table as you need, close the table with a final </TABLE> tag.

SUMMARY OF HTML FOR BASIC TABLE:
This piece of HTML will produce a simple grid of three rows of four cells, all the same size, with a dark blue border and a pale grey background. To vary the size and layout of the cells, see the next Tables page.

<TABLE WIDTH="600" BORDER="3" BORDERCOLOR="000077" BGCOLOR="eeeeee" CELLSPACING="2" CELLPADDING="5">

<TR><TD width="25%">Row #1, Cell #1</TD><TD width="25%">Cell #2</TD><TD width="25%">Cell #3</TD><TD width="25%">Cell # 4</TD></TR>

<TR><TD>Row #2, Cell #1</TD><TD>Cell #2</TD><TD>Cell #3</TD><TD>Cell # 4</TD></TR>

<TR><TD>Row #3, Cell #1</TD><TD>Cell #2</TD><TD>Cell #3</TD><TD>Cell # 4</TD></TR>

</TABLE>

Like this :

Row #1, Cell #1 Cell #2 Cell #3 Cell # 4

Row #2, Cell #1 Cell #2 Cell #3 Cell # 4

Row #3, Cell #1 Cell #2 Cell #3 Cell # 4

NOTE: it is only necessary to set the cell width on the first row - all the cells beneath will be the same width as the ones above. Cell widths can be set to the actual number of pixels wide or as a percentage of the total width of the Table.

Next Tables page - more complex tables

Back to HTML help pages index

Back to main index and home page

Email me if you want to know more or need help.