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.

Do not let the term "tableless layouts" fool you, it means exactly what it says, it does not mean "tableless webpages". You should continue to use tables for tabular data.

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://phrogz.net/CSS/HowToDevelopWithCSS.html#tables - Ask yourself these questions to see if the table element is appropriate.
• http://www.meryl.net/css/ - Thousands of examples of tableless layouts
• http://www.hotdesign.com/seybold/index.html - Why tables for layout is stupid: problems defined, solutions offered
• http://www.digital-web.com/tutorials/tutorial_2002-06.shtml - walks through a transformation a table-based page into a CSS-enabled design
• http://css.maxdesign.com.au/floatutorial/ - floating tutorials, culminating in tutorials for two- and three-column layouts
• 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/articles/practicalcss/
• http://developer.apple.com/internet/css/introcsslayout.html
• http://www.webreference.com/authoring/style/sheets/layout/advanced/
• http://www.maxdesign.com.au/presentation/listamatic/ - Listamatic: one list, many options
• http://www.maxdesign.com.au/presentation/listamatic2/ - Listamatic 2: nested list options

Examples and Demos

• http://www.meyerweb.com/eric/css/edge/ - CSS/Edge, a collection of complex CSS demos
• http://www.csszengarden.com/ - various user-submitted stylesheets used with the same HTML document to completely transform the page
• http://www.saila.com/usage/layouts/
• http://css-discuss.incutio.com/?page=ThreeColumnLayouts - a collection of layouts on the css-discuss wiki
• http://glish.com/css/
• http://www.bluerobot.com/web/layouts/
• http://www.thenoodleincident.com/tutorials/box_lesson/

Elsewhere in All My FAQs

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