CSS versus HTML tables

[sinister]

I wanted to spiff up my overly spartan homepage, and started using some CSS
templates I found on a couple of weblogs. It looks fine in my browser (IE
6.0), but it doesn't print right. I tested the blogs, and one definitely
didn't print right.

Surveying the web, my impression is that CSS is very unreliable, because
even updated browsers fail to implement the standards correctly.

So should one just avoid CSS? Or is it OK if used carefully (maybe e.g. us
HTML tables for "global" layout, and CSS for things like font
specifications) .

[David Dorward]

Re: CSS versus HTML tables

sinister wrote:
[color=blue]
> I wanted to spiff up my overly spartan homepage, and started using some
> CSS templates I found on a couple of weblogs. It looks fine in my browser
> (IE 6.0), but it doesn't print right. I tested the blogs, and one
> definitely didn't print right.[/color]

That's a bit vague. Perhaps you would be better off writing a print media
specific style sheet.
[color=blue]
> Surveying the web, my impression is that CSS is very unreliable, because
> even updated browsers fail to implement the standards correctly.[/color]

Their foboils are not too difficult to work around.
[color=blue]
> So should one just avoid CSS?[/color]

No
[color=blue]
> Or is it OK if used carefully (maybe e.g.
> us HTML tables for "global" layout, and CSS for things like font
> specifications) .[/color]

Its preferred that one uses CSS for all aspects of presentation.

--
David Dorward <http://dorward.me.uk/>

[Barry Pearson]

Re: CSS versus HTML tables

sinister wrote:

Are you a troll, or just someone who feels the urge to put your head into a
lion's mouth?
[color=blue]
> I wanted to spiff up my overly spartan homepage, and started using
> some CSS templates I found on a couple of weblogs. It looks fine in
> my browser (IE
> 6.0), but it doesn't print right. I tested the blogs, and one
> definitely didn't print right.
>
> Surveying the web, my impression is that CSS is very unreliable,
> because even updated browsers fail to implement the standards
> correctly.[/color]

Distinguish between CSS used for article styling, and CSS used for page
layout. The former is sound and valuable. The latter is an incompetent system.

"Separation of concerns"

http://www.barry.pearson.name/articles/content_presentation/

[color=blue]
> So should one just avoid CSS? Or is it OK if used carefully (maybe
> e.g. us HTML tables for "global" layout, and CSS for things like font
> specifications) .[/color]

"Layout tables considered valuable"

http://www.barry.pearson.name/articles/layout_tables/

"Reflection s on CSS Positioning"

http://www.barry.pearson.name/articles/layout_tables/css_positioning.htm

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[sinister]

Re: CSS versus HTML tables


"David Dorward" <dorward@yahoo. com> wrote in message
news:c0j4qp$5to $1$8302bc10@new s.demon.co.uk.. .[color=blue]
> sinister wrote:
>[color=green]
> > I wanted to spiff up my overly spartan homepage, and started using some
> > CSS templates I found on a couple of weblogs. It looks fine in my[/color][/color]
browser[color=blue][color=green]
> > (IE 6.0), but it doesn't print right. I tested the blogs, and one
> > definitely didn't print right.[/color]
>
> That's a bit vague. Perhaps you would be better off writing a print media
> specific style sheet.
>[color=green]
> > Surveying the web, my impression is that CSS is very unreliable, because
> > even updated browsers fail to implement the standards correctly.[/color]
>
> Their foboils are not too difficult to work around.[/color]

Hard to see how that's true, given that different browsers break the
standard in different places.
[color=blue]
>[color=green]
> > So should one just avoid CSS?[/color]
>
> No
>[color=green]
> > Or is it OK if used carefully (maybe e.g.
> > us HTML tables for "global" layout, and CSS for things like font
> > specifications) .[/color]
>
> Its preferred that one uses CSS for all aspects of presentation.[/color]

Because...?

[color=blue]
>
> --
> David Dorward <http://dorward.me.uk/>[/color]

[sinister]

Re: CSS versus HTML tables


"Barry Pearson" <news@childsupp ortanalysis.co. uk> wrote in message
news:lF8Xb.1184 5$q%6.4162181@n ewsfep2-win.server.ntli .net...[color=blue]
> sinister wrote:
>
> Are you a troll, or just someone who feels the urge to put your head into[/color]
a[color=blue]
> lion's mouth?[/color]

