Creating Table Layouts I

The most common use for tables in HTML today is in creating table layouts, either partial or complete page layouts. Use your browser to navigate to your favorite website. Now in your toolbar, select View | View Source (or simply Source, in some browsers). This will show you the code underlying the page you have open right now.

Chances are very good that you'll see table coding in there right after the body. Here's why.

HTML coding is a very fluid formatting system. It is designed to work on many different screen sizes and many different computer screens, with different browsers and system setups. If you don't tell it that a specific element (that's a picture, text, video, or anything else making up your content) needs to stay in a specific place, it will allow that element to flow wherever it must in order to fit it on the visible screen.

That means in order to make your elements stay in position, you must use a system with static numbers to make it stay there.

Tables are the most effective way to do this. They work like boxes. If you pulled all the contents of your kitchen cabinets and piled them on the floor, they'd roll and slide wherever they wanted; it would be almost impossible to organize them. If you put these contents into a box, or a series of boxes, they would stay put.

How Designers Create Table Layouts

When you look at creating a table layout for your screen, you'll notice several things: first, you tend to look at the top first, not the bottom. You also tend to look at the center of the screen more often than the left, and the left more often than the right.

This gives you natural divisions for your layout elements. You have a top and bottom, and a right, middle, and left. The middle is the largest area.

At the bottoms of pages, you'll notice that designers include several other elements: images denoting awards or other credentials, navigation areas, a copyright, a link to their design site, etc. You can picture this area as being like the credits for a movie. It, too, needs its own section.

Now you can easily see the most common, and most usable, table layout: three rows, three columns. The center cell is the largest, and contains the bulk of your content. 90% of the time, this is the basic layout, with some modifications, web page designers use.

Making Tables Function As Layouts

This is the harder part. Tables used to lay out your screen elements generally have the following qualities:

  • No borders
  • Columns set to percentage, not fixed, widths
  • No bgcolor set
  • Cellpadding used to separate elements

In codes, this means you have something like this:

<table style="width: 100%; text-align: left;" border="0" cellpadding="10" cellspacing="0">

This tells the browser your table should:

  • Extend all the way across the visible screen
  • Have text aligned on the left side as a default (you can reset this in individual cells)
  • Have NO border lines – so it's an invisible table
  • Have 10 pixels between each cell

Pretty simple, right?

Assignment: Create a page layout for yourself using a table. Have the cells in the top row set to colspan=”3”. Have the cells in the bottom row set to colspan=”3”.

Put some elements in – a header for your top row (use a wide picture or copy something online just for practice – do this by right-clicking an image in your browser and selecting “Save image”), text or pictures in the center three cells, and a copyright in the bottom. You'll notice pretty quickly that you need to change alignments and other things.

You will also notice that your elements all stay exactly where you put them, with one exception: images will shove everything aside so that they can fit properly. This will be addressed in the next tutorial, for the way tables treat images is a critically important part of designing web pages.

Hope the first part of creating table layouts has been an interesting one. Let us now goto the next part of this tutorial.