Page Layout with Tables

**Markdidj** · Jan 17, 2004 08:15

I thought I'd create my own thread on the subject of using tables for full page layouts.

here's my example

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Tables with CSS for layout</title>
<META http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {padding:0px;margin:0px}
thead { height:auto;background:yellow;margin:0px }
.ltd { width:100px;background:red; }
.mtd { width:auto;background:green; }
.rtd { width:100px;background:blue; }
tfoot { height:auto; background:purple;color:white }
td { padding:0px;border:0px;margin:0px }
table { height:100% }
</style>
</head>
<body>
<table cellspacing="0">
<thead><tr><td colspan=3><h1>Header</h1></td></tr></thead>
<tfoot><tr><td colspan=3>footer</td></tr></tfoot>
<tbody>
<tr>
	<td class="ltd">left content left content left content left content left content left content left content </td>
	<td class="mtd">middle content middle content middle content middle content middle content
middle content middle content middle content middle content middle content
middle content middle content middle content middle content middle contentmiddle content middle content middle content middle content middle content
middle content middle content middle content middle content middle content
middle content middle content middle content middle content middle contentmiddle content middle content middle content middle content middle content
</td>
<td class="rtd">right content right content right content right content</td>
</tr>
</tbody>
</table>
</body>

The above code gives a full page table. If the DOCTYPE is changed, it may not render it in as a full page, but with with the one here it will.

It is html and css validated.

For SEO, you may want to create a common footer in an external js file, as the <tfoot> must go between the <thead> and <tbody>
Otherwise search engines will probably pick up just links ( that's what most people put in their footers ) before the content, but SE's prefer to find links written within text.

so a good way of using this script is to also use the following.

Code:

<tfoot><tr><td colspan=3><script type="text/javascript" src="commonFooter.js"></script></td></tr></tfoot>

remembering to allways put it between your thead and tbody tags.

As tables render well when text size in changed within the browser, the objects within each <td> can be applied with widths of 100%. Using this method pictures and menus will render well when text size is increased.

**r937** · Jan 17, 2004 15:14

by writing your footer links with javascript, you are effectively hiding them not only from search engines (and thus preventing them from following links, with all that this implies) but also from a portion of your audience which have javascript off

using tables for layout is so contradictory to what the w3.org is trying to accomplish, i'm surprised there would be any desire to validate -- i mean, what would be the reason? why waste your time?

throw out the thead, tbody, tfoot tags, you don't need them

**Markdidj** · Jan 17, 2004 17:11

I use javascript menus as another form of includes. Better than some as it saves your server work, as it loads from the cache rather than the server.

I only have a small bandwidth, and small online memory space, so for me js menus are ideal. As for search engines, most people have a sitemap, whether they use js includes or otherwise.

Any link only menus don't have much affect on your search engine indexing anyway, apart from showing them the rest of your site. The links contained in sentances count far much more, which, if well done, should be in your sentances in the body of your site.

Just make sure the site can be navigated with js on or off, that's all that matters, IMO.

I personally think that if something looks the same in most browsers, then it should become a standard. It looks and works better than any layout I have seen......

I know I will be using it in my next site. It is the best for accessibility, and that is going to be a big in my next site. ( not in current site as I rely on windows components which work in pixels )

I agree you don't need the thead,tbody or tfoot, but I think it adds neatness to your coding for not many more characters. ( just makes each part easy to find and identify ). It also saves using classes.

**jamesxv7** · Feb 27, 2004 14:12

Nice solution, but I think that without tables is more better. Fastest download and less code

**lo0ol** · Feb 27, 2004 14:21

Originally Posted by Markdidj

Any link only menus don't have much affect on your search engine indexing anyway, apart from showing them the rest of your site. The links contained in sentances count far much more, which, if well done, should be in your sentances in the body of your site.

A link is a link is a link.

**r937** · Feb 27, 2004 14:26

Originally Posted by lo0ol

A link is a link is a link.

sorry, disagree

<a href="http://example.com/foo.html">this</a>
is a context-free link, which does nothing the bolster
the target page's standing in search engines

i guess the worst offender of all is
<a href="http://example.com/foo.html">click here</a>

a fantastic resource is
<a href="http://example.com/foo.html">The Wonderful World of Foo</a>
because it has meaningful link text

**lo0ol** · Feb 27, 2004 14:29

"This" and "Click Here" won't be found on a menu. Most likely your anchor will be keyword-loaded anyway.

There's still no reason to alienate a small chunk of your visitors by doing a JS-include. Nobody navigates with inner links. A site without a menu at all isn't very user-friendly.

User Tag List

Thread: Page Layout with Tables

Thread Tools

Display

Page Layout with Tables

Bookmarks

Bookmarks

Posting Permissions