Hardly a troll. There's all this hoo-haw about CSS. Then I find that a
pretty simple CSS layout, one used by a blog set up with a popular templage
(Movable Type), doesn't print correctly using a very popular browser (IE
6.0). Then I do a websearch, and there's long long long lists of the
different ways different browsers break the standard. Then I post to
USENET.
[color=blue]
>[color=green]
> > I wanted to spiff up my overly spartan homepage, and started using
> > some CSS templates I found on a couple of weblogs. It looks fine in
> > my browser (IE
> > 6.0), but it doesn't print right. I tested the blogs, and one
> > definitely didn't print right.
> >
> > Surveying the web, my impression is that CSS is very unreliable,
> > because even updated browsers fail to implement the standards
> > correctly.[/color]
>
> Distinguish between CSS used for article styling, and CSS used for page
> layout. The former is sound and valuable. The latter is an incompetent[/color]
system.

This was my suspicion.
[color=blue]
>
> "Separation of concerns"
> http://www.barry.pearson.name/articl..._presentation/
>[color=green]
> > So should one just avoid CSS? Or is it OK if used carefully (maybe
> > e.g. us HTML tables for "global" layout, and CSS for things like font
> > specifications) .[/color]
>
> "Layout tables considered valuable"
> http://www.barry.pearson.name/articles/layout_tables/
>
> "Reflection s on CSS Positioning"
> http://www.barry.pearson.name/articl...ositioning.htm[/color]

Thanks for the cites; I'll check them out.
[color=blue]
>
> --
> Barry Pearson
> http://www.Barry.Pearson.name/photography/
> http://www.BirdsAndAnimals.info/
> http://www.ChildSupportAnalysis.co.uk/
>
>[/color]

[David Dorward]

Re: CSS versus HTML tables

sinister wrote:
[color=blue][color=green]
>> Its preferred that one uses CSS for all aspects of presentation.[/color]
>
> Because...?[/color]

Becuase it needs less bandwidth, its easier to maintain, it presents data to
search engines in a way that they are better able to understand, becuase
you can have different layouts for different media types, becuase it can do
things you can't do by lying with tables...

--
David Dorward <http://dorward.me.uk/>

[sinister]

Re: CSS versus HTML tables


"David Dorward" <dorward@yahoo. com> wrote in message
news:c0j4qp$5to $1$8302bc10@new s.demon.co.uk.. .[color=blue]
> sinister wrote:
>[color=green]
> > I wanted to spiff up my overly spartan homepage, and started using some
> > CSS templates I found on a couple of weblogs. It looks fine in my[/color][/color]
browser[color=blue][color=green]
> > (IE 6.0), but it doesn't print right. I tested the blogs, and one
> > definitely didn't print right.[/color]
>
> That's a bit vague. Perhaps you would be better off writing a print media
> specific style sheet.[/color]

Here's an example. This displays fine in IE 6.0, but when I go to print
preview, "content" is reduced to one word per line.

---------------begin html file-----------------------------

HTML file:
<html>
<head>
<link rel="stylesheet " href="tmp2.css" type="text/css" />
<title>Blank</title>
</head>

<body>

<div id="content">
<p>
Lots of content. Lots of content.
Lots of content. Lots of content.
Lots of content. Lots of content.
Lots of content. Lots of content.
....
....
Lots of content. Lots of content.
Lots of content. Lots of content.
Lots of content. Lots of content.
Lots of content. Lots of content.
</p>

</div>

<div id="links">
Some links.
</div>
</body>
</html>

-------------end of html file-----------------------

-------------begin CSS file------------------------

body {
margin:0px 0px 20px 0px;
background:#FFF ;
}

#content {
position:absolu te;
background:#FFF ;
margin-right:20px;
margin-left:225px;
margin-bottom:20px;
border:1px solid #FFF;
width: 70%;
padding:15px;
}
#links {
padding:15px;
border:1px solid #FFF;
width:200px;
background:#CCC ;
}


-------------end CSS file------------------------


[snip]

[sinister]

Re: CSS versus HTML tables


"David Dorward" <dorward@yahoo. com> wrote in message
news:c0j7jn$akv $1$8302bc10@new s.demon.co.uk.. .[color=blue]
> sinister wrote:
>[color=green][color=darkred]
> >> Its preferred that one uses CSS for all aspects of presentation.[/color]
> >
> > Because...?[/color]
>
> Becuase it needs less bandwidth, its easier to maintain, it presents data[/color]
to[color=blue]
> search engines in a way that they are better able to understand, becuase
> you can have different layouts for different media types, becuase it can[/color]
do[color=blue]
> things you can't do by lying with tables...[/color]

