Why tables for layout is stupid:

problems defined, solutions offered

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

Go get your boss

Are there any "suits" in the audience? Are your bosses here at Seybold, but attending a different session right now? Go get them. They are the people who need to know how Web standards can save your company money.

Overview: What’s in it for me?

We'll give you an introduction to a way of working that will

• make your pages load faster
• lower your hosting costs
• make your redesigns more efficient and less expensive
• help you maintain visual consistency throughout your sites
• get you better search engine results
• make your sites more accessible to all viewers and user agents
• and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

We'll also talk about how laying out pages with Cascading Style Sheets (CSS) requires a slightly different way of thinking about your content and your markup than you may be used to.

Killer Web Sites: nested tables and spacer GIFs

In the beginning, the Internet was primarily a medium for academics, researchers, and the military to share information. However, it didn't take long for entrepreneurial visionaries to realize that this new medium was ideal for selling everything from fresh produce and dogfood to used cars and streaming sports coverage.

However, as with any medium in its infancy, the early Internet was aesthetically ‘crude’ (and not really all that enticing to consumers) until David Siegel published his landmark book, which offered some brilliant workarounds for the limitations of existing browsers and W3C specs circa 1997. (We're talking Netscape 2 and 3, folks.)

These workarounds were so brilliant, in fact, that they are still the most prevalent method of laying out Web pages today.

The problem with using tables:

• mixes presentational data in with your content.
  • This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit.
  • Bandwidth ain't free.
• This makes redesigns of existing sites and content extremely labor intensive (and expensive).
• It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
• Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.

Salvation is at hand

Modern browsers are much better at rendering Web standards and we don't need to use these archaic methods any more.

Instead of nesting tables within tables and filling empty cells with spacer GIFs, we can use much simpler markup and CSS to lay out beautiful sites that are faster to load, easier to redesign, and more accessible to everyone.

The solution: CSS and structural markup

By using structural markup in our HTML documents and Cascading Style Sheets to lay out our pages, we can keep the actual content of our pages separated from the way they are presented.

This has several advantages over using tables....

Redesigns are easier and less expensive

By removing presentational markup from your pages, redesigns of existing sites and content is much less labor intensive (and much less expensive). To change the layout of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves at all.

For example, check out the CSS Zen Garden, or the style switchers on Eric Meyer’s site. To learn more, see Alternative Style by Paul Sowden.

Bandwidth ain't free

Using Web standards reduces the file sizes of your pages, as users no longer need to download presentational data with each page they visit. The Style sheets that control layout are cached by viewers' browsers.

Reduced file size means faster loads and lower hosting costs.

Hey, these pages all look like each other!

Using Web standards also makes it extremely easy to maintain visual consistency throughout a site. Since pages use the same CSS document for their layout, they are all formatted the same.

This strengthens your brand and makes your site more usable.

Write once, use anywhere, for everyone

Using Web standards makes our pages much more accessible to users with disabilities and to viewers using mobile phones and PDAs to access the Web.

Visitors using screen readers (as well as those with slow connections) do not have to wade through countless table cells and spacers to get at the actual content of our pages.

In other words, separating content from the way it is presented makes your content device-independent.

Google is blind

Speaking of accessibility, minimizing your markup and using header tags properly will also help improve your search engine ranking.

Reducing the ratio of code to content, using keywords in your header tags, and replacing header GIFs with actual text will all help your sites get better search engine results.

You can still use tables if you need to, just don't use so many of them

This will give viewers (and bosses) who are bound and determined to use version 4 browsers until the day they die an acceptable approximation of what the rest of the world is seeing.

A pleasant enough looking table

		Lorem ipsum dolor sit amet, consectetuer adipiscing elit.				Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.
		Suscipit lobortis nisl ut aliquip ex ea commodo consequat.				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. • At vero eros et accumsan et iusto odio dignissim qui blandit • Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
		Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.				Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Epsum factorial non deposit quid pro quo hic escorol. • Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.
		Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.

Take a look beneath the surface

		This could really be done much more simply.				Guess how much markup there is in this little table? 13.7k. There are 17 rows and 9 columns in this thing. And did I mention all of the spacer GIFs?
		There are way too many table cells and spacers in here.				And all of the dotted borders are done with a background attribute on table cells, which won't validate. • A nested table? What for? • To make a bulleted list? You're kidding, right?
		This could all be done with 8 table cells and 4 CSS rules.				Seriously. 8 cells and 4 CSS rules, that’s all it takes. • Oh no, another table masquerading as a bulleted list. • Just mark up your bulleted lists as bulleted lists and let CSS do the rest.
		You need a rule for <table>, one for <td>, one for <ul> and one for <li>.				That’s it. Once you have those you're golden. • That’s better than using 8 more table cells to make a fake bulleted list, which ends up being much less accessible. • Excellent! The last fake bullet.

The code that shows the table structure:

table{ margin:3px; padding:2px; border:solid 2px blue }

td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }

That’s much better

And here’s the CSS Code used to get rid of the bunk markup:

table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }

td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }

ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }

li{ margin-bottom:10px }

Recapping transitional designs

Use margin and padding instead of extra cells and spacer GIFs.

Use link and @import styles. The first for old browsers, the second for modern browsers.

<link href="basic.css" rel="stylesheet" type="text/css">

<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>

Real world examples:

• Santa Cruz Montessori School
• k10k
• Fox Searchlight Pictures

But wait, there’s more:

For more information on transitional design, see chapter one of Eric Meyer on CSS and much of Jeffrey Zeldman’s Designing with Web Standards.

CSS layouts: the future is here

The browsers that the vast majority of viewers are using today have good CSS support. They all have their quirks, but once you get used to them, you can work around them.

Coding CSS is easy. Even for a guy like me who thinks that most JavaScript looks like swear words.

if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {

Every CSS rule has a selector and a declaration. The declaration is made up of a property and a value. Properties that sound like they should be 2 words are hyphenated.

body {margin:0; padding:0}

.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}

#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}

Structural markup: code what you mean, mean what you code

While writing the actual CSS is simple, using CSS to do your layouts requires a slightly different way of thinking than most of us are probably used to.

Rather than thinking about things like "this goes here and this goes here" while we are working on a page or a layout, we need to think about the kinds of information in our page and the structure of that information.

We give the most important headline an <h1> tag; subheads get marked up with <h2> tags, etc.; and paragraphs are paragraphs.

This is what is known as "structural" or "semantic" markup.

Instead of putting your content inside of tables and table cells, wrap it in div elements. Give your div elements an id or a class that is descriptive of their content and/or function, rather than their appearance.

Avoid <b>ed and <br>eakfast markup

Think about why you want something to appear a certain way; what does it mean? Your markup can and should convey meaning, even to someone who cannot see your page. Semantic markup makes our pages more accessible to everyone, including search engines.

When you italicize something, is that because you want to emphasize it, <em>, or because it’s the title of a book, <cite>?

If something is bold, it should probably be marked up as <strong>.

If you want a linebreak after something, chances are it should be marked up as a header element. If it’s not a header, is it part of a class that occurs throughout your site? If that’s the case then use CSS instead of <br>.

.foo {display:block}

To learn more, see Bed and BReakfast markup (B&BR) by Tantek Çelik.

What are nav bars?

Think about it: your navigation is actually an unordered list of links.

Mark them up inside <ul> tags.

• link1
• link2
• link3
• link4
• link5

Horizontal Nav bars

We can use CSS to control how these lists are displayed on our pages.

By using display:inline we can create horizontal nav bars.

Here’s the code used for this nav bar:

#nav1{
margin-top:1em;
margin-bottom:0.5em;
}

#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}

#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}

#nav1 li:first-child{
border:none;
}

Vertical Navbars

Here’s the code for this one:

#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}

#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}

#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}

html>body #nav2 li{
width: auto;
}

#nav2 li:first-child{
border:none
}

For more information, see Mark Newhouse’s article, Taming lists, at A List Apart, and "Styling lists" at the CSS-Discuss wiki .

Things tables do better than CSS

There are certain things that CSS does not do as well as table layouts.

For instance, say you have a black side nav bar that you want to extend the whole height of your content. With a table layout, this is a piece of cake: just give that <td> a black background.

We can do this with CSS, but it requires a different way of thinking.

