«

Hi,

After I designed my page (using tables), while I was surfing the web I
considered a professional looking web site which had been used DIV tags
instead of tables, with many css classes. Designing in div layers is
much more time consuming and more skillful. so there should be a good
reason for using table-less layout. I searched the group and I found
some topics. but I still have a few Questions as follows:

- I've read in a post (2003) "using tables to display tabular data is
right but never use them to layout structuring." but why?

- As I've got curious I visited some famous websites and I checked the
code. for example fifaworldcup.com uses tables for layout, but css
<div>, <ul> and <li> for header menu items. so combined both of them. I
mixed up! if div is good for menu how it's not perfect for the other
parts?

- Which one is perfect for search engines ranking? Does it affect?

- Another thing was that they had been used 10 tables with 5 rows each,
while they could put all tabular data in a single table with 50 rows.
does it have any benefit (using several tables instead of one I mean)?


Thanks a lot!

Habib

Habib wrote:

> After I designed my page (using tables), while I was surfing the web I
> considered a professional looking web site which had been used DIV tags
> instead of tables, with many css classes. Designing in div layers is
> much more time consuming and more skillful.

Not really. Any difference is exaggerated by there being a lot of
people who know how to hack tables into acting like layout tools, and
fewer who know CSS well enough.

> - I've read in a post (2003) "using tables to display tabular data is
> right but never use them to layout structuring." but why?

1. Claming a relationship between bits of data where no such
relationship exists is a lie.

2. Not all browsers present data visually

> - As I've got curious I visited some famous websites and I checked the
> code. for example fifaworldcup.com uses tables for layout, but css
> <div>, <ul> and <li> for header menu items. so combined both of them. I
> mixed up! if div is good for menu how it's not perfect for the other
> parts?

See above

> - Which one is perfect for search engines ranking? Does it affect?

In theory, semantic markup is better food for search engines.

In practise, search engines don't make public their algorithums so its
hard to say.

> - Another thing was that they had been used 10 tables with 5 rows each,
> while they could put all tabular data in a single table with 50 rows.
> does it have any benefit (using several tables instead of one I mean)?

Use whatever markup best describes the data. Any rendering speedups
caused by chopping a table up could likely be gained through
table-layout: fixed as well.

On Mon, 19 Jun 2006 03:11:12 -0700, Habib wrote:

> After I designed my page (using tables), while I was surfing the web I
> considered a professional looking web site which had been used DIV tags
> instead of tables, with many css classes. Designing in div layers is
> much more time consuming and more skillful.

False. Popular misconception that designing layout with CSS is harder
than tables. It is not harder, it is just "different" and requires a
different approach.


> so there should be a good
> reason for using table-less layout. I searched the group and I found
> some topics. but I still have a few Questions as follows:
>
> - I've read in a post (2003) "using tables to display tabular data is
> right but never use them to layout structuring." but why?
>

Well, "never" is probably a bit over-zealous. Take the saying, "never say
never" for example. "Never" is always false in a true-or-false quiz. etc.

So change "never" to "as much as possible, try really really hard to not
use"

As far as the "proper" use of tables, well, tables are for tables. If you
have data that needs to be presented as a table to retain its semantic
meaning, then use a table. If you are using a table merely to position
elements on a page, then use CSS layout instead.


> - As I've got curious I visited some famous websites and I checked the
> code. for example fifaworldcup.com uses tables for layout, but css
> <div>, <ul> and <li> for header menu items. so combined both of them. I
> mixed up! if div is good for menu how it's not perfect for the other
> parts?

Just because a website is "famous" does not mean they do things
"correctly" as far as their HTML markup goes! That is another big
misconception. "Well, <big, huge, popular website> codes HTML and CSS
like this! It *must* be correct!"

High quality examples of CSS layout in large corporate or "famous"
websites are very hard to find. I think this stems from the "anyone can be
a web designer/developer/programmer" mentality that arose through the
'90s. "Oh! I have an HTML book and a computer! I am now a professional web
developer/designer"

Unfortunately, web browsers have been designed to be highly flexible in
their HTML rendering, which, IMO, only has promoted poor HTML coding
practices over the years.