But if browsers don't present it correctly...?
[color=blue]
>
> --
> David Dorward <http://dorward.me.uk/>[/color]

[Barry Pearson]

Re: CSS versus HTML tables

sinister wrote:[color=blue]
> "Barry Pearson" <news@childsupp ortanalysis.co. uk> wrote in message
> news:lF8Xb.1184 5$q%6.4162181@n ewsfep2-win.server.ntli .net...[color=green]
>> sinister wrote:
>>
>> Are you a troll, or just someone who feels the urge to put your head
>> into a lion's mouth?[/color]
>
> Hardly a troll. There's all this hoo-haw about CSS. Then I find
> that a pretty simple CSS layout, one used by a blog set up with a
> popular templage (Movable Type), doesn't print correctly using a very
> popular browser (IE
> 6.0). Then I do a websearch, and there's long long long lists of the
> different ways different browsers break the standard. Then I post to
> USENET.[/color]
[snip]

Chuckle! OK.

I find some of the arguments a bit strange. There isn't one technique that has
been demonstrated to be capable of handing all the desired layouts satisfied
by other techniques. What we have is a set of imperfect techniques, none of
which was ever designed to do what we really wanted.

Perhaps we should just put "normal flow", Frames, iFrames, and objects, (and
perhaps fixed positioning), into a category "interestin g, but not what we
really wanted":
"Variations on the 5-box 3-column layout"

http://www.barry.pearson.name/articles/layout_5_3/

Then we should recognise 3 different page layout techniques, each with
advantages and disadvantages:
1. Layout tables.
2. CSS "float".
3. CSS "absolute positioning".

None of these can be replaced even by the other 2 of them. We should keep all
of them in our toolkits:
"Layout tables considered valuable"

http://www.barry.pearson.name/articles/layout_tables/

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[David Dorward]

Re: CSS versus HTML tables

sinister wrote:[color=blue]
> But if browsers don't present it correctly...?[/color]

As I said - browser foibles are not very difficult to work around.

--
David Dorward <http://dorward.me.uk/>

[Barry Pearson]

Re: CSS versus HTML tables

David Dorward wrote:[color=blue]
> sinister wrote:
>[color=green][color=darkred]
>>> Its preferred that one uses CSS for all aspects of presentation.[/color]
>>
>> Because...?[/color]
>
> Becuase it needs less bandwidth, its easier to maintain, it presents
> data to search engines in a way that they are better able to
> understand, becuase you can have different layouts for different
> media types, becuase it can do things you can't do by lying with
> tables...[/color]

Let's examine those statements:

"Becuase it needs less bandwidth"

My evaluation is that using a simple layout-table may add about 25 bytes per
block being positioned compared with alternatives. So a 3-column design, with
about 100 KB of content, may be about 75 bytes bigger if a layout-table is
used. Big deal!

"Variations on the 5-box 3-column layout"

http://www.barry.pearson.name/articles/layout_5_3/

"it presents data to search engines in a way that they are better able to
understand"

My understanding is that search engines work on a linrearised rendition. Soem
table-formats are actually better than some CSS techniques, especially when
"floats" are used.

"becuase you can have different layouts for different media types"

Perhaps. But how many CSS-P layouts go this far? And it is obvious from the
way that Opera handles "small screen mode" that table-layout can also be
handled on other media types.

"becuase it can do things you can't do by lying with tables"

Tables are telling the truth! Right from the start, tables were proposed for
laying out complex material in rows and columns.

"A brief history of tables"

http://www.barry.pearson.name/articles/layout_tables/history.htm

Layout tables simply expect compliance with standards - not distortion. We
should recognise 3 different page layout techniques, each with advantages and
disadvantages:
1. Layout tables.
2. CSS "float".
3. CSS "absolute positioning".

All of the 3 techniques above can do things that the others can't. Or, at
least, things that the others have not yet been proved to do. The web is a
medium capable of the superset of "1", "2", and "3", above, plus combinations
of these.

--
Barry Pearson

http://www.Barry.Pearson.name/photography/

http://www.BirdsAndAnimals.info/

