Tableless Web Design

Tableless web design, also called tableless web layout, is a method of designing web pages without using HTML tables for page layout. Instead of using HTML tables, style sheet languages are used to arrange the different elements of text on a web page. One of the most common style sheet languages is Cascading Style Sheets, or CSS.

W3C introduced CSS in December of 1996 in order to improve web accessibility and to also make HTML code semantic instead of presentational. HTML was originally designed as a semantic markup language that was intended for sharing research papers and documents online. As the internet became more mainstream, graphic designers looked for ways to control the visual appearance of the web pages that they designed. This caused a number of problems as tables were nested within tables that created really large HTML web pages. CSS was introduced to solve this problem.

Tableless web design using CSS has a number of advantages over tabled web design. One of the advantages is in accessibility. With the number of different devices now accessing the internet, web content can be made accessible to users operating a wide variety of devices from desktops, to mobile phones to PDAs. Screen readers and braille devices have fewer problems with tableless design because they follow a logical structure.

Another advantage with tableless web design is bandwidth savings. Tableless web design creates web pages with fewer HTML tags used purely to position content. This results in pages that become smaller to download. The style philosophy implies that all the instructions for layout and positioning are to be moved into external style sheets. With the basic capabilities of HTTP, since the style rarely changes and apply in common to many web pages, they will be cached and reused after they are first downloaded. This results in a further reduction of bandwidth use and download times.

Lastly, maintainability is also improved with the use of tableless web design. When maintaining a website, frequent changes are often necessary. Under table-based web design, the layout is actually part of the HTML itself. Changing the positional layout of elements on a whole site may require a great deal of effort. In tableless layout using CSS, virtually all of the layout information resides in one place - the CSS document.