>
> - Which one is perfect for search engines ranking? Does it affect?

Search engine ranking should not be affected too much by tables vs css
layout, although one could argue that a smart CSS layout will only improve
your readability to search engines and thus improve your ranking.

>
> - Another thing was that they had been used 10 tables with 5 rows each,
> while they could put all tabular data in a single table with 50 rows.
> does it have any benefit (using several tables instead of one I mean)?

Maybe they are retarded? Maybe they have a phobia of numbers larger than
10? Maybe they wanted to have header rows visible no matter where you
were through the table? Maybe their brother, Louie, used a Timex Sinclair
to code the HTML, the Sinclair noted for being unable to use numbers
larger than 10? Maybe they have *extremely* short term memory loss and
every time they got to the tenth row they had forgotten that they had
already done ten rows and they restarted the table? Maybe in Germany,
host of the World Cup, the number ten is revered as a holy symbol of World
Cup Soccer perfection?

allright, later...
--
JDS

In article < .com>,
"Habib" <> wrote:

> Hi,
>
> After I designed my page (using tables), while I was surfing the web I
> considered a professional looking web site which had been used DIV tags
> instead of tables, with many css classes. Designing in div layers is
> much more time consuming and more skillful. so there should be a good
> reason for using table-less layout. I searched the group and I found
> some topics. but I still have a few Questions as follows:
>
> - I've read in a post (2003) "using tables to display tabular data is
> right but never use them to layout structuring." but why?
> - As I've got curious I visited some famous websites and I checked the
> code. for example fifaworldcup.com uses tables for layout, but css
> <div>, <ul> and <li> for header menu items. so combined both of them. I
> mixed up! if div is good for menu how it's not perfect for the other
> parts?
>
> - Which one is perfect for search engines ranking? Does it affect?
>
> - Another thing was that they had been used 10 tables with 5 rows each,
> while they could put all tabular data in a single table with 50 rows.
> does it have any benefit (using several tables instead of one I mean)?

Hullo Habib,
This same topic was discussed over in
comp.infosystems.www.authoring.html just last week. The thread is called
"tablles vs css". Here's a link:

http://groups.google.com/group/comp....ng.html/browse
_frm/thread/58f30d17421a21a6/1eca2bfbf251215d?#1eca2bfbf251215d

--
Philip
http://NikitaTheSpider.com/
Bulk HTML validation, link checking and more

Gazing into my crystal ball I observed "Habib" <>
writing in news: oups.com:

> Hi,
>
> After I designed my page (using tables), while I was surfing the web I
> considered a professional looking web site which had been used DIV tags
> instead of tables, with many css classes. Designing in div layers is
> much more time consuming and more skillful. so there should be a good
> reason for using table-less layout. I searched the group and I found
> some topics. but I still have a few Questions as follows:
>
> - I've read in a post (2003) "using tables to display tabular data is
> right but never use them to layout structuring." but why?
>
> - As I've got curious I visited some famous websites and I checked the
> code. for example fifaworldcup.com uses tables for layout, but css
><div>, <ul> and <li> for header menu items. so combined both of them. I
> mixed up! if div is good for menu how it's not perfect for the other
> parts?
>
> - Which one is perfect for search engines ranking? Does it affect?
>
> - Another thing was that they had been used 10 tables with 5 rows each,
> while they could put all tabular data in a single table with 50 rows.
> does it have any benefit (using several tables instead of one I mean)?
>
>
> Thanks a lot!
>
> Habib
>

In addition to what others have said, don't get into the trap of
replacing bloated tables with bloated divs. Use the right tool for the
job. If it's a list, like a menu, then use an unordered list. If it's a
heading, use a heading. If it's a paragraph, use a paragraph. If it's
tabular data, then use a table. If you want to make a division, use a
div, if you want to style a small piece of markup a certain way, use a
span.

Remember that the WWW is not a piece of paper and that you are not in
control of what the user sees, hears, etc. All you can do is suggest.
The more rigid you become, the more your design will break.


--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

Philip wrote:

> This same topic was discussed over in
> comp.infosystems.www.authoring.html just last week.
> The thread is called "tablles vs css". Here's a link:
>
> http://groups.google.com/group/comp....ca2bfbf251215d


