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.

Now, some people still make layouts like that. In fact, many people do. I'd even be bold enough to say that the majority of people make layouts like that. Just to take a well-known example, Serebii makes layouts like that. Hey, since he does it, it must be all right! Right?

No. To prove my point, I have taken the source code both from Serebii.net and from The Cave of Dragonflies and removed all tags irrelevant to the basic page structure, while keeping all attributes on the remaining tags. Let's first look at The Cave of Dragonflies. Isn't that neat and tidy? However, then we look at Serebii's HTML. Look at how much more space that takes up and how many tacky attributes have been stuck on everything, making the code extremely unreadable and bloated.

I should emphasize that I'm not using Serebii.net as an example out of spite or to attack or make fun of Serebii. I simply picked a well-known site to demonstrate my point about how widespread table layouts are.

But, I hear you say, what's wrong with table layouts in themselves? 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. There are several reasons tables are not a good idea for structuring pages, which I will briefly detail here if you are not convinced yet.

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 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
NameType 1Type 2
BulbasaurGrassPoison
IvysaurGrassPoison
VenusaurGrassPoison
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 August 12 2016 at 22:34 GMT