http://www.ChildSupportAnalysis.co.uk/

[David Dorward]

Re: CSS versus HTML tables

sinister wrote:
[color=blue]
> #content {
> position:absolu te;
> background:#FFF ;
> margin-right:20px;
> margin-left:225px;
> margin-bottom:20px;
> border:1px solid #FFF;
> width: 70%;
> padding:15px;
> }[/color]

Position: absolute without top or bottom and without left or right being
specified is a recipe for disaster (and doesn't really make sense anyway).

--
David Dorward <http://dorward.me.uk/>

[sinister]

Re: CSS versus HTML tables


"David Dorward" <dorward@yahoo. com> wrote in message
news:c0jdfb$ij3 $3$8302bc10@new s.demon.co.uk.. .[color=blue]
> sinister wrote:
>[color=green]
> > #content {
> > position:absolu te;
> > background:#FFF ;
> > margin-right:20px;
> > margin-left:225px;
> > margin-bottom:20px;
> > border:1px solid #FFF;
> > width: 70%;
> > padding:15px;
> > }[/color]
>
> Position: absolute without top or bottom and without left or right being
> specified is a recipe for disaster (and doesn't really make sense anyway).[/color]

I tried this:
body {
margin:0px 0px 20px 0px;
background:#FFF ;
}

#content {
position:absolu te; top: 0 px; left: 0 px;
background:#FFF ;
margin-right:20px;
margin-left:225px;
margin-bottom:20px;
border:1px solid #FFF;
width: 70%;
padding:15px;
}
#links {
padding:15px;
border:1px solid #FFF;
width:200px;
background:#CCC ;
}

That had the same problem.
[color=blue]
>
> --
> David Dorward <http://dorward.me.uk/>[/color]

[David Dorward]

Re: CSS versus HTML tables

Barry Pearson wrote:
[color=blue]
> design, with about 100 KB of content.[/color]

100K? Almost three and a half times the general recommended maximum size of
a page[1] _including_ cacheable external resources.
[color=blue]
> "it presents data to search engines in a way that they are better able to
> understand"
>
> My understanding is that search engines work on a linrearised rendition.[/color]

They do, that doesn't mean that CSS isn't better. My experience[2] is that
sites using CSS for layout tend to do better in search engine results.
[color=blue]
> Soem table-formats are actually better than some CSS techniques,
> especially when "floats" are used.[/color]

Evidence?
[color=blue]
> "because you can have different layouts for different media types"
>
> Perhaps. But how many CSS-P layouts go this far?[/color]

So because not many people use a feature, that feature isn't an advantage?
[color=blue]
> And it is obvious from the way that Opera handles "small screen mode" that
> table-layout can also be handled on other media types.[/color]

It takes more effort and involves guesswork. This is suboptimal. Such
guesswork also fails to allow for such factors as not displaying the site
navigation controls for a printout.
[color=blue]
> "because it can do things you can't do by lying with tables"
>
> Tables are telling the truth! Right from the start, tables were proposed
> for laying out complex material in rows and columns.
>
> "A brief history of tables"
> http://www.barry.pearson.name/articl...es/history.htm[/color]

Then lets add some experience and we get to 1999[3] and the HTML 4.01
Specification.

"Tables should not be used purely as a means to layout document content"

http://www.w3.org/TR/html4/struct/tables.html

[color=blue]
> Layout tables simply expect compliance with standards - not distortion.[/color]

No they don't. Layout tables expect tabular data to be presented to the user
in a fashion approximating the means by which the page author's browser
presents that data. They can not expect compliance with standards because
the standard does not specify how tables should be presented to the user
(it gives examples of how it *might* be presented).

[1] Yes, there are atypical sites such as those which are there to present
an image or video file to the user which have to exceed this because their
function is to present more then that amount of data to the user.

[2] Yes, this is annacdotal evidence, just about everything relating to
search engine rankings is becuase search engines don't give out their
secret formula to be exploited.

[3] Almost half a decade old now, doesn't time fly?

--
David Dorward <http://dorward.me.uk/>

[Christoph Paeper]

Re: CSS versus HTML tables

*sinister*:[color=blue]
>
> position:absolu te; top: 0 px; left: 0 px;[/color]

Are these space intentional? Because they're wrong.

--
Useless Fact #6:
In most advertisements, including newspapers, the time displayed on a watch is
10:10.