Tables
Producing a decent layout for your web page was, until
the use of tables, a hopeless affair. No doubt within the
next few months the developments that are curently taking
place will make the use of tables irrelevant for page
design. The technology for good design is almost at an
acceptable level. However, being able to create good design
is one thing. The real question is: can the viewers see it?
The answer is, yes, if they have the most up-to-date
version of either Netscape Navigator or Internet Explorer.
If they are using version 3.x, or maybe are still using
version 2.x because of its small footprint (i.e., those with
ancient computers sporting small amounts of RAM can actually
open the program) then the new developments are not going to
display on their machines.
It has been estimated from hit counts on various sites
that the take-up of the version 4 browsers has reached
approximately 60% of users. That is a respectable figure,
but still represents only just over half of all users. If
only just over half of your viewers can see your latest
tricks, you had better think carefully about using them.
For the moment it would be wise to use tables for placing
text and graphics where you want them on your page. But you
can gradually start to introduce more modern methods of
placing items on the page. If you do this you need to think
about using
javascripts to find out which browser is being used, and
if it is a version 3.x browser, deliver pages which have
been designed using tables.
To place items right aligned on a page, or create a
consistent space between separated elements we need to
create tables and place our discrete items in cells within
the tables.
Before we get under way let's look at a couple of
problems we need to take into account. Tables have a habit
of behaving strangely and we need to know how to deal with
some of these problems.
First of all, there are two types of measurement you can
apply to your table, each will cause it to display in a
different way. You can set a percentage size (which is the
default in most page creation applications). This is because
you, as a designer, have no idea what size screen your
viewer is using. More exactly, you know that your viewers
are all using different sized screens from 9" up to 24".
Your tables need to look good on all of them.
If you set your table to have a width of 100% it will
fill the nine inch screen. It will also fill the 24 inch
screen. This could make the display look ridiculous on both
screens. If you have 15 inches of text and pictures
scrunched into 9 inches of screen there will be some strange
effects in your design. You will have a great many lines of
text wrapped around that you hadn't bargained for when you
designed your page. This will leave your pictures (which
have loaded in the size indicated) pushing everything out of
kilter. Your text will now stretch off the bottom of the
screen where it has been squeezed by the pictures. The
opposite will happen on a 24" screen. Your text will now be
strung out across the page in a thin line.
All of this is very unsatisfactory. Initially it would be
better to design your tables with fixed overall widths. This
leaves your small screen viewers needing to scroll, but at
least they see what you designed. The big screen merchants
can handle re-sizing their browser window.
To use a fixed width, choose to define the size of your
table in pixels. Try to keep the table within 500 pixels in
width. It can be as deep as you like.
At this stage it cannot be stressed too much that you
should try out various designs first using percentages, then
pixels, and displaying your work in your browser with the
window set to different sizes. See if you like what you see.
See what happens to your design in each window size.
Another problem with tables is that they, and their
contents, load as one item. This means that what I said
above about a table being as deep as you like is not exactly
true. The chapters of this book get rather long, and
sometimes I add in screen shots. If my text runs to about
six or seven screens, with three or four images, all of that
must load onto your computer before you see anything at all
if I have put it all in one table.
Some of these chapters would take 30 seconds or more to
load if I put everything into one table, which is why I put
the title of the longer chapters into a separate table, and
then split up the rest of the material into separate tables,
so that the viewer has something loaded onto the screen
almost immediately.
One should always remember to put a paragraph tag after a
table and before following text, otherwise on wide screens
the following text might continue to display to the right of
the table.
There are more problems, but for the moment, let us
produce something, and meet our problems as they strike.
All decent page creation applications have table creating
facilities. You will probably find that clicking a button on
the toolbar either produces a default sized table, and/or a
dialog box. Certainly this is the case with Netscape
Composer (or Navigator Gold).
The options allow you to state the number of rows and
columns in your table. You can set formatting to allow for
the contents of cells to be right aligned, centered, or left
aligned, and also for them to be top, center, or bottom
aligned. You can set a background color for individual
cells, and even set background images. Thus, you could
create a gallery of pictures merely using a table with thick
borders like picture frames.
You can set your borders to display or not, and give them
values measured in pixels. You can also set your cell
contents to be inset from the edges of the cell by setting a
value, again in pixels, for the cell padding. You can also
set space between cells.
The above options give you quite a lot of control over
the table and its contents. However, once you have created
the formatting of the table you have to fill it with
objects. If you leave cells empty you will find your table
will begin to take on a strange shape, and not display all
the items you have so carefully set.
Remember what happens in your browser window to text with
lots of spaces in it. Those spaces get ignored. The same
happens in table cells. If there is nothing in a cell it
will be collapsed in the browser. There are ways to
circumvent this, and we will come to them shortly.
Meanwhile, don't worry if at first things don't look right
with your table.
We will start with a simple three column, two row table,
and put some text and pictures in it.