Hi Philip

IMHO, that thread is not convincing.

Regarding the specific advantages of a CSS-based layout, over a
tables-based one, by my count, of the 16 replies (excluding the OP's
own reply) :

- 8 replies did not cite *any* specific advantages; (#s 2, 5, 6, 11,
12, 13, 16, 17 below)

- 3 replies *disagreed* that tables should never be used for layout (7,
10, 15), and

- 5 replies cited a total of only 3 specific advantages: power &
capability; ease of maintenance; and compliance with current/W3C
standards. (3, 8, 9, 14, 1

My own site uses tables for page-layout. I do intend to change it to
use CSS, when I redesign the site to move the content to the middle
column of the screen.

However, I also use tables in various places within the pages, to
lay-out certain text and graphics. I'm not convinced that I should go
to the trouble of changing all those. They are *not* a maintenance
problem, and I'm not convinced that the CSS alternative would be any
simpler.

Here's a very simple example: http://102673.atspace.com/tables.htm
What would be a specific, real-world benefit of changing that table to
DIV's + CSS instead?

"It seperates content from presentation" is not - in and of itself - a
benefit. If it was, then, I could equally well say that "tables should
*always* be used for layout", because "this keeps content and
presentation together"!

Any thoughts?

TC (MVP MSAccess)
http://tc2.atspace.com



[thread analysis follows]

=== 2: Chaddy2222 ===
No advantages cited.


=== 3: Philip Semanchuk ===
One specific advantage cited:
- it's much more capable and sophisticated than a tables-based layout.


=== 4: OP ===
(N/A)


=== 5: Sherm Pendley ===
No advantages cited.


=== 6: axlq ===
No advantages cited.


=== 7: Sherm Pendley ===
DISAGREES that tables should never be used for layout:
"if you intend to introduce divs that are used purely for
presentational purposes and have no semantic meaning, then I'd say
there's no point. Misused divs are neither better nor worse than
misused tables."


=== 8: Jim Moe ===
One specific advantage cited:
"Ultimately the best reason to learning HTML+CSS is maintenance. It
truly is a lot easier to make even major changes in appearance when a
site uses HTML+CSS as they are intended.


=== 9: Jack ===
Says that "separating content and presentation is a benefit of using
CSS" - but doesn't say why. Let's be kind, and assume that he said:
"... which makes it easier to maintain and enhance". One specific
advantage.


=== 10: Michael Vilain ===
DISAGREES that tables should never be used for layout:
"if I want a set of three gifs next to each other with caption text
underneath, it's faster and easier (and works on more browsers) to use
a table"


=== 11: Richard Gration ===
No advantages cited.


=== 12: Matt Silberstein ===
No advantages cited.


=== 13: Jim Moe ===
No advantages cited.


=== 14: mens libertina ===
Three specific advantages cited:
- "it is what most(?) people are doing these days". (weak)
- "it is *the* accepted standard that is put forth by the W3C, and as
such, it marks you as a professional."
- "it makes maintainence easier by focusing your design changes to one
page (the style sheet) rather than every single page."


=== 15: Chris F.A. Johnson ===
DISAGREES that tables should never be used for layout:
- There are instances where tables are the better way to accomplish
one's design.
- The ability of tables to adapt themselves to whatever width is
required makes them often indispensible.
- Many CSS hacks make the "umaintainable" tables look like child's
play. [ie. the table might be *easier* to maintain that a CSS
equivalent]


=== 16: Andy Dingley ===
No advantages cited.


=== 17: Chris F.A. Johnson ===
No advantages cited.


=== 18: mens libertina ===
One (weak) advantage cited:
"you should know what is currently popular if you want to be accepted
as a knowledgeable person"
[Knowing what is currently popular, is not an argument for *using* it!]


(END)

TC wrote:
> Philip wrote:
>
>> This same topic was discussed over in
>> comp.infosystems.www.authoring.html just last week.
>> The thread is called "tablles vs css". Here's a link:
>>
>> http://groups.google.com/group/comp....ca2bfbf251215d
>
>
> Hi Philip
>
> IMHO, that thread is not convincing.
>
> Regarding the specific advantages of a CSS-based layout, over a
> tables-based one, by my count, of the 16 replies (excluding the OP's
> own reply) :

Briefly, 'cuz this stinks of troll.

1) Lighter code. *If* done properly HTML markup with attached CSS
stylesheets can significantly reduce the amount of actually code because
you do not have to infuse all the markup with presentational markup and
attributes that are repeated over and over for each table cell.

