|
Tableless web design
Web Design & Development Guide
Tableless web design
Home
Up
Tableless Web design is a method of
web
design and
development without using
HTML tables for page layout control purposes. 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, the situation improved considerably. However, many popular
browsers have limited or buggy support for these newer features of CSS, which
has slowed the adoption of tableless web design. Many websites still use CSS for
text formatting only, while using tables for layout.
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. 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.
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.
In addition, a web browser usually has to download all content within a table
before displaying it on a page, resulting in slower-seeming load times. Without
tables, content on a page can load sequentially, appearing faster to the end
user.
Advantages
Accessibility
-
Because of 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]
Bandwidth savings
In general, a tableless design results in smaller, more compact Web pages.
Tableless designs do away with the need for embedded tables and spacer images
and can significantly reduce download times, save bandwidth and reduce the
latency 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.)
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 global scale may
require a great deal of effort, depending on the amount of repetitive changes
required. Even employing
grep or similar
global find & 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 global find & replace utilities.
Lastly, if the HTML source code is to be edited by hand, the code is more
visually readable without the table layout tags and other styling information.
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. HTML editors such as
Adobe 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.
Stigmatizing the use of tables creates a situation where people fail to use
tables 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 consider the term "tableless design" antiquated as the goal is to
use the appropriate design tool for a task.
External links
Home
Up
Tableless web design
Comparison of layout engines (CSS)
|