Tableless web design

A web design method that avoids HTML tables for page layout control

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.

The intended and semantic purpose of HTML tables lies in presenting tabular data rather than laying out pages. The benefits of using CSS for page layout include improved accessibility of the information to a wider variety of users, using a wide variety of user agents. There are bandwidth savings as large numbers of semantically meaningless , and tags are removed from dozens of pages leaving fewer, but more meaningful headings, paragraphs and lists. Layout instructions are transferred into site wide CSS stylesheets, which can be downloaded once and cached for reuse while each visitor navigates the site. Sites may become more maintainable as the whole site can be restyled or re branded in a single pass merely by altering the mark up of the specific CSS, affecting every page which relies on that stylesheet. New HTML content can be added in such a way that consistent layout rules are immediately applied to it by the existing CSS without any further effort.

Because of the Internet's rapid growth, expanding 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 beyond the relatively uniform desktop computer and CRT monitor ecosystem the web first became popular on. Tableless Web design considerably improves Web accessibility in this respect, as tables too wide for a screen need to be scrolled sideways to be read in entirety, whereas text can wrap around. Screen readers and braille devices have fewer problems with tableless designs because they follow a logical structure. The same is true for search engine Web crawlers, the software agents that most web site publishers hope will find their pages, classify them accurately and so enable potential users to find them easily in appropriate searches. 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." The guideline's checkpoint 3.3, a priority 2 checkpoint, says "use style sheets to control layout and presentation."

Tableless design produces web pages with fewer HTML tags used purely to position content. This normally means that the pages themselves become smaller to download. The philosophy implies that all the instructions regarding layout and positioning be moved into external style sheets. According to the basic capabilities of HTTP, as these rarely change and they apply in common to many web pages, they will be cached and reused after the first download. This further reduces bandwidth and download times across the site.

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 whole site may require a great deal of effort, depending on the amount of repetitive changes required. Even employing sed or similar global find and replace utilities cannot alleviate the problem entirely. In tableless layout using CSS, the layout information may reside in a CSS document. Because the layout information may be centralized, it is possible that these changes can be made quickly and globally by default. The HTML files themselves may not need to be adjusted when making layout changes. Also, because the layout information may be stored externally to the HTML, it may be 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 use of global find and replace utilities. However site owners often want particular pages to be different from others on the site either for a short period or long term. This will often necessitate a separate style sheet to be developed for that page. The page (or template) content usually can remain unaltered however, which is not the case in a tables based design.