Why You Should Use tables - not frames

Tutorial 4

Author: Ian McAllister

Frames were very clever and fashionable at one time, but caused so much trouble that they are hardly ever used. Learn to use tables. They are really versatile. CSS might be better, but not for beginners.

It would be usual at this stage to cover HTML graphics. However I've decided to leave them till later, because they are of secondary importance for profitable web design. Instead I'll show you how to use tables to format the page

Once again, Cascading Style Sheets are better than straight HTML and can be less complicated, but are outside the scope of this tutorial.

Don't be trapped by a 21 inch screen

Have you ever tried to scroll sideways to the end of some text, then given up because you had to scroll back for the start of each row?

That terrible example of web design probably resulted from the web designer working on a 21 inch screen. You don't want to make the same terrible mistake in your web design.

So you must design your page to display the same way for any size of screen.

People prefer book-size line widths

A 21 inch screen is not even the best way to display text.

If you have 1 inch (25 mm) margins on an eight inch (210 mm) sheet of paper, that leaves you with 6 inches (150 mm) of type from a typewriter, with 12 pt type. The six inch type width was just perfect for reading comfort.

If the type had been 10 pt, like in most newspapers, it would have to be in columns, because it is too difficult to read wide lines in the smaller typeface.

Give visitors familiar line widths

What has this to do with web design? Well if you have 16 inches (400 mm) wide text, nobody will want to read it unless you use a much larger font - say 18 pt. But if you used 18 pt letters in a 14 inch screen, it would be very unpleasant to read long paragraphs.

Use a one-celled table

The font size used by most browsers is 12 pt. This means that you should limit your line length to 6 inches, but unless you take special action, you have no control at all over the length of text on the screen.

The answer is to put it inside a table. Give the table only one row and one column - in other words a page - which is defined in terms of pixel width.

Or you can have a margin column and a main column (1 row, two columns) on the page - say 3 inches and 6 inches. This page is an example of a 2 column page with a separate panel added at the top, to please the search engines. Note, the white outside the table gets wider with wider screens, leaving the table the same size.

You can't please everyone

Your screen display is made up of dots called "pixels"

You can't make a universally effective 2-column screen, because there are many older computers that have a screen width of 320 pixels instead of the 640 that is the minimum for modern computers.

If you tried to design for 320 pixel width screens, your six inches text width would drop to three inches in the 640 screen, which would be unpleasant to read.

Design for the majority

My own personal feeling is that most VGA screens have worn out now, so I design for 600 pixel width.

That was written a few years ago. Now I design for 1024 pixels width. In a few months it might be more.

When a visitor with a 320 screen sees my 2-column display, she can scroll over to view the second column, and as the first column has only the "index" it doesn't matter if it is scrolled off the screen. Anybody with a 21 inch screen will still see the text at about six inches width.

So my web design for two columns uses 130 pixels for the left-hand column and a right hand column of 460 pixels with a text width of 450 pixels.

In other words, I use a 2-column table with a 1-column table nested inside the right hand column (leaving margins) to take the text.

Why do you need to learn about tables?

You can just use my templates even though they are tired and out of date, but if you want to have other tables on your page (they would be nested inside one of my tables) you will need to know something about HTML code for tables. Use my three simple templates to learn how tables are used, then find a free template that you like.

Use colours file as an example of a table

Either print out the HTML code for the colors.html file that you got last lesson or open it in a word processor so that you can switch between it and this lesson.

align the table before opening it. The table can be aligned in the usual way. I have chosen <"center"> As you should expect by now, if you look at the end of the first table, you will find </center>

Open the table, and remember to close it

<table> and if you look at the end of the first table you will find
</table> just before the /center tag. Just before? Yes it started inside the "center" tags so must end inside them.

Remember the easy way is to put pairs of tags in at the same time, then you won't forget where they go after you insert everything else between them.

OK, I know, the tag wasn't just <table> It had other things between the angle brackets. But this is the safest way to do it. Insert the start and end tags first, then insert the other information.

In this case the total table width is 480 pixels, (90% might be better than 480 because it varies with the width of the page) there are 4 columns, no border, no rules, no cell padding and no cell spacing.

If you look at the code for the table of special characters in lesson 3 you will see that there is a border=2 statement and you can also have a BGCOLOR="white" statement for the whole table. You can see the code for any HTML page you visit by clicking "View". Choose "page source" from the drop-down menu.

Assembling a table

Now we build up the table, like using building blocks. Each row starts and ends of course. TR stands for table Row
<TR>
</TR>

In between the pairs of table Row tags, you will find pairs of TD tags (table Data) representing each cell along the row.
<TD> </TD><TD> </TD><TD> </TD><TD> </TD>

Look down now to just after the first </TR> end tag to see a more typical row.

You will see values inside the TD tag for width, background colour, and alignment. Some browsers tend to ignore the width data. A later lesson will show how to use invisible pictures to force the width to what you want.

In between the start and end TD tags you will find the characters to be displayed in that cell, in this case the word displayed is "black", to be written in white letters with bold font size 3.

Notice the start and end tags must be correctly nested for font and for Bold (<b> </b>)

That is about all you need to know about basic tables - you just change the values for columns, borders, rules, etc. to suit what you want. Just experiment with different changes. Now we can start to get a little fancy.

Beyond the basics

Look back to the first <tr> </tr> pair now, that we bypassed earlier. One of the values in the TD statement is colspan="4" and if you look at the colour table with your browser, you will see that the text in the first row spans all four columns.

I could if I wanted to, have made the text span only the middle two cells. Just make the first cell blank, then specify colspan="2" and make the last cell blank. COLSPAN starts at the column where you are at the time. There is another similar value called ROWSPAN which does the same going downwards.

You will learn in a later lesson how to use invisible pictures to force the table to show the cell widths you want. You tell the browser that the cell width is ridiculously small, then put in an invisible picture that forces the cell to expand to the width of the picture.

You don't need to know more about tables than this to make a profitable web design, but if you want to get really fancy, just search on "HTML tutorial" and you will find hundreds of sites. Take care - clever HTML code usually drives away your visitors.

Since I wrote the above Cascading Style Sheets have become more popular. They give you much more control even than tables, but CSS is a big subject so though I may add a page about them, you will have to find some other way (borrow a library book?) if you want to learn everything about them.

Follow the link at the foot of this page to get a free CSS template like the one that I'm using for this page.

Click here to learn how to keep your visitors.

Next lesson will be a short one on how to use links, then you will have learned enough, to understand and appreciate the HTML templates in the following lesson..

Next - hyperlinking around the world