xhtml/css tableless layouts
tableless layouts and css: a brief history
When the web was first introduced it was a platform for sharing content, not for commerce or flashy designs, just content. As such there weren't a lot of tools available in browsers and html to allow for design elements. Then there was the <table> tag, intended for the display of tabular data, reports and the like. Over time web designers figured out tricks and hacks to use the table tag to manipulate the page design. However the actual practice of this left the html code very messy and hard to maintain; redesigns almost always involved completely starting from scratch.
Cascading Style Sheets (CSS) had been on the scene for a while but had mixed browser support in the 1990's. Different browsers still render CSS rules differently today but the incompatibilities are minor in comparison and can be overcome by good code and styles applied to specific browsers through conditional CSS includes.
CSS frees designers from using tables to layout their designs and allows them to seperate the look and design of the page from the actual content of the page. This has a host of benefits to the developer, designer, and client.
benefits of tableless design
- separation of design and content
- sites are easier to edit, global changes to the design much easier (i.e. less expensive)
- search engines
- cleanly coded pages are easier for search engines spiders to read, which tends to help you in the search engine rankings
- consistency
- setting global typography in style sheets allows for a consistent look and feel to your site and content
- accessibility
- pages designed without tables will display much better when viewed on non-traditional displays such as phones or devices for the visually impaired
- speed
- pages without tables tend to use less code and load faster