2) Flexibility. If you wish to change the styling or even presentational
layouts say move the navigation from the left to the top or right or
whatever. If in a table cell the whole page must be changed to move the
cell content whereas if the navigation was in the list it cam be
floated, put inline or block simply by change the ONE stylesheet. The
former may require calling every page on the site.

3) Accessibility. With stylesheets and tableless designs your can have
alternated stylesheets for different browsers, and viewer. Example, I
use a flyout CSS menu. Some folks with disabilities may have
difficulties in working the menu, your can offer a alternate sheet the
make the menu a static indented list that is easier to traverse. Or have
a very pretty site with backgrounds and stylish insets and sidebars you
could have the simpler alternate stylesheet the simplifies the layout,
upset the font-size and increases the contrast for low-vision access.

3a) I use on a practical note, a print stylesheet that does things like
remove decorative elements, and navbars, underlines on links(makes no
sense for a printed documents), fancy formatting and restricted margins.
Damn I hate website that have stupid table layouts that make 2 pages
of information balloon to 8 because of the content is squished in a
narrow column and other useful room is wasted on navbar cell and advert
banners...

4) Maintainability. With a different mindset with separation of markup
and stylesheet many times may only need to change one or the other. If
you use the cascade in CSS, and not table layout with umpteen divs spans
classes and use broader classes and use selectors you can achieve very
fine granularity in your styling without having to burden your markup
with "container-itis" or "class-itis". Nothing can be worse then
reworking a website with nesting table layouts, rowspans, colspans,
image slices, etc...



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

In article <. com>,
"TC" <> wrote:

> Philip wrote:
>
> > This same topic was discussed over in
> > comp.infosystems.www.authoring.html just last week.
> > The thread is called "tablles vs css". Here's a link:
> >
> > http://groups.google.com/group/comp.....html/browse_f
> > rm/thread/58f30d17421a21a6/1eca2bfbf251215d?#1eca2bfbf251215d
>
>
> Hi Philip
>
> IMHO, that thread is not convincing.

Hi TC,
What's wrong with a smorgasbord of opinions? =)

