Okay, I'll nail the big one if I may.
Q: I've heard tables for layout purposes are bad. Why is this, and how do I lay out my pages otherwise?
A: First: why?
- Nearly every tag has a meaning. <h1> means the main title of a page, <em> means emphasised text. Correct application of these meanings is extremely advisable practice in today's Web. Why? That's a little more complicated. XML (which XHTML is based on), SGML (which HTML is based on) and therefore their derivatives are all markup languages. This is a special way of describing data — with tags.
Each tag describes the data contained with it. <em> means that the text inside is slightly more important. If we used, say, <cite> to achieve the same presentational effect, we're saying that the data inside was quoted, or cited, from somewhere else, when it's not. In the same way, if we use tables to lay out our page, we are describing this data as tabular. It's not. This undermines the very purpose of HTML, XHTML, or whatever markup language we're using.
- Second reason: tables are presentational. XML, which is really the new markup standard, dictates that all presentation should be removed from style! This means not using presentational tags like <b> or <font> in our XHTML, but instead using CSS to achieve this presentation. This makes sense — our code becomes lighter, the same presentational code can be cached for the entire site meaning faster loading times, and when something like a webpage to braille converter comes along, it won't be confused (how can braille be bold? Chances are you want strong emphasis, <strong>, or you want to make something a header, <h1>, <h2>, <h3> ... <h6>).
Also, if we have an 'inferior' rendering device like a PDA or mobile phone (cell phone), we can present to them the unstyled XHTML, which will be perfectly legible. Tables can screw up a design on such small resolutions.
- Tables bloat your code. Using tables means far bigger file sizes, which means 1) slower loading times for your visiters, 2) larger bandwidth required, and lets face it: bandwidth isn't free. With semantic CSS-based positioning, our file sizes drop huge amounts.
- Search engines love clean code. CSS-based positioning gives us clean-as-you-like code, which inevitably results in higher search engine ratings.
- Maintainability/Updateability: In the future, you may want to make changes to your presentation, but it's much less likely you'll want to change the underlying content. Seperating content from style by CSS and CSS-based positioning makes it so easy to change what the site looks like. Just a single file to change, bypassing complicated and untrustableglobal search and replaces.
Case in point: One magazine, in order to improve its brand, went for a CSS site that allowed them to change their colour scheme, chameleon like, to keep up with the colours that that month's magazine used.
That's basically all the reasons, but I hope you'll find that's enough. Also consider visiting
Why tables for layout are stupid if you're not totally convinced. Absolutely fantastic site.
Next part of the question. What can we do about this? I've mentioned CSS several times in this post already. If you've never heard of it, head right over to
W3Schools and start learning it! It really is very simple.
CSS-based positioning (or CSS-P), involves using
semantically empty tags to act as divisions in our code. We want to mark up our navigation as one part of our page, our banner as another, our main content as a third, and maybe our sidebar (if applicable) as a final part of tha page. However, we are dividing up the page
presentationally, so there's no XHTML tag with a good semantic meaning for this. So instead, we use a tag without a meaning, and the easiest one just happens to be <div>. Here's an example of a template XHTML semantically rich document:
Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
<head>
<title>Semantically Rich Document Example</title>
</head>
<body>
<div id="banner"><h1>Semantically Rich Document Example</h1></div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
[another application of semantics -- our navigation is
really an unordered list, so it should be marked up
as such.]
<div id="content">
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet</p>
<h2>Lorem Ipsum Dolor Sit Amet</h2>
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
<div> can be styled very easily with CSS-P. Lets say we have two divs next to each other, one of which is the main content and the other is the navigation. We want them to reside next to each other. Give each one an applicable id (eg, <div id="nav">) and lets delve into our first bit of CSS:
Code:
div#nav, div#content { float: left }
div#nav { width: 200px; }
div#content { width: 450px; }
The <div>s now have width, and appear next to each other. We can apply more CSS style:
Code:
div#nav, div#content { float: left; border: 1px solid #006 }
div#nav { width: 200px; margin-left: 10px; }
div#content { width: 450px; }
Starting to look a lot prettier already! I won't go into much more detail, I'm not much of a designer, but check out
The CSS Zen Garden for hundreds of awesome CSS demos, and
Holy CSS, Zeldman! for more CSS links than you could shove down your throat sideways.
Hope that helps someone! Any additions, PM me.