Layout using CSS vs. tables

[Malte Christensen]

From many posts I sense that there is an increasing aversion against
using tables for layout purposes. Instead, DIV and SPAN should be used.

I am not certain how much of this is evangilism and how much is for
real. I mention this because I don't want to start a war (as in which
editor do you like? I like VI and GVIM, but that's just me ;-)).

I have found a few texts through Google but would like to know if anyone
has some references to more authoritive texts discussing the pro et contras.

Tnx

 

[Chaddy2222]

From many posts I sense that there is an increasing aversion against
using tables for layout purposes. Instead, DIV and SPAN should be used.

I am not certain how much of this is evangilism and how much is for
real. I mention this because I don't want to start a war (as in which
editor do you like? I like VI and GVIM, but that's just me ;-)).

I have found a few texts through Google but would like to know if anyone
has some references to more authoritive texts discussing the pro et contras.

Tnx

Hmmm.
Maybe take a look at http://www.w3.org
I personally use Tables for layout, mainly because they are easyer,
well kind of.
I think it really depends on how large your site is:
For example, if you have a large site in mind and do not want to have
to re-right the items such as navigation on every page and if you don't
know Server Side Includes, or if your host won't allow them. Some
won't, then CSS is the way to go. As you only need to update the
contents of one file.
But, if you want to use tables, then you will need to use some sort of
php include, or template system, so you do not need to update the same
info on every page.

 

[Jonathan N. Little]

From many posts I sense that there is an increasing aversion against
using tables for layout purposes. Instead, DIV and SPAN should be used.

I am not certain how much of this is evangilism and how much is for
real. I mention this because I don't want to start a war (as in which
editor do you like? I like VI and GVIM, but that's just me ;-)).

I have found a few texts through Google but would like to know if anyone
has some references to more authoritive texts discussing the pro et
contras.

Tnx

Here is an example to illustrate the advantage of separating
presentation from markup


mezzoblue § css Zen Garden — Design
Listhttp://www.mezzoblue.com/zengarden/alldesigns/

 

[Greg N.]

Here is an example to illustrate the advantage of separating
presentation from markup
http://www.mezzoblue.com/zengarden/alldesigns/

My first visit was about a year ago when I first heard about the CSS
concept. Today, I had another look at that page, and I found two
strange trends there:

1. font colors that do not contrast enough with their background. Yeah,
it all looks artsy, elegant, and light, but kermit green type on
pistachio green background? Light gray on white? Give me a break,
ever heard about accessability?

2. None of those pages are liquid. Is that the new fad? Donate up to
50% of the window real estate to pastel colored nothing?

Is there anything I'm missing that can be said in favor of these trends?

 

[Jonathan N. Little]

My first visit was about a year ago when I first heard about the CSS
concept. Today, I had another look at that page, and I found two
strange trends there:

1. font colors that do not contrast enough with their background. Yeah,
it all looks artsy, elegant, and light, but kermit green type on
pistachio green background? Light gray on white? Give me a break,
ever heard about accessability?

2. None of those pages are liquid. Is that the new fad? Donate up to
50% of the window real estate to pastel colored nothing?

Is there anything I'm missing that can be said in favor of these trends?

I think the main concept is to demonstrate how far you can push the
styling by only editing the stylesheet than to create a really usable page.

 

[Bernhard Sturm]

I have found a few texts through Google but would like to know if anyone
has some references to more authoritive texts discussing the pro et
contras.