> Regarding the specific advantages of a CSS-based layout, over a
> tables-based one, by my count, of the 16 replies (excluding the OP's
> own reply) :
>
> - 8 replies did not cite *any* specific advantages; (#s 2, 5, 6, 11,
> 12, 13, 16, 17 below)
>
> - 3 replies *disagreed* that tables should never be used for layout (7,
> 10, 15), and
>
> - 5 replies cited a total of only 3 specific advantages: power &
> capability; ease of maintenance; and compliance with current/W3C
> standards. (3, 8, 9, 14, 1

Interesting (and thorough) anaylsis. Some of the no-advantages-cited
posts were more meta-comments than anything, but I get your point.
Again, I think it is healthy to be exposed to a number of different
viewpoints.

> My own site uses tables for page-layout. I do intend to change it to
> use CSS, when I redesign the site to move the content to the middle
> column of the screen.
>
> However, I also use tables in various places within the pages, to
> lay-out certain text and graphics. I'm not convinced that I should go
> to the trouble of changing all those. They are *not* a maintenance
> problem, and I'm not convinced that the CSS alternative would be any
> simpler.
>
> Here's a very simple example: http://102673.atspace.com/tables.htm
> What would be a specific, real-world benefit of changing that table to
> DIV's + CSS instead?

Well, I think the recommendation would be to change it to UL/LIs rather
than just generic DIVs. One advantage of this approach would be that you
could change the list to a numbered list by just changing the UL to an
OL. Also, using TABLE for layout means a lot of table tags on one's
pages. I find it easier to use UL for lists and TABLE for tables; it
makes the HTML and CSS a little more self-explanatory. I realize that
neither of these are strong arguments. I think there's also a problem
with browsers not being able to draw a table until all of the rows are
loaded. If true, that's a solid disadvantage of a table-based approach.

> "It seperates content from presentation" is not - in and of itself - a
> benefit. If it was, then, I could equally well say that "tables should
> *always* be used for layout", because "this keeps content and
> presentation together"!
>
> Any thoughts?

It is easier for automated tools to process content when it is separated
from presentation, hence the value of something like XML+XSLT. For
someone making a Web page about his pet fish Robert or a vacation to
Mexico, the separation of content from presentation is a pretty hard
sell. Me, I am somewhere in between. I make some Web pages that are
about as personal and trivial as one about a pet fish. But I earn my
living by programming, and when I work on a project where multiple
authors (who haven't a clue about HTML) work on the same document and
those documents needs to be rendered from OpenOffice XML to HTML, and
some PHB suddenly decides that they also need to be available in PDF
format doubleplus ASAP, then I'd better be comfortable and familiar with
separating content from presentation. (Apologies for the EUA --
Excessive Use of Acronyms.) I want it to be second nature, and it will
only become that if I practice at it.

Cheers



> [thread analysis follows]
>
> === 2: Chaddy2222 ===
> No advantages cited.
>
>
> === 3: Philip Semanchuk ===
> One specific advantage cited:
> - it's much more capable and sophisticated than a tables-based layout.
>
>
> === 4: OP ===
> (N/A)
>
>
> === 5: Sherm Pendley ===
> No advantages cited.
>
>
> === 6: axlq ===
> No advantages cited.
>
>
> === 7: Sherm Pendley ===
> DISAGREES that tables should never be used for layout:
> "if you intend to introduce divs that are used purely for
> presentational purposes and have no semantic meaning, then I'd say
> there's no point. Misused divs are neither better nor worse than
> misused tables."
>
>
> === 8: Jim Moe ===
> One specific advantage cited:
> "Ultimately the best reason to learning HTML+CSS is maintenance. It
> truly is a lot easier to make even major changes in appearance when a
> site uses HTML+CSS as they are intended.
>
>
> === 9: Jack ===
> Says that "separating content and presentation is a benefit of using
> CSS" - but doesn't say why. Let's be kind, and assume that he said:
> "... which makes it easier to maintain and enhance". One specific
> advantage.
>
>
> === 10: Michael Vilain ===
> DISAGREES that tables should never be used for layout:
> "if I want a set of three gifs next to each other with caption text
> underneath, it's faster and easier (and works on more browsers) to use
> a table"
>
>
> === 11: Richard Gration ===
> No advantages cited.
>
>
> === 12: Matt Silberstein ===
> No advantages cited.
>
>
> === 13: Jim Moe ===
> No advantages cited.
>
>
> === 14: mens libertina ===
> Three specific advantages cited:
> - "it is what most(?) people are doing these days". (weak)
> - "it is *the* accepted standard that is put forth by the W3C, and as
> such, it marks you as a professional."
> - "it makes maintainence easier by focusing your design changes to one
> page (the style sheet) rather than every single page."
>
>
> === 15: Chris F.A. Johnson ===
> DISAGREES that tables should never be used for layout:
> - There are instances where tables are the better way to accomplish
> one's design.
> - The ability of tables to adapt themselves to whatever width is
> required makes them often indispensible.
> - Many CSS hacks make the "umaintainable" tables look like child's
> play. [ie. the table might be *easier* to maintain that a CSS
> equivalent]
>
>
> === 16: Andy Dingley ===
> No advantages cited.
>
>
> === 17: Chris F.A. Johnson ===
> No advantages cited.
>
>
> === 18: mens libertina ===
> One (weak) advantage cited:
> "you should know what is currently popular if you want to be accepted
> as a knowledgeable person"
> [Knowing what is currently popular, is not an argument for *using* it!]
>
>
> (END)

--
Philip
http://NikitaTheSpider.com/
Bulk HTML validation, link checking and more

Jonathan N. Little wrote:


> Briefly, 'cuz this stinks of troll.

Geez, check my bio & see if I look like a troll.

Further comments below.


> 1) Lighter code. *If* done properly HTML markup with attached CSS
> stylesheets can significantly reduce the amount of actually code because
> you do not have to infuse all the markup with presentational markup and
> attributes that are repeated over and over for each table cell.
>
> 2) Flexibility. If you wish to change the styling or even presentational
> layouts say move the navigation from the left to the top or right or
> whatever. If in a table cell the whole page must be changed to move the
> cell content whereas if the navigation was in the list it cam be
> floated, put inline or block simply by change the ONE stylesheet. The
> former may require calling every page on the site.
>
> 3) Accessibility. With stylesheets and tableless designs your can have
> alternated stylesheets for different browsers, and viewer. Example, I
> use a flyout CSS menu. Some folks with disabilities may have
> difficulties in working the menu, your can offer a alternate sheet the
> make the menu a static indented list that is easier to traverse. Or have
> a very pretty site with backgrounds and stylish insets and sidebars you
> could have the simpler alternate stylesheet the simplifies the layout,
> upset the font-size and increases the contrast for low-vision access.
>
> 3a) I use on a practical note, a print stylesheet that does things like
> remove decorative elements, and navbars, underlines on links(makes no
> sense for a printed documents), fancy formatting and restricted margins.
> Damn I hate website that have stupid table layouts that make 2 pages
> of information balloon to 8 because of the content is squished in a
> narrow column and other useful room is wasted on navbar cell and advert
> banners...
>
> 4) Maintainability. With a different mindset with separation of markup
> and stylesheet many times may only need to change one or the other. If
> you use the cascade in CSS, and not table layout with umpteen divs spans
> classes and use broader classes and use selectors you can achieve very
> fine granularity in your styling without having to burden your markup
> with "container-itis" or "class-itis". Nothing can be worse then
> reworking a website with nesting table layouts, rowspans, colspans,
> image slices, etc...


