[Tableless Design with CSS 2.1]
Table-less design: the ultimate approach or selfish? The way to go or not?
- an abstract, high-level summary -
It depends on the situation and your project's goals. The idea behind a "HTML table-less"
design (=pure css based layout) is that one gets one step closer to the ultimate
separation of content and presentation. And this is indeed the optimal situation.
Therefore the preferred way to design a page is by layouting it solely by applying
CSS styles / classes.
Benefits: Theoretically, the separation allows you to redesign / rearranging your
page(s) without touching the HTML portion of your document which contains the actual
content and a set of XHTML tags like
<ul>, <div>, <h1>, <span>, etc.
.
<div>
tags are a major instrument to create areas of content,
so-called boxes or containers.
Separation of content and presentation: this is very useful when you want to change
the look & feel of your site e.g. by switching themes and skins according to
user preferences (personalization) or for special occasions / seasons. Examples:
text headlines can become images, blocks of text and navigation blocks can be re-positioned,
background images can be changed and so on.
This advantage and flexibility is the reason why to go with a pure CSS layout.
The backside is that it requires more experience on the designer side, testing might
be more tedious because the rendering behavior of different browsers and versions
especially regarding "positioning" makes the designer's life complicated. The good
news is that the latest browser versions from the well known competitors are getting
to a point where the rendering engines work more and more according to the W3C standards.
IE 6 had lots of rendering issues especially with the box-model and positioning
but the new IE 7 makes your life easier.
Table-less design might be more time-consuming and costly when you need to make
sure that a very broad variety of browsers can be handled. Different CSS files for
browsers and versions are common in order to accommodate work-arounds. To work-around
rendering issues is the biggest "time-thief" and unfortunately a commonn task of
a designer.
On the other hand: to go with a "HTML-table design" means that you can implement
a tabular layout (header, content columns, footer, navigation bars, etc.) very quickly
and it is also considered 'safe' when it comes to rendering for different browsers
& platforms. So, that means you can achieve a quick implementation which is
less costly and can be maintained more easily by staff that is not so experienced.
And what does your website user care how you implemented the layout? What about
you - do you inspect other people's sites regarding the use of HTML? How is the
CNN.com site made, what about Amazon.com, or Apple.com, Microsoft.com? Right, unless
you are not in the design industry or a company that is concerned about state-of-the-art
use of technology you probably do not care.
Anyhow, pure CSS layouts are the future and when creating a new site the designer
should utilize CSS in order to achieve the wished layout. For describing attributes
like color, font-size, etc. it is meanwhile quite common to use CSS styles. Positioning
via CSS is the next step and designers go currently through a kind of transition
process. HTML-table design is not evil - it's a completely legitimate but kind of
obsolete.
Is a page layout really fully rearrangeable without touching the HTML portion? Not
100% - it depends on the arrangement (order) of
<div>
tags and the use of "relative" vs. "absolute" positioning. By applying "absolute"
positioning you have a lot of power as a designer but it has downsides as well:
you actually set a specific position for your item in dependence of the containing
block ("parent" container). This approach will interfere with fluid layouts.
Combining "relative" with "absolute" positioning can be a powerful technique but
can introduce 'overlays' of areas (blocks) when the dimension of the absolute positioned
element is modified, e.g. by adding longer text passages as originally planned.
That might happen if you are dealing with text content that comes dynamically from
databases. "Absolute" positioned blocks do not care about dimensions of parent or
sibling containers. This sounds very abstract and is hard to explain in few words
but it happens to beginners all the time.
"Relative" and "floated" positioning allows more flexibility but is considered less
intuitive by beginners. I mentioned "containers" and this is an integral part of
the entire positioning concept. "Relative" as well as "absolute" positioning depends
on the parent container which is e.g. a
<div>
tag. So, by arranging (grouping) your text (content) in
<div>
's you automatically create a hierarchical parent-descendent model and your positioning
therefore lives within these constraints when it comes to a re-design. For yor initial
layout it doesn't matter because you have your HTML and CSS in-sync. If you want
to make your HTML more flexible for the future then some designers would implement
some "wrapper"
<div>
tags that create a kind of additional 'handle' to a certain block later.
Conclusion: yes, you are way more flexible with your layout if you rely totally
on a clean XHTML that concentrates on content and by using CSS styles in order to
layout the page and make the content look nice.
You can also consider to bring the separation of content and presentation to the
next level: all your content should go into XML files (or a database with XML support)
and XSL transformation files generate the actual XHTML which can then be formatted
with CSS styles.
Common areas of your page like Header, navigation, footer can be handled by applying
master-page templates to your overall design. All these techniques and some more
make it possible to create extremely flexible and quickly adaptable layouts. From
a business standpoint it remains to be considered if the (definitely existing) overhead
is worth it. In general it makes sense for large, dynamic sites and for sites that
emphasize cutting-edge technology. By the way, some HTML editors / IDE's come already
with CSS based layout templates that provide a initial kick-start - however, in
order to modify the layout you need to understand CSS.
Cheers, best regards,
Frank