Multicolumn Layouts and Web Grids:

Jorge Blanco
Webmaster

Other articles written by this author

Related Articles

+ Build your own website from scratch
+ Building a template file

Related Links

Little Boxes
W3Schools HTML
W3Schools CSS

Multicolumn Layouts and Web Grids.
By Jorge Blanco

5. The table approach.

The table approach has become an ancient method for designing layouts, and although some webmasters still rely on it for their work, it has become overpowered by the newer, more flexible ones. Tables are what many people refer to as 'old school'. But they do have a point there; tables emerged as the logical way to order ideas into rows and columns. And as it was stated before, a web grid is nothing more than the subdivision of a web page into rows and columns; therefore, the table approach might be the most straightforward process that will be discussed here.

Before explaining the table properties that make them suitable for this method, let's first take a quick review on the code and tags that apply to tables.

First of all, the <table> ... </table> tags, without them there is no table. Properties set here affect the whole table, but they are overridden by local properties deeper into the table hierarchy.

Second, the <tr> ... </tr> tags, they come right after the starting table tags and they define a table row It is important to note that table rows are defined first and the columns are defined implicitly by the number of cells to be added to the row. As stated above, properties set here apply to the whole table row and they override the properties set in the table tags.

Next there are two possible tags to use, <td>...</td> or <th>...</th>. What's the difference? Mostly formatting, but as their name implies, one is for table headlines and the other is for table data. They both define a table cell though. It is important to acknowledge that if you want to have 3 columns, you must have 3 table data or headline definitions per row.

Table Layout:

The above code defines a common 3 x 3 table with the top row and left column being headlines.

Now let's cut to the chase, the objective is to build a layout design using tables, so here it is. Expanding from the above example, we replace all headlines for simpler data cells

Let's explain the additions, first, the table cell has the following properties defined: Cell Padding and Cell Spacing to 0, this prevents the cells from being rendered with any extra space. The width can be set either at 100% or at any other measure that suits your needs. The background color is a personal choice, change it as you see fit.

Then, on the first row, you see that the left corner has a BACKGROUND image, this is important since it is not an embedded image but it is the cell's background. This way less distortion happens when rendering the table. The title banner is put in the same way.

The second row is a little easier to explain since there is only an unordered list that serves as a navigation menu. You can change it and adapt it to your needs, it doesn't have to be an unordered list; it can be a set of images or even a Flash file (.swf).

The final row has another way to embed images, in this way you can create hyperlinks. The other piece of content is just a simple example of the legal stuff that you should always include in your pages.

Now there are a few extra points to be explained, first, there are two properties that weren't explained above, this are rowspan and colspan, for example, if you want the headline to be just a single cell, without affecting the layout of the other rows, you can put:

<td background="path/to/your/banner.gif" width="600px" height="100px" colspan="3">&nbsp;</td> <!-- Top, here we put the title banner-->

That way, the center cell occupies the 3 columns, of course you need to erase the other two; otherwise you'll end up with 5 columns.

The other point is that even if you use tables, CSS can really help you out, just define the table cells with an id and then use CSS to properly format them. You have to be advised that some table properties are not yet supported by CSS and you have to define them directly in the cell's code.

<td id=myCell">Data</td>

In the CSS you put:

#myCell{
border: groove darkred 3px
/* Any other piece of CSS you want to add*/
}

So that's about it for the table approach. It's still a good method for simple, common web grid layouts, but you will see later that it may come out short when you develop more complex designs. Next we go on to the following method, so read on.

<Previous Index Next>