Tableless layouts

CSS-Based Layouts

HTML was never designed to be a layout language. The <table> element was designed to mark-up tabular data (such as you'd find in a spreadsheet). CSS (Cascading Style Sheets) was designed for design and presentational issues - and makes pages easier and faster to code, more manageable, accessible, and faster to download.

Handy links

General

• W3C CSS1 specification - http://www.w3.org/TR/REC-CSS1
• W3C CSS2 specification - http://www.w3.org/TR/REC-CSS2
• W3C CSS3 draft (work in progress) - http://www.w3.org/Style/CSS/current-work
• [Google Directory: Sample Style Sheets > Layouts]

Tutorials and Articles

• http://www.digital-web.com/tutorials/tutorial_2002-06.shtml -- walks through a transformation a table-based page into a CSS-enabled design
• http://www.w3.org/2002/03/csslayout-howto
• http://davespicks.com/essays/notables.html
• http://climbtothestars.org/coding/tableless/
• http://www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html
• http://www.alistapart.com/stories/practicalcss/
• http://developer.apple.com/internet/css/introcsslayout.html
• http://www.webreference.com/authoring/style/sheets/layout/advanced/

Examples and Demos

• CSS/Edge, a collection of complex CSS demos - http://www.meyerweb.com/eric/css/edge/
• http://www.saila.com/usage/layouts/
• http://glish.com/css/
• http://www.bluerobot.com/web/layouts/
• http://www.thenoodleincident.com/tutorials/box_lesson/
• http://wannabegirl.org/css/ - CSS Colouring Book, a collection of 1, 2, 3, and 4 column layouts.
• http://www.drnoble.co.uk/internet/css-layout.php - Showing the basic CSS of how I achieved a tableless layout for my site.

Elsewhere in All My FAQs

• View all CSS FAQs
• Why use CSS?
• What is CSS?
• Find out more about web accessibility