Tableless web design (or tableless web layout) is a web design method that avoids the use of HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as Cascading Style Sheets (CSS) are used to arrange elements and text on a web page.
History
HTML is a markup language whose visual presentation was initially left up to the user. However, as the Internet expanded from the academic and research world into the mainstream in the mid-1990s, and became more media oriented, graphic designers sought ways to control the visual appearance of their Web pages. As popularised especially by the designer David Siegel in his book Creating Killer Web sites, tables and spacers (usually transparent single pixel GIF images with explicitly specified width, height or margins) were used to create and maintain page layouts.
In the late 1990s the first reasonably powerful WYSIWYG editors arrived on the market, which meant Web designers no longer needed a technical understanding of HTML to build web pages. Such editors indirectly encouraged extensive use of nested tables to position design elements. As designers edited their documents in these editors, unnecessary code and empty elements were added to the document. Furthermore, unskilled designers were likely to use tables more than required when using a WYSIWYG editor. This practice frequently led to many tables nested within tables, as well as tables with unnecessary rows and columns. The use of graphic editors with slicing tools that output HTML and images directly also promoted poor code with tables often having many rows of 1 pixel height or width. Sometimes many more lines of code were used to render content than the actual content itself.
The reliance on tables for layout purposes caused a number of problems. Many web pages were designed with tables nested within tables, resulting in large HTML documents that use more bandwidth than documents with simpler formatting. Furthermore, when a table-based layout is linearized, for example when being parsed by a screen reader or a search engine, the resulting order of the content can be somewhat jumbled and confusing.
Cascading Style Sheets (CSS) were developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web. The term "tableless design” implies the use of CSS rather than layout tables to position HTML elements on the page. HTML tables still have their legitimate place when presenting tabular information within web pages, and are also sometimes still used as layout devices in situations for which CSS support is poor or problematical, like vertically centering an element. Another area where tables are still used is e-mailers, because many popular Email clients have not kept up with modern HTML and CSS rendering. In such a scenario, complex e-mailers lose some of their structural and creative alignment.
Adoption
The CSS1 specification was published in December 1996 by the W3C with the aim of improving web accessibility and emphasising the separation of presentational details in style sheets from semantic content in HTML documents. CSS2 in May 1998 (later revised in CSS 2.1 and CSS 2.2) extended CSS1 with facilities for positioning and table layout.
The preference for using HTML tables rather than CSS to control the layout of whole web pages was due to several reasons: the desire of content publishers to replicate their existing corporate design elements on their web site; the limitations at the time of CSS support in browsers; the installed base of browsers that did not support CSS; the new web designers' lack of familiarity with the CSS standards; the lack of knowledge of, or concern for the reasons (including HTML semantics and web accessibility) to use CSS instead of what was perceived as an easier way to quickly achieve the intended layouts, and a new breed of WYSIWYG web design tools that encouraged this practice.
Landmarks in the adoption of CSS-based layouts include the Web Standards Project's Browser Upgrade campaign of February 2001 and the web design magazine A List Apart'''s simultaneous redesign, followed by the Wired'' redesign in 2002. The CSS Zen Garden website, launched in 2003, has been credited with popularising tableless layouts.