| Tableless Web design is the art of building websites | | | | different style sheet for print, e.g. to hide or modify |
| without the use of tables. It was introduced by the | | | | the appearance of advertisements or navigation |
| World Wide Web Consortium (W3) to improve | | | | elements that are irrelevant and a nuisance in the |
| accessibility and make HTML code easier to handle. | | | | printable version of the page. |
| Instead of tables, CSS (Cascading Style Sheets) | | | | Bandwidth savings In general, a tableless design |
| positioning is used to arrange elements and text on a | | | | results in smaller, more compact Web pages. |
| Web page. | | | | Table-based designs frequently have a large number |
| Rationale HTML was originally designed as a semantic | | | | of tables nested within tables, spacer images and the |
| markup language intended for sharing scientific | | | | like, which can significantly increase the size of a Web |
| documents and research papers online. However, as | | | | page. Tableless designs do away with the need for |
| the Internet expanded from the academic and | | | | these and can significantly reduce download times, |
| research world into the mainstream in the mid 1990s, | | | | save bandwidth and improve the throughput of the |
| and became more media oriented, graphic designers | | | | site. |
| sought for ways to control the visual appearance of | | | | The CSS file can also be cached by the browser and |
| the Web pages presented to end users, and to this | | | | so does not need to be re-loaded with every page |
| end, tables and spacers (usually transparent single | | | | visit, thereby providing further savings in bandwidth. |
| pixel GIF images with explicitly specified width and | | | | These issues are particularly important on busy and |
| height) have been used to create and maintain page | | | | popular sites, and on content that will be viewed by |
| layout. | | | | users with slow Internet connections (e.g. on mobile |
| This causes a number of problems. Many Web pages | | | | devices.) Maintainability Redesigning a site consisting |
| have been designed with tables nested within tables, | | | | primarily of tables is a Web designer's nightmare, |
| resulting in large, bloated HTML documents which | | | | requiring editing the markup of all the pages on a site |
| take longer to download and use more bandwidth. | | | | individually, although template-based visual editors |
| Furthermore, when a table based layout is linearized, | | | | such as Dreamweaver can help to alleviate this |
| for example when being parsed by a screen reader | | | | problem. However, using a tableless site with CSS |
| or a search engine, the resulting order of the content | | | | styling, the redesign can be done in a fraction of the |
| can be somewhat jumbled and confusing. | | | | time. The designer will not need to edit pages |
| As a consequence of this trend, CSS was developed | | | | indiviually but can just edit the .css file containing the |
| to improve the separation between design and | | | | relevant styling, saving the client time and money. |
| content, and move back towards a semantic | | | | Problems The main problem with tableless design is |
| organization of content on the Web. | | | | the wide differences that are to be found in browser |
| Advantages Accessibility Due to the rapid growth of | | | | support. Even among standards-compliant browsers |
| the Internet, disability discrimination legislation, and the | | | | there are considerable differences in implementation |
| increasing use of mobile phones and PDAs, it is | | | | due to bugs and mis-interpretation of the standards |
| necessary for Web content to be made accessible | | | | by the browser developers. These necessitate a |
| to users operating a wide variety of devices. | | | | large number of complex hacks and workarounds in |
| Tableless Web design considerably improves | | | | the CSS files, and Web pages need to be tested |
| accessibility in this respect. Screen Readers and braille | | | | much more carefully on a wider variety of devices |
| devices have fewer problems with tableless designs | | | | than with table-based design, as some of these bugs |
| because they follow a logical structure. | | | | can render the content illegible on some browsers. |
| As a result of the separation of design (CSS) and | | | | In addition, CSS support in some older browsers such |
| structure (HTML), it is also possible to provide | | | | as Netscape 4 is very incomplete, which can cause |
| different layouts for different devices, e.g. handhelds, | | | | major problems if these browsers also need to be |
| mobile phones, etc. It is also possible to specify a | | | | targeted. |