I note & agree with all your points above. There are obvously
signifcant advantages in using CSS effectively. In particular, (3) and
(3a) were not mentioned in the cited thread. I'll need to do (3a)
myself, because my current site does not print properly.

*But*, my question was in reference to this specific example table:
http://102673.atspace.com/tables.htm

My question was, what would be a specific, real-world benefit of
changing *that table* to DIV's + CSS?

Personally, I just can't see it.

> 1) Lighter code
does not apply unless you say that you could replcate that layout using
DIVs + CSS with less lines of code than the table. I'm quite prepared
to be convinced - but is that possble?

> 2) Flexibility
does not really apply. The table looks exactly how I want it to. I do
not envisage having to change it. I *do* envisage changing my overall
page design, and for that reason, I plan to change the page-layout from
tables, to CSS. But when I do that, the example table will just appear
at some new point on the page; it won't need any changes itself.

> 3) Accessibility
> 3a) I use on a practical note, a print stylesheet
are not relevant to my example.

> 4) Maintainability
again, I don't see that the DIVs + CSS solution would be any simpler to
maintain, than the table.

Which of those advantages do you argue would apply to my specific
example?

TC (MVP MSAccess)
http://tc2.atspace.com

Hi Philp


Philip wrote:

> What's wrong with a smorgasbord of opinions? =)

Nothing at all. Bring 'em on!


> > Here's a very simple example: http://102673.atspace.com/tables.htm
> > What would be a specific, real-world benefit of changing that table to
> > DIV's + CSS instead?
>
> Well, I think the recommendation would be to change it to UL/LIs rather
> than just generic DIVs. One advantage of this approach would be that you
> could change the list to a numbered list by just changing the UL to an OL.

I'm not sure that I understand you. I don't *want* that table to look
like a list. I want it to look exactly the way that it currently does.
Are you saying that I could get the same look, by changing the info to
lists & then styling those lists? If so, what would be the specific
advantage? IOW, why would I bother? Wouldn't I just get lots of LIs
(versus lots of TDs)?



> It is easier for automated tools to process content when it is separated
> from presentation, hence the value of something like XML+XSLT.

I've had one brush with XSL. I don't intend to have another!

Thanks for all your other comments, which I have read & digested. It's
now 5am here, so I am off to bed & will get back to this thread in 12
hours or so.

Cheers,
TC (MVP MSAccess)
http://tc2.atspace.com