Tableless web design
From Wikipedia, the free encyclopedia
Tableless Web design is the art of building websites without resorting to the use of tables merely for presentational purposes. Instead of tables, CSS (Cascading Style Sheets) positioning is 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.
From the very beginning CSS provided more powerful and easier to use ways of formatting, and the <FONT> tag quickly fell into disuse. 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. This led to slow adoption of tableless web design, and many websites use CSS for formatting only and do layout using tables.
Contents |
[edit] Rationale
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, and 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, bloated HTML documents which take longer to download and use more bandwidth. 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.
[edit] Advantages
[edit] Accessibility
Due to 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]
[edit] Bandwidth savings
In general, a tableless design results in smaller, more compact Web pages. Table-based designs frequently have a large number of tables nested within tables, spacer images and the like, which can significantly increase the size of a Web page. Tableless designs do away with the need for these and can significantly reduce download times, save bandwidth and improve the throughput 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.)
[edit] Maintainability
Redesigning a site consisting primarily of tables is considered by some who haven't worked out how to use the Global Find and Replace command to be a nightmare, requiring editing the markup of all the pages on a site individually, although template-based visual editors such as Macromedia Dreamweaver can help to alleviate this problem. However, using a tableless site with CSS styling, the redesign can be done in a fraction of the time. The designer will not need to edit pages indiviually but can sometimes just edit the .css file containing the relevant styling, saving the client time and money - if all they want is, for example, a change to the size of a font (which can be rendered nugatory by a site visitor's changing the font size in their browser). However, site owners sometimes want what appears to be a simple change to just one page in a site but which requires many hours or days work implementing obscure CSS hacks to have the presentation of the page consistent across browsers.
[edit] Problems
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. Programs such as 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. Meanwhile the site owner has taken his business to a developer (often offshore) who can accomplish required changes in a time frame of less than six months.
[edit] External links
- CSS Zen Garden (A demonstration of what can be accomplished visually through CSS-based tableless design)
- Position Is Everything (explains many browser bugs and workarounds)
- Why tables for layout is stupid
- How to convert tables to layers on Dreamweaver
- Dreamweaver layers
