Top Tips on HTML Tables

Until such time as all the 'Browser Manufacturers' implement CSS standards properly & consistently
(so everyone can start using 'css' and 'divs' to position stuff on their web pages)
then tables are still most peoples favourite to really position things successfully.

Just a point to remember first. A Table (like HTML itself) was initially developed as a means of displaying
data (text and numbers) - so don't blame tables if sometimes you finding it hard to exactly position
your images - OK.

I'm not going to show you how to create tables themselves - a very good tutorial can be found at
either HTML Cook or the maricopa center. What I really want to
do on this page is give you some 'table-tips' I have have picked up along the way.

TIP 1 - Keep your tables as simple as possible.

Nesting tables 'inside' tables is ok - but keep it to the minimum. You can usually achieve the
same layout effect by using more rows and columns in your main table.

TIP 2 - Keep your tables as short as possible.

Try not to put the WHOLE page inside an all encompassing table. Its better to have a sequence of smaller
tables than one big one.

Reasoning behind TIP 1 & TIP 2

A browsers 1st preference is to encounter an html page just full of paragraphs.

As it 'reads' each paragraph it then displays it on the screen. Left to right and top to
bottom. So your screen visually loads quite quickly - especially the bit in the 800 x 600
viewing area.

The site visitor doesn't really care whats going on below the screen - because they can see the
1st bit appear and can start reading.

But when a browser first 'reads' your web page and encounters a table - before it can visually
'render' the table it needs to sort out the parameters of everything inside the table first,
and only when everything is calculated does it give a visual display.

So if you have big full page tables, or nested Tables (tables within tables), it has to read the
whole of your html page at least a couple of times before it can display it - and this takes time.

TIP 3 - Pen and Paper First.

Always draw a blank table grid out first on a bit of paper. Then plan out on the grid where you want
your bits of data to go. Do you want an index, a header, text & pictures ?? Plot them all onto your
grid and this will then help you decide how many rows you need, how many columns you need and in what
places you need to use 'colspan' or 'rowspan'.

If you don't do this then you are virtually assured to make a real pigs ear of it when you try to
write a big table "on the hoof", as you go along.

Below I have shown how I would plan my initial layout.

So here on the left is my sketch showing:-

(a) My Rows <tr>

(b) My columns <td> and

(c) how I want my data to span the rows and the columns.

I've even coloured it all in so it looks quite pretty !

Then you just create the complete empty table and go through each table row and put the colspans/rowspans
in.
If you have a half decent html editor it will do most of the work for you - even most of the freebies
do it.

TIP 4 - Label the empty 'TD' data cells.

Once you have completed the blank table then label/number the data cells so you can see which
is which when you start filling them up.

I know it sounds a bit 'simple' - but when you start filling the cells up with content, the
page in your html editor expands enormously and its much easier to locate a cell in your editor if
its labeled than if its not.

OK - so we need to build a table that looks like this using the following code

HEADER

LEFT INDEX

TEXT 1

PIC 1

PIC 2

PIC 3

TEXT 2

TEXT 3

TIP 5 - PLEASE NOTE

ROW 1 - You only specify one piece of data because you span all 5 cells
in row 1 with the 1st data.

ROW 2 - You only specify four pieces of data because the second piece spans 2
columns.

ROW 3 - The first piece of data you specify here is actually data-column 2 - because
you spanned all the rows below row 2 with the index column - so that data is already accounted
for.

ROW 4 - Again, the 1st data is actually accounted for by the rowspanned index column
- and the data you input here is spanning 4 columns so thats all you need.

Remember -
If you draw it out on paper 1st -
then create the blank table -
label it -
you can at least see if everything looks right before you start filling the table up.

FINALLY - THE VISUAL STUFF.

TIP 6 - Use "TABLE WIDTH="%" whenever you can.

To declare the size of the table you can do it either in fixed units; eg <table width="700">
where 700 is measured in pixels or you can define it as a percentage (%) of the screen its viewed
in - using (lets say) <table width="100%">.

My personal preference - wherever possible - is to define the table in % terms rather than absolute
terms.

The reason for this is that if you defined a table as having a width of 700 and viewed it in an 800
x 600 screen reslution then it would probably fill the screen and look ok. But view the table in a
1024 x 768 screen resolution and you will find the table pushed way over to the left with a big blank
white space to the right.
The % width table however expands or contracts to fill the screen no matter what size it is - and
this in my view is much better.

TIP 7 - Use Borders to see what you are doing.

The normal border effect you get using "border=1" is quite ugly really and most of the time
you will have set the parameter to border="0". However - while you are building your table
- and especially when you a faulting a table - turn up the volume to border="2" so
you can see what you are doing and what exactly is happening in each data cell.

TIP 8 - Use the Table attribute "SUMMARY".

The table attribute "summary" should be used to describe what is inside the table for the
convenience of non visual site visitors (that means blind people to you and me). So the pretty table
image I showed previously up the page would have a first line code of:-

<table width="100%" summary="Top page table incorporating top header bar, left
side index bar and data cells of text and pictures">

You might not want to be so helpful and only put:-

<table width="100%" summary="4 rows and 5 columns">

If nothing else - its a help to yourself when your trying to remember months later how that particular
table was constructed. Either way you really should put something.

TIP 9 - Setting your table column (td) widths.

The easiest way I know of setting your column widths is to use the following commands on the next
line after your <table> command and before your <tr> command. It goes as
follows:-