Layout using CSS vs. tables
Malte Christensen
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
Jonathan N. Little
Here is an example to illustrate the advantage of separating
presentation from markup
mezzoblue § css Zen Garden — Design
Listhttp://www.mezzoblue.com/zengarden/alldesigns/
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Greg N.
> Here is an example to illustrate the advantage of separating
> presentation from markup
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?
--
Gregor's Motorradreisen:
http://hothaus.de/greg-tour/
Jonathan N. Little
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
--
www.daszeichen.ch
remove nixspam to reply
----== Posted via Newsfeeds.Com - Unlimited-Unrestricted-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! 120,000+ Newsgroups
----= East and West-Coast Server Farms - Total Privacy via Encryption =----
kchayka
> Jonathan N. Little wrote:
>>
>
> 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.
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
Gérard Talbot
> 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
--
remove blah to email me
Chaddy2222
Malte Christensen 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.
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.
--
Regards Chad. http://freewebdesign.cjb.cc
Malte Christensen
> 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.
Excellent references!
Thanks very much all. I'll get cracking..
Cheers,
Malte
Jonathan N. Little
<snip>
> Hmmm.
> Maybe take a look at http://www.w3.org
> I personally use Tables for layout, mainly because they are easyer,
> well kind of.
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>
>
>> 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>*
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
Malte Christensen
> Jonathan N. Little wrote:
>
> 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%3A%2F%2Fwww.nmalte.dk%2F>
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/
--
-bts
-Warning: I brake for lawn deer
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 :-)
Malte Christensen
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! :-)
Jonathan N. Little
> Bernhard Sturm wrote:
>
>> 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.
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!
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.
Michael Winter
[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
--
Michael Winter
Prefix subject with [News] before replying by e-mail.
Michael Winter
> The [rendering] 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.
Start by reviewing the validator results that bts posted[1] (and
implement his other remark, too). A hash (#) is not a comment delimiter
in CSS. Only C-style (/* ... */) delimiters are recognised.
As you're probably aware, there are still improvements that can be made
to your markup. A few include:
- Remove in-line style declarations. Use semantic elements
(when available) and appropriately-named classes.
- Your 'subheader' DIV elements should be replaced by header
elements (H2). Your current header should be level-one (H1).
- Values for id and class attributes should convey meaning.
#footerN (where N is a number) doesn't qualify. In order,
they should be along the lines of 'translations', 'address',
'contact-information', and 'bank-account' (assuming I
understood them).
It's a good first step, though.
As for the Danish (and British) flag:
<http://www.cs.tut.fi/~jkorpela/flags.html>
Mike
[1] <6zbxosu51gns$.1ahqkfiqvuj0k$.d...@40tude.net>
Bernhard Sturm
>
> Duplicate id attribute values. The inner DIV element should be
> identified with a name like 'content'.
>
> Probably just an oversight.
arrrgghh.. you are right... and 'content' was indeed my intention. I
also forgot to add a footer dummy content.. thanks for mentioning it!
Gérard Talbot
> Bernhard Sturm wrote:
>
>> 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 absolutely agree with what J. Little writes exactly here. Your
webpage, Malte, is very poorly structured, is semantically wrong and
does not show an example of good, sound webpage design. Using table to
layout elements in a webpage when there is no tabular data involved is
bad semantic to begin with, even though it might be using valid markup code.
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 ;-)
We're not at war either: we're talking, discussing in a newsgroup
discussion without making insults, bashing, personal/ad hominem remarks,
you know.
> I read all of the responses, went to all the sites, and made up my mind
> to use CSS.
Which sites did you go?
> 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.
You're using nested tables at nmalte.dk site! It's even worse than plain
table use for layout. Converting such site into a CSS flexible/fluid 2
column design would be easy.
That I am not exactly a graphics designer
> is also clear...
We're not either: what's the point anyway?
But heck, writing Java code is more fun anyway :-)
>
> Constructive criticism always welcome. My mail address is on the site.
http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources.html#CSSWebpageTemplates
Stan McCann
news:42d6fbF...@uni-berlin.de:
> Malte Christensen wrote :
>> Bernhard Sturm wrote:
>>
>>> 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.
This is something that I warn my students about, especially the older
folk as we grew up in a paper world and it can be very difficult to
achieve proper seperation for us.
This isn't an excuse, just a warning that us older folk must be more
conscious of our tendencies. The younger people that have grown up
with the computer screen medium better understand it's flexibility
making it a bit easier to look at something and immediately think of it
as what it is rather than how it looks.
>> Constructive criticism always welcome. My mail address is on the
>> site.
>
> http://www.gtalbot.org/NvuSection/NvuWebDesignTips/WebDesignResources
> .html#CSSWebpageTemplates
Nice work Gérard. I'll share that link with my students if you don't
mind.
--
Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
Webmaster/Computer Center Manager, NMSU at Alamogordo
http://alamo.nmsu.edu/ There are 10 kinds of people.
Those that understand binary and those that don't.
Malte Christensen
are the OLD ones put back on why I figure out why the NEW ones won't
show in MSIE.
Michael Winter
> Malte Christensen wrote :
>
>> Bernhard Sturm wrote:
>>
>>> 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 absolutely agree with what J. Little writes exactly here. Your
> webpage, Malte, [...]
You might want to look at what you quoted again more carefully, or look
back through the thread. Jonathan didn't write that paragraph, Bernhard
did and it was in response to Chaddy2222, not the OP.
[M. Christensen:]
>> 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.
>
> You're using nested tables at nmalte.dk site!
Again, if you check the thread, it seems that the site underwent change
during the discussion: a revised Strict version was uploaded, but
because it rendered badly in IE, is was moved to
<http://www.nmalte.dk/index.htmlcss>.
Though this latter document does need improvements, and I'm sure your
post was, in hindsight, a simple misunderstanding on your part, I think
you may owe the OP an apology.
To the OP: I forgot to add in my other post that your 'About Me' section
is littered with self-closing paragraphs (<p/>). These are legal in both
HTML and XHTML (though with very different meaning in the former), so
they won't show up as errors when validating, but should be removed or
corrected. I suspect you meant to add actual paragraphs to contain the
content after each 'heading'.
Mike
Malte Christensen
>
> To the OP: I forgot to add in my other post that your 'About Me' section
> is littered with self-closing paragraphs (<p/>). These are legal in both
> HTML and XHTML (though with very different meaning in the former), so
> they won't show up as errors when validating, but should be removed or
> corrected. I suspect you meant to add actual paragraphs to contain the
> content after each 'heading'.
>
> Mike
>
Again, very good advice. Thank you very much.
Can of worms, this CSS stuff, but I'll get it sorted.
Cheers,
Malte
Nije Nego
"Chaddy2222" <rockra...@yahoo.com.au> wrote in message
news:1136634293....@g43g2000cwa.googlegroups.com...
:
: I personally use Tables for layout, mainly because they are easyer,
: well kind of.
:
You should reply:
"... because I don't know how to use CSS well..." but than you would not
reply where you do not know much about.
Neredbojias
Remember this: whatever is "wrong" may not really be _wrong_; it might
simply be a case of mis-rendering in the poorly-compliant IE.
Also, I have no qualms about using tables over "esoteric" css layouts (-
which usually don't work in all browsers, anyway,) but have found that
most of the time simple css will suffice for the majority of designs
even considering the IE bugs.
--
Neredbojias
Contrary to popular belief, it is believable.