Tableless web design
From Wikipedia, the free encyclopedia
| Cascading Style Sheets |
|---|
|
CSS Animations |
Tableless web design (or tableless web layout) is a method of web design and development without using HTML tables for page layout control purposes.[1] 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[update], CSS layout capabilities improved considerably. Nonetheless, many websites still use CSS for text formatting only, while using tables for layout.
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 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.
In the late 1990s the first reasonably powerful WYSIWYG editors arrived on the market which meant Web designers no longer needed a good (or any) understanding of HTML to build web pages. Such editors indirectly encourage extensive use of nested tables to position design elements. As designers edit their documents in these editors, code is added to the document which is sometimes unnecessary. Furthermore, unskilled designers may use tables more than required when using a WYSIWYG editor. This practice can lead to many tables nested within tables as well as tables with unnecessary rows and columns.
The use of graphic editors with slicing tools that output HTML and images directly also promote poor code with tables often having many rows of 1 pixel height or width. Sometimes many more lines of code are used to render content than the actual content itself.
As the dotcom boom receded in 2001 and the Web development industry shrank, coders with more industry experience were in higher demand. In a large number of cases UI development was carried out by coders with greater knowledge of good coding practice. It was around this time that many became critical of messy coding practices and the idea of tableless design began to grow.
Cascading Style Sheets (CSS) were developed to improve the separation between design and content, and move back towards a semantic organization of content on the Web. The term "tableless design” implies the use of CSS to position HTML elements on the page but it should be noted that tables and CSS are not mutually exclusive. Many experienced HTML coders use CSS to manipulate tables frequently.
[edit] Advantages
[edit] Accessibility
Because of the Internet's rapid growth, 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
 |
This section does not cite any references or sources. Please help improve this article by adding citations to reliable sources (ideally, using inline citations). Unsourced material may be challenged and removed. (May 2008) |
Clever implementation of tableless design can produce web pages with fewer HTML tags thus reducing page download times. Using external style sheets to position page elements means more mark up language may be cached and further reduce download times for subsequent pages using the same resources.
Poor implementation of tableless design can result in many more lines of code used per page element which can increase download time. Tables have a defined set of rules which are clear and concise while tableless design often involves working around browser inconsistencies.
Tableless design does not necessarily imply bandwidth savings. If implemented correctly, the bandwidth savings are generally minor at best. It is still possible to build a lightweight web page with tables. The use of WYSIWYG editors or the technique used by the web page's author will have a much greater influence on page download times.
[edit] Maintainability
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, 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 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.
Due to browser inconsistency and a particular web designer's implementation of tableless design, it may not be clear at first glance exactly how a tableless web page is constructed. While it is convenient to have markup language residing in a single CSS file, it can split layout logic unnecessarily. Browser inconsistencies can increase the risk of web pages failing to render properly which increases the need for maintainability.
[edit] The use of tables
Because of the term "tableless web design", some have interpreted this design strategy as an unconditional repudiation of all tables in web design. This has caused some to avoid tables even 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 sources clarify this distinction by using the more specific term "tableless web layout".[1]
On the other hand, using tables in web design, although most common, does not necessarily equate to using the table element (and related elements) defined in HTML 4.0. CSS also specifies a "table model" which allows the semantics of "tabular representation" to be applied: the "display: table" element. In this way, the decision and definition for tables is transferred from HTML to CSS.[2] One reason this distinction is sometimes overlooked is because of the lack of support for the CSS table model in Internet Explorer. Internet Explorer 8 is the first version of the browser to support the CSS table model.
[edit] Notes and references
- ^ a b The term "tableless web design" is something of a misnomer, since the common best-practice is to remove tables as a means of specifying layout, but not necessarily to remove tables as a means for specifying tabular data, which is considered to be appropriate use for tables. See e.g., "tableless css layout". http://www.w3.org/2002/03/csslayout-howto. Retrieved on 2007-09-08.
- ^ "CSS table model". http://www.w3.org/TR/CSS21/tables.html. Retrieved on 2007-09-08.
[edit] External links
- CSS Zen Garden (CSS-based tableless design)
- Position Is Everything (explains many browser bugs and workarounds)
- How to convert tables to layers on Dreamweaver
- W3C Tableless layout HOWTO
- 13 Reasons Why CSS Is Superior to Tables in Website Design
