Create Table Layouts II

Let us continue to create table layouts in this lesson. If you need to brush up the basics on table layouts, then I would suggest that you goto the previous lesson and read through it again.

Have you ever gone to a website and had it reload the page two or three times? You scroll down the page a little, try to start reading, and then the whole thing reloads, the table jumps around, and you find yourself back at the beginning?

Chances are good that this happened because the site designer used tables to create his layout (good) but did not set specific heights and widths for all the images used in the table (dumb). What happens is you download the table, the browser doesn't realize that the images inside the cells are larger than the cells, and then when the image is downloaded after the table, it's forced to resize the table in order to accommodate the new graphic. If you're using nested tables in the layout, the problem is even worse.

There's a simple solution to this: always use the height and width tags when you add an image to your web page. It doesn't hurt anything, and though you may have to look up the actual size in a graphics program, it's worth the few seconds it takes in saved trouble for your future customers:

<IMG SRC="image.jpg" WIDTH="250" HEIGHT="250">

Simply replace the listed width and height with the actual width and height for your image.

You'll also need to use the width and height attributes when you're creating your layout table. When you look at your website in different browsers, it will look different depending on the pixels displayed, toolbars on the right or left, resolution, and a few other variables. For this reason, you'll need to use either fixed widths or percentages when defining your column widths.

Fixed widths give a size in pixels you wish your column to adhere to:

<TR Width=”100”>

Percentage widths give you a size in percentages, based on the width of the table, that your column will adhere to as well:

<TR Width=”10%”>

It is possible to mix these, so that you have a 75 pixel first column, a 100 pixel last column, and a middle column of 80%, though this is not really good form. In most 3-column layouts, the middle column just leaves out the width value; this way, the remaining space in the 100% table will go to that column. More frequently, all three columns are given a value, with the webmaster assuming that the page is based on an 800-pixel-wide screen.

One more table tag that wasn't covered earlier: the <th></th> tag creates a table header row. There is little change in a web page, but if you print out the table, denoting a table header will cause that header to print on every page, which makes your table easier to read.

Try this as an exercise: Set up a three-column table as your page layout. Experiment with different widths on the first and last column, and observe what that does to the middle column. Use both pixel widths and percent widths.

I hope you have now become familiar with the methods to create table layouts using HTML.To become an expert, you need to practice. And the best way to practice is to try and create websites using Hyper Text Markup Language or, simply, HTML.