HTML Guide

Lesson 6: Layouts Part 1 - Markup

Back in the old days of the web, people created layouts with tables and presentational attributes. They would be marked up somewhat like this:

<table width="779" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td colspan="3" bgcolor="#FFFFFF" width="779">
Header here
</td>
</tr>
<tr>
<td bgcolor="#FF0000" width="150" valign="top">
Left menu here
</td>
<td bgcolor="#00FF00" width="479" valign="top">
Content here
</td>
<td bgcolor="#0000FF" width="150" valign="top">
Right menu here
</td>
</tr>
<tr>
<td colspan="3" bgcolor="#000000" width="779">
Footer here
</td>
</tr>
</table>

This, I should emphasize, is an example of bad code. Do NOT use it.

But, I hear you say, what's wrong with that in itself? Surely the presentation can be put into the CSS while retaining the table structure? Why shouldn't you use tables? They do structure it into a columned layout, don't they? Isn't that what we're going for?

Well, no. Even if you want the page to sort of look like a table, you're going to want to achieve that using div tags and CSS. There are several reasons tables are not a good idea for structuring pages:

Fixed source ordering.

No matter what, your header will load first, then the left column, then the middle column, then the right column and finally the footer. No flexibility at all. Meanwhile, a div layout like mine can have the content load first if that's what you want.

Slower, messier loading.

Although with faster Internet connections loading times have become less and less of an issue, I still often find myself drumming my fingers while a messy table layout is loading. While the difference in actual loading time is perhaps trivial, it is again the source ordering that kicks in (while a table layout will perhaps have a humongous menu loading for a few seconds, a source-ordered div layout will at least load the content you were trying to access almost immediately while rather making you wait for the less important menus to load), and additionally, in a div layout you can start reading the content as soon as it appears, while a table layout will tend to look messed up before it finishes loading and the page will "jump" as new columns and items load, disrupting your reading. (Well, depending on your browser; the alternative is that the browser doesn't display the table at all until the entire table can be loaded, which is obviously not much better.)

Misuse of the table element.

The table element is made to hold tabular data, not layouts. Structuring your page like that implies a relationship between the left column, middle column and right column parallel to the relationship shown in, say, this table here:

Pokémon data
Name	Type 1	Type 2
Bulbasaur	Grass	Poison
Ivysaur	Grass	Poison
Venusaur	Grass	Poison

Obviously, this is not the case with layouts, and therefore it is incorrect to use the table element in this way. Kind of like if you randomly decided to use the ul element for paragraphs instead of the p element; you theoretically could, since with CSS you can style a ul to look exactly like a p, but what the ul element means is that what is contained within it is a list, and thus that is what you should use it for. This is referred to as the semantic meaning of an HTML element.

Bulkier, less readable source code.

In general, the table layout just takes up much more space in your HTML files while the div layout is all lean and small. It's easier for you to edit a page that doesn't have random table tags all over the place.

Less flexibility.

See my style switcher? See how easily I can move the menus wherever I want and format them however I want without editing the HTML? Good luck doing that with tables. Even if you're not using a style switcher, it's so much easier if you only need to edit the CSS file to change your layout completely, and maybe minorly the HTML if you absolutely have to, rather than dig around the table structure to change everything.

I hope I have convinced you you should use a div/CSS-based layout rather than a table-based one. But then of course you ask, "How do I make a CSS layout?"

The first thing you need to do is mark up your code. In most cases, the basic idea will be to use the following:

• A header to hold the site logo and name and perhaps something more.
• A container below the header which contains whatever column structure you may be planning to have.
• A footer at the bottom, usually containing copyright information.

People sometimes ditch the header or footer or put them essentially inside the container, but this is the most common basic idea and I'll stick with that. The simplest way to mark this up is extremely straightforward:

<div id="header">
Insert header here
</div>
<div id="container">
Insert column divs here, in the order in which they should load
</div>
<div id="footer">
Insert footer here
</div>

Yup, that's all there is to it. You may need to add more divs for styling purposes, but the basic structure is just that. Just make a new HTML file (if you forgot how, check back at part one of this guide) and for the content, insert that. For the example, I'll assume you're going to have three columns inside the container, although for you it might of course be different. Now you may have a page that looks something like this, and that is the basic structure we were going for. Not very impressive, eh?

Now you have two choices for styling your layout, which will be covered in the next two sections of this HTML guide: absolute positioning and floating.

Previous lesson - Next lesson

Page last modified April 11 2023 at 23:29 UTC

Comments

No comments on this page as of yet.

Post comment

Name

E-mail

Website address

Website name

Comments

Please type the name of the above Pokémon into this box: Fun fact: The above sprite has a 1/8192 chance of being shiny. Feel free to brag if you get one.