If we give our nav div a black background, the black will only extend until the nav 'runs out'. On most pages, the content is longer than the navigation, so this is no good.

Instead we could tile a black GIF in our content div and give this div enough left padding, but if our navigation is longer than our content, this won't work either.

Another way to tackle it is to tile the black GIF on the background of our <body>, which is fine unless you want to use another image for the background of your <body>.

Or, we can wrap our content in a 'wrapper' div and tile the image in that div. However, this is adding non-semantic fluff to our markup.

And, of course tiling background images won't work at all if you want the width of your navigation to be fluid.

Like we said, there are things tables do better than CSS. But in the end you need to ask yourself if all the baggage that comes with using tables for layout instead of data is worth it.

Migrating from table hacks to Web standards: the big picture

First, you need to decide on a migration strategy. Are you going to migrate the entire site at once, or are you going to do it on a section by section basis?

Identify the sections and pages that will most benefit from the conversion. Home pages, new product announcements, and similar pages are a natural place to start.

Identify the types of content/information in your site as a whole

• Product information
• Pricing information
• Company information
• Portfolio
• Services offered
• Investor information
• Shopping cart
• User forums
• and so on

Breaking down your pages

Once you have a grasp on the types of content in your site, it’s time to analyze your existing pages for logical divisions of content.

• Main navigation
• Subnavigation
• Headers and footers
• Content
• Related information
• Other

Analyze your table structure for nested tables and empty spacer and border cells. (We want to replace these with div tags or with a much simpler table structure.)

Look at your markup

Once you've analyzed the structure of your pages, it’s time to take a look under the proverbial hood and analyze your existing markup for presentational HTML that can be replaced with structural markup.

• For the love of all that is pure and good, get rid of <font> tags and spacer GIFs!
• Likewise, lose the <b> and <br> markup.
• Get rid of presentational markup for tables (bgcolor, background, and the like).
• Replace purely presentational CSS coding (things like <span class="header">) with appropriate structural markup. (Tantek Çelik goes into more detail in his post, A Touch of Class.)

Replace presentational tags with structural markup

You can use find and replace (and regular expressions), but the easiest way to do it might be to view your existing page in a browser and copy and paste the text from there into your HTML editor.

Think about the structure of your document! Merely replacing <b> tags with <strong> tags is not enough.

What is the most important header? Mark it up with an <h1> tag. Mark your subheads with <h2> tags and so on. Mark up paragraphs with <p> tags. Mark up your navigation as unordered lists.

