Tableless web design

Web Design & Development Guide

Tableless web design


Tableless Web design is a method of web design and development without using HTML tables for page layout control purposes. Instead of HTML tables, style sheet languages such as CSS (Cascading Style Sheets) are used to arrange elements and text on a web page. CSS was introduced by the World Wide Web Consortium (W3C) to improve web accessibility and to make HTML code semantic rather than presentational.

Early in its advent, many web developers considered CSS a more powerful and easier to use way of formatting, and considered the <FONT> tag obsolete. On the other hand early CSS had very limited and difficult to use layout capabilities and many common page layouts (like the 3-column design) that were very easy to implement with tables had no obvious equivalents in CSS.

As of 2006, the situation improved considerably. However, many popular browsers have limited or buggy support for these newer features of CSS, which has slowed the adoption of tableless web design. Many websites still use CSS for text formatting only, while using tables for layout.


HTML was originally designed as a semantic markup language intended for sharing scientific documents and research papers online. 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 for ways to control the visual appearance of the Web pages presented to end users. To this end, tables and spacers (usually transparent single pixel GIF images with explicitly specified width and height) have been used to create and maintain page layout.

This causes a number of problems. Many Web pages have been designed with tables nested within tables, resulting in large HTML documents which 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.

As a consequence of this trend, CSS was developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web.

In addition, a web browser usually has to download all content within a table before displaying it on a page, resulting in slower-seeming load times. Without tables, content on a page can load sequentially, appearing faster to the end user.



Main article: Web accessibility

Because of the rapid growth of the Internet, disability discrimination legislation, and the increasing use of mobile phones and PDAs, it is necessary for Web content to be made accessible to users operating a wide variety of devices. Tableless Web design considerably improves Web accessibility in this respect. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure.

As a result of the separation of design (CSS) and structure (HTML), it is also possible to provide different layouts for different devices, e.g. handhelds, mobile phones, etc. It is also possible to specify a different style sheet for print, e.g. to hide or modify the appearance of advertisements or navigation elements that are irrelevant and a nuisance in the printable version of the page.

The W3C's Web Content Accessibility Guidelines' guideline no. 3 states "use markup and style sheets and do so properly."[1] The guideline's checkpoint 3.3, a priority-2 checkpoint, says "use style sheets to control layout and presentation."[2]

Bandwidth savings

In general, a tableless design results in smaller, more compact Web pages. Tableless designs do away with the need for embedded tables and spacer images and can significantly reduce download times, save bandwidth and reduce the latency of the site.

The CSS file can also be cached by the browser, thereby providing further savings in bandwidth, particularly for dynamically generated content as the layout information does not need to be reloaded with every page visit.

These issues are particularly important on busy and popular sites, and on content that will be viewed by users with slow Internet connections (e.g. on mobile devices.)


Maintaining a website may require frequent changes, both small and large, to the visual style of a website, depending on the purpose of the site. Under table-based layout, the layout is part of the HTML itself. As such, without the aid of template-based visual editors such as HTML editors, changing the positional layout of elements on a global scale may require a great deal of effort, depending on the amount of repetitive changes required. Even employing grep or similar global find & replace utilities cannot alleviate the problem entirely.

In tableless layout using CSS, virtually all of the layout information resides in one place: the CSS document. Because the layout information is centralized, these changes can be made quickly and globally by default. The HTML files themselves do not, usually, need to be adjusted when making layout changes. If they do, it is usually to add class-tags to specific markup elements or to change the grouping of various sections with respect to one another.

Also, because the layout information is stored externally to the HTML, it is quite easy to add new content in a tableless design, whether modifying an existing page or adding a new page. By contrast, without such a design, the layout for each page may require a more time-consuming manual changing of each instance or global find & replace utilities.

Lastly, if the HTML source code is to be edited by hand, the code is more visually readable without the table layout tags and other styling information.


The main problem with tableless design is the wide differences that are to be found in browser support. There are considerable differences in implementing a CSS layout for multiple browsers due to bugs and mis-interpretation of the standards by different browser developers. These necessitate a large number of complex hacks and workarounds in the CSS files, and Web pages need to be tested much more carefully on a wider variety of devices than with table-based design, as some of these bugs can render the content illegible on some browsers.

In addition, CSS support in some older browsers such as Netscape 4 is very incomplete, which can cause major problems if these browsers also need to be targeted.

Conversion to tableless web design has been slow also because of table to layer/css conversion software. HTML editors such as Adobe Dreamweaver can convert tables to layers back and forth. Though this would ease the conversion a little, complications exist in the exactness of the conversion. The centering of tables centered them on the page, but the centering of layers together on different screen resolutions requires some tinkering.

Stigmatizing the use of tables creates a situation where people fail to use tables when tables are appropriate. Using divisions to simulate a table for the display of tabular data is as much a design flaw as using tables to simulate a division. Some consider the term "tableless design" antiquated as the goal is to use the appropriate design tool for a task.

External links

Tableless web design
Comparison of layout engines (CSS)

Page created in 0.027078 Seconds