"tables were never intended as a mean of structuring a page, but as a
mean to represent tabular data"
http://www.weboffice.unizh.ch/workshops/accessibility/tabellen.php?s=1
(it's in german)

or
"don't use tables for layout purposes if they will not work in
linearised form. Otherwise, if tables do not provide a
(structural)-meaning use an equivalent alternative..."

http://www.weboffice.unizh.ch/workshops/accessibility/tabellen_layout.php?s=1
(in german as well)

in short: if you are serious about accessibility issues you will have to
separate structure from layout. In most cases this approach will forbid
the use of tables in order to support a layout...

HTH
bernhard

 

[kchayka]

2. None of those pages are liquid. Is that the new fad?

No, that's an old fad. Fixed-width table layouts meant for an 800x600
window size have been commonplace for years. Now deezyners are just
doing it with CSS instead of tables.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Malte Christensen wrote :

From many posts I sense that there is an increasing aversion against
using tables for layout purposes. Instead, DIV and SPAN should be used.

Div, yes. But not span.

I am not certain how much of this is evangilism and how much is for
real. I mention this because I don't want to start a war (as in which
editor do you like? I like VI and GVIM, but that's just me ;-)).

I have found a few texts through Google but would like to know if anyone
has some references to more authoritive texts discussing the pro et
contras.

Tnx

It's all up to you. If you want to have smaller webpages, faster to
download, easier to maintain and to upgrade, more accessible in other
media, etc.., then use CSS.

1-
Authoring Tool Accessibility Guidelines 1.0 "Allow the author to
transform presentation markup that is misused to convey structure into
structural markup, and to transform presentation markup used for style
into style sheets. [Priority 3]"
e.g.
# HTML: table-based layout into CSS.
ATAG Checkpoint 4.5: Allow the author to transform presentation markup
that is misused to convey structure into structural markup, and to
transform presentation markup used for style into style sheets. [Priority 3]
http://www.w3.org/TR/2002/NOTE-ATAG10-TECHS-20021029/imp4#check-allow-transformation

2-
"Tables should not be used purely as a means to layout document content
as this may present problems when rendering to non-visual media.
Additionally, when used with graphics, these tables may force users to
scroll horizontally to view a table designed on a system with a larger
display. To minimize these problems, authors should use style sheets to
control layout rather than tables."
HTML 4.01, section 11.1
http://www.w3.org/TR/html401/struct/tables.html#h-11.1

3-
Why tables for layout is stupid. Problems defined, solutions offered.
Most possibly the best resource on this issue covering all aspects: it
was a seminar presentation, part of a conference in 2003. Translated in
12 other languages.
http://www.hotdesign.com/seybold/

4-
Tableless layout HOWTO (World Wide Web Consortium tutorial). Excellent
resource
http://www.w3.org/2002/03/csslayout-howto

5-
Tables My Ass. Excellent presentation of pros and cons and of issues
involved.
http://www.htmldog.com/ptg/archives/000049.php

6-
Tables Vs. CSS - A Fight to the Death.
http://www.sitepoint.com/article/tables-vs-css

7-
Atipico: be atypical. Very interesting site showing how up to 75% web
page size reduction can be gained by tableless design. Stats and
percentage based on data gathered when upgrading webpages and websites
by the Atipico company.
http://www.atipico.com.br/en/servicos.asp

8-
Throwing Tables Out the Window. A very bold and amazing article. The
author takes the microsoft.com webpage, then removes all of the tables
and implements CSS design and reduces the original file size of 62%!
"If multiplied out by an average of 38.7 million page views per
day, that 25 KB savings per page could add up to about 924 GB in
bandwidth savings per day, or 329 terabytes per year."
This amazing article has been translated in 8 other languages.
http://www.stopdesign.com/articles/throwing_tables/

9-
Tableless layout with Dreamweaver. DreamWeaver has a 6 parts tutorial on
how to use CSS template instead of table design:
"tables do a pretty lousy job of page construction. Among their
shortcomings is the implied bias of the code towards presentation rather
than structure, the necessity to nest tables in order to achieve the
most basic of layouts, and enough redundant bandwidth-hogging tags to
feed a large family of tag eating monsters for literally a month."
http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout.html

10-
Why should I use CSS layout instead of tables? (alt.html FAQ). Resource
from the newsgroup discussion alt.html FAQ
http://html-faq.com/csspositioning/?csslayout

11-
Ian Hickson, editor of Web Hypertext Application Technology Working
Group Web Application 1.0, commenting on/about table design:
"Using HTML tables and HTML images for layout is a very
deprecated practice and belongs firmly in the land of quirks mode
documents. We should be doing everything in our power to discourage the
use of such practices in standard mode." - Ian Hickson
https://bugzilla.mozilla.org/show_bug.cgi?id=41924#c156

12-
Tableless design resources (All my FAQs).
http://allmyfaqs.com/faq.pl?Tableless_layouts

13-
Why go table free? Table free campain. Excellent. Just excellent!
http://www.workingwith.me.uk/tablefree/why/

14-
Tableless.com List of advantages of tableless design. A company
specializing in updating websites to CSS design. Excellent resource.
http://www.tableless.com.br/en/

15-
Practical CSS Layout Tips, Tricks, & Techniques: Table are dead (this
one may be for advanced users)
http://www.alistapart.com/articles/practicalcss/

16-
Les problémes de la mise en page par tableaux (in French) Tutorial
http://openweb.eu.org/articles/problemes_tableaux/

17-
Habillage de tableaux avec des CSS (in French). Tutorial
http://openweb.eu.org/articles/tableaux_css/

More info:

http://www.gtalbot.org/NvuSection/NvuWebDesignTips/TableVsCSSDesign.html

Gérard

 

[Malte Christensen]

Malte Christensen wrote :



Div, yes. But not span.

Excellent references!

Thanks very much all. I'll get cracking..

Cheers,

Malte

 

[Jonathan N. Little]

Chaddy2222 wrote:

Hmmm.
Maybe take a look at http://www.w3.org
I personally use Tables for layout, mainly because they are easyer,
well kind of.

<snip>

Sorry to rag, but looking at your site that firstly does use tables for
layout that could very easily be handled with CSS and secondly purports
to do web design but your code sir? What are you using to code?

<h2><font size="+2">
Welcome TO
FreeWeb Design Online!! </font></h2><h2></h2><font size="+2">
</font><small><font face="Arial" size="+2"><small>

Let's overlook the attempt to scale the H2 element with the FONT
element, what bothers me is code like the empty H2, FONT elements and
the nonsensical *<small><font face="Arial" size="+2"><small>*

I am sorry to pick on you but some folks can can make an argument for
table layouts in certain situations but offering your site as an example
does not make the case. Even though your index page is small, CSS and
proper markup could reduce the code at least 40% and be maintainable.

 

[Bernhard Sturm]

Chaddy2222 wrote:


<snip>

Sorry to rag, but looking at your site that firstly does use tables for
layout that could very easily be handled with CSS and secondly purports
to do web design but your code sir? What are you using to code?

<h2><font size="+2">
Welcome TO
FreeWeb Design Online!! </font></h2><h2></h2><font size="+2">
</font><small><font face="Arial" size="+2"><small>

Let's overlook the attempt to scale the H2 element with the FONT
element, what bothers me is code like the empty H2, FONT elements and
the nonsensical *<small><font face="Arial" size="+2"><small>*

this is a perfect example to demonstrate that valid HTML (the page we
are discussing here validates as 'valid HTML 4.01'!) does not mean that
the page is semantically valid. The source code above is not structured
and semantically questionable if not completely wrong. I doubt whether
the author of such a source has understood the concept of separating
layout from structure, and hence renders the discussion 'table-layout
vs. CSS-tableless layout' useless.

cheers
bernhard

 

[Malte Christensen]

Jonathan N. Little wrote:

this is a perfect example to demonstrate that valid HTML (the page we
are discussing here validates as 'valid HTML 4.01'!) does not mean that
the page is semantically valid. The source code above is not structured
and semantically questionable if not completely wrong. I doubt whether
the author of such a source has understood the concept of separating
layout from structure, and hence renders the discussion 'table-layout
vs. CSS-tableless layout' useless.

As I said initially, I wasn't out to start a war ;-)

I read all of the responses, went to all the sites, and made up my mind
to use CSS.

The interim results after 3 hours are at www.nmalte.dk. I am very
pleased with the clarity that this design results in, even if probably
everything could be improved. That I am not exactly a graphics designer
is also clear... But heck, writing Java code is more fun anyway

Constructive criticism always welcome. My mail address is on the site.

 

[Malte Christensen]

Constructive criticism always welcome. My mail address is on the site.

Never thought to check in MSIE from Windows (I use Linux). What a pile
of c....

Only viewed pages in Links, Firefox, Opera, Konqueror, Epiphany. Looked
good in all.

Back to the drawingboard and figure out how to MS friendlisize the thing.

 

[Beauregard T. Shagnasty]

I read all of the responses, went to all the sites, and made up my mind
to use CSS.
Oh?

The interim results after 3 hours are at www.nmalte.dk. ...

That page is filled with tables. Hmm, nested tables! I would not want to
be the one required to maintain that layout.

There are also errors in your css:
<http://jigsaw.w3.org/css-validator/validator?uri=http://www.nmalte.dk/>

body {
font-size: 12pt;
Please change that to font-size: 100%;
so that IE users with vision problems can resize it. Never use px or pt
(points are for print media).

This site of mine has two columns, like yours, and there is not a table
in use anywhere, except for tabular data of course.
http://countryrode.com/

 

[Bernhard Sturm]

The interim results after 3 hours are at www.nmalte.dk. I am very
pleased with the clarity that this design results in, even if probably
everything could be improved.

why not dropping the table based layout entirely? you could achieve the
same layout by using <div>s, and your source code would be very easy to
read and maintain.
e.g.:
<div id="header">Header</div>
<div id="main">
<div id="menu">Menu</div>
<div id="main">Main Content</div>
</div>
<div id="footer"></div>

this looks easier than your table construct (at least to me

bernhard

 

[Malte Christensen]

Malte Christensen wrote:




That page is filled with tables. Hmm, nested tables! I would not want to
be the one required to maintain that layout.

There are also errors in your css:
<http://jigsaw.w3.org/css-validator/validator?uri=http://www.nmalte.dk/>

body {
font-size: 12pt;
Please change that to font-size: 100%;
so that IE users with vision problems can resize it. Never use px or pt
(points are for print media).

This site of mine has two columns, like yours, and there is not a table
in use anywhere, except for tabular data of course.
http://countryrode.com/

Had to change it why I try to fix it. The (firefox friendly) version is
this: www.nmalte.dk/index.htmlcss.
That is just plain awful in MSIE, so clearly, I have violated some basic
rules.

 

[Beauregard T. Shagnasty]

Had to change it why I try to fix it. The (firefox friendly) version is
this: www.nmalte.dk/index.htmlcss.

Looks better than the tables version. The code, that is. Visually, it's
the same (in Firefox).

That is just plain awful in MSIE, so clearly, I have violated some basic
rules.

Heh. So it seems!

 

[Malte Christensen]

Malte Christensen wrote:

why not dropping the table based layout entirely? you could achieve the
same layout by using <div>s, and your source code would be very easy to
read and maintain.
e.g.:
<div id="header">Header</div>
<div id="main">
<div id="menu">Menu</div>
<div id="main">Main Content</div>
</div>
<div id="footer"></div>

this looks easier than your table construct (at least to me

bernhard

Very true, and that is what I am attempting. The results using DIVs was
very pleasing (to me) in every browser except MSIE, so I am back to
showing the tables based pages until I fix whatever was wrong.

 

[Jonathan N. Little]

Just one minor poin Malte, take care in your snipping, I did not write
what you have attributed to me in your quoting, Bernard was the author.
(Althought I do agree with his remarks) Code that does pass validation
does not necessarily mean it is valid code!

 

[Michael Winter]

On 08/01/2006 17:02, Bernhard Sturm wrote:

[snip]

<div id="main">
<div id="menu">Menu</div>
<div id="main">Main Content</div>
</div>

Duplicate id attribute values. The inner DIV element should be
identified with a name like 'content'.

Probably just an oversight.

Mike