Choose a DOCTYPE and use it. (We recommend XHTML transitional, unless you're hard core, in which case, go for it and use XHTML strict.)

Divide your page into logical divs

Put your main navigation into a div with an id of mainnav; put your subnav inside a div with an id or class of subnav, put your footer in a <div id="footer">, and wrap your content inside a <div id="content">.

It doesn't look like much now, but once you start adding rules to your style sheets, things will get better quickly.

It’s time to start writing your CSS

At the beginning, give each div a border. For example, div {border:1px dotted gray; padding:.5em} This will help you see where they begin and end, and also whether or not you have any nesting going on.

Write your CSS for element selectors first (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)

Use contextual or descendant selectors as much as possible. This will keep your markup much cleaner. For example, #subnav li{border:1px solid black; padding:.5em; display: inline} will only affect list items that occur within your subnav div.

Test in as many browsers as you can and get your friends to test it in their browsers.

Examples of sites that are laid out with CSS

• CSS Zen Garden
• Adobe Studio
• Wired News
• ESPN
• Quark
• Inc.com
• PGA Open Championship
• phish.com
• CSS Edge

Read all about it

Obviously, we can't cover everything you need to know about designing with CSS in an hour, but these books can help you come to grips with using Web standards to make your pages leaner, cleaner, and faster.

• Eric Meyer on CSS: Mastering the Language of Web Design; Eric Meyer; New Riders; 2002
• Designing with Web Standards; Jeffrey Zeldman; New Riders; 2003
• Cascading Style Sheets: Separating Content from Presentation; Owen Briggs, Steven Champeon, Eric Costello, and Matt Patterson; glasshaus; 2002
• SAMS Teach Yourself CSS in 24 Hours; Kynn Bartlett; SAMS; 2002
• Cascading Style Sheets: Designing for the Web; Hakon Wium Lee and Bert Bos; Addison-Wesley Pub Co; 1999
• Cascading Style Sheets: The Definitive Guide; Eric Meyer; O'Reilly & Associates; 2000

Paper? We don't need no stinking paper: Online resources

CSS-Discuss

• mailing list: Very active, very helpful.
• Wiki: "Among other things the wiki serves as a collective long term memory for the list participants." Want to give Internet Explorer for Windows something it understands, but give better browsers the 'real deal'? You'll find out how to do this and more here.
• Archives: Got a CSS problem that has you stumped? Don't worry, someone else has already had (and received help dealing with) that same problem. Find out the answers here.

zeldman.com The Daily Report: Insightful, thought-provoking, and well-written content and links served up regularly

A List Apart For people who make Web sites

• Taming lists, Mark Newhouse. Indispensable information to help you markup your navigation semantically.
• CSS: Going to Print, Eric Meyer. You'll never need to make a 'printer-friendly version' again.
• Alternative Style: Working With Alternate Style Sheets, Paul Sowden. Let your visitors decide how to view your pages.
• Using XHTML and CSS for an effective Search Engine Optimization Campaign, Brandon Olejniczak. Structural markup will help you get better search engine rankings, too.

The Web Standards project Bless these people.

CSS: A guide for the unglued A great links page

CSS Layout Techniques: for Fun and Profit Layouts that you can use in your projects from Eric Costello. Resources and tutorials, too.

Real World Style CSS layouts, tips, tricks, and techniques from Mark Newhouse.

The Business Benefits of Web Standards Good news for modern suits. The gospel of Web standards presented in terms that an MBA can appreciate.

Thanks. Any questions?

Everybody loves stupid tables

(Well maybe not the actual tables themselves, but people sure seem to like this presentation.)

Thanks to the efforts of the people listed below, “Why Tables for Layout is Stupid” has been translated into all these languages.

If you'd like to translate it into your native tongue, . (Come on, Japan, where are you? How about you, Saudi Arabia? And don't tell me nobody on the entire Indian subcontinent understands the value of Web standards, or wants to read this in their native tongue. I ain't buying it.)

• Leia a versão em português. (Brazilian Portuguese) (Sérgio Lima Jardim & Danival A. Souza)
• Четете на Български. (Bulgarian) (Boby Dimitrov & Sasho Kalchev)
• 繁體中文版. (Chinese — Traditional) (boxlee)
• 简体中文版 (Chinese — Simplified) (Fang Wenjie & Jjgod Jiang)
• Přečtěte si českou verzi. (Czech) (Azu Kiposi)
• Læs på dansk. (Danish) (Christian Rygaard & Carsten Fisker)
• Lees de Nederlandstalige versie. (Dutch) (Ria Marinussen, Roel Van Gils, & Jaap Soetendaal)
• نسخه فارسی را بخوانید (Farsi) (Sina Ghertasi)
• Suomenkielinen versio (Finnish) (Antti Iiskola)
• Lisez en Français. (French) (Denis Boudreau & Adrien Leygues)
• Lesen sie die deutsche version. (German) (Martin Friedrich)
• הגירסה העברית. (Hebrew) (Shachar Haad)
• Olvasd magyarul (Hungarian) (Kornél Wagner)
• Versione Italiana (Italian) (Lorenzo La Rocca and Massimo Lucci)
• 한국어판. (Korean) (Chaeyong, Kim)
• Skaitykite lietuvišką versiją. (Lithuanian) (Aidas Bendoraitis)
• Przeczytaj polską wersję. (Polish) (Kornel Lesinski)
• Citeste în limba româna. (Romanian) (Brinzan Dumitru)
• Читать на русском. (Russian) (Alex Sergeyev, Roman Bykovsky, Andy Pashkov, and a few helpers)
• Lee la versión en español. (Spanish) (Greg Churilov)
• Čitajte na srpskom. (Serbian) (Zoran Nikolic)
• Läs det på svenska. (Swedish) (Anton Andreasson)
• Türkçe Versiyon (Turkish) (Hüseyin TÜFEKÇİLERLİ)
• Читайте українською (Ukrainian) (Serhiy & Marina Pemakhov)