Building 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.

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.

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.

<table>

<tr> ** Row 1 **
<td colspan="5">HEADER</td>
</tr>

<tr> ** Row 2 **
<td rowspan="3">LEFT INDEX</td>
<td colspan="2">TEXT 1</td>
<td>PIC 1</td>
<td>PIC 2</td>
</tr>

<tr> ** Row 3 **
<td>PIC 3</td>
<td colspan="3">TEXT 2</td>
</tr>

<tr> ** Row 4 **
<td colspan="4">TEXT 3</td>
</tr>

</table>

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:-

Just change the % to anything you want - as long as it doesn't add up to more than 100% and it will work a treat.

Also bear in mind that these are percentages of your table width and not the page - so if you have the table width set at 50%, then a column width of 10% in your table - is only 5% of your page.

TIP 10 - Please ditch Netscape 4.7 if you are using it !!

The above TIP 9 does not work in NS 4.7 (but then again very little works correctly in NS4.7).

So if you want to set your column (td) widths so that NS4.7 is satisfied then you can leave tip 9 in place - but you will also have to set each of the 1st row *td's* to <td width="whatever %">.

I would again recommend all NS4.7 (and other ancient old decrepit browsers) to read this article.

(My dictionary defines decrepit as "weak or worn out because of old age" - a perfect definition I think !! )

And finally, finally - If you know any good tips yourself that aren't here then e-mail me and I'll add them - Thanks.

Top Tips on HTML Tables

FINALLY - THE VISUAL STUFF.

If you are interested in GEORDIELAND then visit the site below.