473,699 Members | 2,129 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Table Layout and What's Wrong With it

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.

Jul 20 '05 #1
47 9140
Neal <ne*****@yahoo. com> wrote:
Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.


I disagree. A flimsy article, no mention of certain issues that make
table based layouts so author friendly:

Intuitive grid type visualization.
Shrink to fit and expand when needed behaviour/options.
Intuitive hor/ver centering of *all* elements (block/inline).
No mention of the fact that css itself contains a method to replace html
tables used for layout (css tables), but that they are not supported by
IE.

Note that I'm no apologist for table layouts (I plonked B. Pearson
months ago), I never advise their use for layout purposes, and I've
mastered the skill to use css exclusively for layout years ago. But the
fact remains that using css for layout in practice throws up mayor
obstacles for the average author.

Also, first thing I had to do to be able to read the article was to
disable his stylesheets (micro fonts).

--
Spartanicus
Jul 20 '05 #2

Spartanicus wrote:
Neal <ne*****@yahoo. com> wrote:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.

I disagree. A flimsy article, no mention of certain issues that make
table based layouts so author friendly:

Intuitive grid type visualization.
Shrink to fit and expand when needed behaviour/options.
Intuitive hor/ver centering of *all* elements (block/inline).
No mention of the fact that css itself contains a method to replace html
tables used for layout (css tables), but that they are not supported by
IE.


That shows in my opinion how underdeveloped IE is, and overtaked by
other browsers. The sad thing is that because most people still use
this "stone age" browser, Microsoft is now responsible for preventing
the development of WWW.
Note that I'm no apologist for table layouts (I plonked B. Pearson
months ago), I never advise their use for layout purposes, and I've
mastered the skill to use css exclusively for layout years ago. But the
fact remains that using css for layout in practice throws up mayor
obstacles for the average author.

Also, first thing I had to do to be able to read the article was to
disable his stylesheets (micro fonts).


The layout is just his suggestion, as you have yours on your sites.
But why disable it, if the font-size is the only problem? At least he
use percent for font-size, easy to resize even in IE :-)

--
/Arne
Jul 20 '05 #3
"Spartanicu s" <me@privacy.net > wrote in message
news:f2******** *************** *********@news. spartanicus.utv internet.ie...
: Neal <ne*****@yahoo. com> wrote:
:
: >Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
: >entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
: >quite good article.
:
: I disagree. A flimsy article, no mention of certain issues that make
: table based layouts so author friendly:
:
: Intuitive grid type visualization.
: Shrink to fit and expand when needed behaviour/options.
: Intuitive hor/ver centering of *all* elements (block/inline).
: No mention of the fact that css itself contains a method to replace html
: tables used for layout (css tables), but that they are not supported by
: IE.
:
These are good points and my advice would be to use tables sparingly, where
CSS fails to deliver.

--
Long
www.webcharm.ca - Integrated content management web hosting
Jul 20 '05 #4
DU
Spartanicus wrote:
Neal <ne*****@yahoo. com> wrote:

Patrick Griffiths weighs in on the CSS vs table layout debate in his blog
entry "Tables my ass" - http://www.htmldog.com/ptg/archives/000049.php . A
quite good article.

I disagree. A flimsy article, no mention of certain issues that make
table based layouts so author friendly:

Intuitive grid type visualization.


If you need to visualize elements as you're building your page, then it
means you're mostly building a site in a WYSIWYG interaction mode which
is not best for design to begin with.
Shrink to fit and expand when needed behaviour/options.
This suggests your layout is not scalable when not using table for
laying out your content. There are ways to make a site entirely scalable
and independent of the available workarea dimensions of the ua.
Obviously, there are other ways to shrink to fit and expand when needed
besides wrapping content with a
<table width="100%" ...>.
This need to table to make the content "fluid" is also at the source
of nested tables too.

Intuitive hor/ver centering of *all* elements (block/inline).
Don't know what you're talking about here. Are you saying that centering
a table within its parent element should also center its content? Are
you referring to
<table align="center" ...>
No mention of the fact that css itself contains a method to replace html
tables used for layout (css tables), but that they are not supported by
IE.

I don't understand what you're talking about here.
Note that I'm no apologist for table layouts (I plonked B. Pearson
months ago), I never advise their use for layout purposes, and I've
mastered the skill to use css exclusively for layout years ago. But the
fact remains that using css for layout in practice throws up mayor
obstacles for the average author.

But this is a different issue (ease of implementation versus best
practice for the avg author).
IMO, using table layout for rendering non-tabular data is wrong, bad,
nightmare to upgrade, makes parsing, rendering longer, make files
bigger, etc...

Also, first thing I had to do to be able to read the article was to
disable his stylesheets (micro fonts).


One disadvantage of using nested table in table design which is never
mentioned is that all DOM node fetching and manipulation (insert,
delete, replace, remove,etc) are more complex, longer since the dom tree
of nodes is deep. E.g. trying to print a selection in a nested table
will usually fail and make the application crash on most browsers.

DU

Jul 20 '05 #5
DU wrote:
Spartanicus wrote:
no mention of certain issues that make table based layouts so
author friendly:

Intuitive grid type visualization.
If you need to visualize elements as you're building your page, then
it means you're mostly building a site in a WYSIWYG interaction mode
which is not best for design to begin with.


There's no reason why someone can't code proper html (4/strict, using
elements as they are intended). Then layout the presentation using a
grid. If you ask me, this is the best way forward for the layperson html
author. But it cannot go in this direction because MSIE/Win does not
support css table-like presentation.
Obviously, there are other ways to shrink to fit and expand when
needed besides wrapping content with a <table width="100%" ...>.
Of course:

display: table; width: 100%; /* etc */

That's sort of the point, I think.
Intuitive hor/ver centering of *all* elements (block/inline).


Don't know what you're talking about here. Are you saying that
centering a table within its parent element should also center its
content?


It's a trivial matter, using table cells, to center things horizontally
and vertically. The vertical thing is especially desirable, as a glance
through the archives shows. If css tables were implemented -- really, if
they were implemented some time ago -- it would be an alternative to
what we see today. I imagine that it would be *easier* to program a
wysiwyg application to code real content, put all blocks in display:
table-cell, and let the user push blocks around to their hearts' content.
But this is a different issue (ease of implementation versus best
practice for the avg author).
I think you missed Spartanicus' point: that css as currently implemented
is hard. I'd have to agree. Floats are tricky stuff. I used to use them
only occasionally, to flow text around a <p> text. Now I use them for
nav bars, div elements, all kinds of stuff. Browsers are buggy with
floats, it can unintended consequences, etc.
IMO, using table layout for rendering non-tabular data is wrong, bad,
nightmare to upgrade, makes parsing, rendering longer, make files
bigger, etc...
Who are you arguing with here? Spartanicus specifically stated that he
was opposed to table for layout.
One disadvantage of using nested table in table design which is never
mentioned is that all DOM node fetching and manipulation (insert,
delete, replace, remove,etc) are more complex, longer since the dom
tree of nodes is deep.


Indeed. Now suppose web authors -- not just (would be?) professionals
here, but your aunt who posts her favorite recipes on her site -- used
simple html, and used css tables to lay it out as they do now with real
tables? They get the layout they want, html file sizes shrink, surfers
have more flexibility. The more I think about it, the more I realize
that css tables could be quite a nice solution. Shame that MSIE/Win
doesn't support them.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #6
Neal wrote:
Patrick Griffiths weighs in on the CSS vs table layout debate in his
blog entry "Tables my ass" -
http://www.htmldog.com/ptg/archives/000049.php . A quite good article.


It is useful for exploring the matter, but misses a few points.

1. It ignores the fact that use of layout tables can be compliant. It says,
for example: "Despite the fact that pioneers have been talking about web
standards for a long time, the majority of web sites are still developed using
tables and non standards compliant code. Because of this, user agents will be
forced to handle table based layouts for many years to come. This effectively
negates one of the biggest selling points for web standards. That of forward
compatibility. It's highly unlikely that in the near future, any of the big
browser manufacturers (um, that'll be Microsoft then) will release a browser
that renders the majority of sites unusable".

It is possible to use layout tables in *valid* HTML 4.01 Strict, XHTML 1.0
Strict, and XHTML 1.1. According to current proposals, they will also be valid
in XHTML 2.0. How can it be otherwise? *Tables* have to be supported. And
there is no robust way of distinguishing between layout tables & other sorts.
They will be valid (in the W3C sense) for decades to come.

Use of layout tables is *not* about compliance or non-compliance. It is *not*
about HTML 3.2 or later. It is *not* about DTP-like design or other types of
design. It is *easy* to provide counter-examples! Search elsewhere for
arguments that will stand up to scrutiny.

2. It misses the point when it talks about browser-support, although it gets
close. "When the browser manufacturers finally get their act together,
developing sites using CSS will get a lot easier. Still, I think most people
would agree that CSS development has a much higher barrier to entry than table
based design. In an odd way, I think this is one reason why CSS based design
is becoming so "popular" amongst web professionals. It allows them to
differentiate themselves from the amateur "FrontPage Cowboys" and take back
the web for themselves. Perhaps this is why many people see web standards as
"Ivory Tower" and why many web standards advocates come across as having a
sense of superiority and a zealous attitude towards web design."

It isn't about browsers, it is about authoring tools! *That* is the key issue.
When authoring tools enable people to develop tableless-layouts that are
robust cross-browser, people will use them, and that will be the future. Until
then, it won't be. Authors will do what works, (which layout-tables
*certainly* do), within the project constraints of cost, risk, and time. I use
Dreamweaver MX2004. It is so good with CSS2 that I am able to make sensible
choices according requirements, skills, target-audience, etc. (I even suspect
that it would be possible to use it to develop a rather poor tableless-layout
*easier* than a good table-layout).

3. *Obviously*, this is not about tables versus CSS! Every experienced user of
layout-tables *also* uses CSS! It would be stupid not to. Indeed, many
experienced authors use a whole range of layout-techniques, (absolute
positioning, floats, tables, normal flow, others). They all play their part,
either separately or in combination.

But the article gets this right: "We need to be honest and up-front about the
benefits as well as the cost. Developing CSS sites can be hard and it can time
consuming. In certain circumstances using tables for layout can make much more
sense than CSS".

4. That is really the point. *Why* should an author use one method or another
for the next page? Hopefully, not just because someone a newsgroup said
"table-layout is bad". Only a gullible idiot would fall for that one! Proper
decisions need better analysis.

I believe anti-table arguments are futile. The web appears to be 99% dominated
by table-layout, so there is no obviously no credibility in a position that
they don't work! And, of course, you can't even use more esoteric arguments
such as "separate content from presentation". Because using tables still
allows massive presentational variations using CSS as well. (I can switch left
& right columns of a table-layout, just using CSS). Tables simply set the
default layout in the absence of CSS. But so does all other mark-up!

Arguments should instead say why tableless-layout is good. What are the
specific advantages, that will stand up to scrutiny? The "anti-layout-table"
argument is discredited. What is needed is a credible "pro-tableless-layout"
argument.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #7
Spartanicus wrote:
Neal <ne*****@yahoo. com> wrote:
Patrick Griffiths weighs in on the CSS vs table layout debate in his
blog entry "Tables my ass" -
http://www.htmldog.com/ptg/archives/000049.php . A quite good article.
I disagree. A flimsy article, no mention of certain issues that make
table based layouts so author friendly:

Intuitive grid type visualization.
Shrink to fit and expand when needed behaviour/options.
Intuitive hor/ver centering of *all* elements (block/inline).
No mention of the fact that css itself contains a method to replace
html tables used for layout (css tables), but that they are not
supported by IE.


IE doesn't really allow you to start with non-tables and turn them into
something like tables. But it does allow you to start with tables and turn
then into non-tables. Here are some examples of use of valid CSS2, supported
by IE 5 & 6, to transform table-layouts by using CSS. They all use exactly the
same simple layout table.

http://www.barry.pearson.name/articl.../exhibit04.htm
http://www.barry.pearson.name/articl.../exhibit05.htm
http://www.barry.pearson.name/articl.../exhibit07.htm
Note that I'm no apologist for table layouts (I plonked B. Pearson
months ago),
Chuckle! I don't believe that for a second. I believe you are reading this,
but now you can't respond! (Your problem, not mine).
I never advise their use for layout purposes, and I've
mastered the skill to use css exclusively for layout years ago. But
the fact remains that using css for layout in practice throws up mayor
obstacles for the average author.

[snip]

They throw up obstacles for lots of experienced, professional, authors. It
often comes down to "what is the most effective way of developing my next
page?" If you do this for a living, you can't afford to ignore practical
issues in favour of pedantic purist policies that don't matter to the target
audience.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/
Jul 20 '05 #8
Els
Barry Pearson wrote:
Spartanicus wrote:
Neal <ne*****@yahoo. com> wrote:

Patrick Griffiths weighs in on the CSS vs table layout debate in his
blog entry "Tables my ass" -
http://www.htmldog.com/ptg/archives/000049.php . A quite good article.


I disagree. A flimsy article, no mention of certain issues that make
table based layouts so author friendly:

Intuitive grid type visualization.
Shrink to fit and expand when needed behaviour/options.
Intuitive hor/ver centering of *all* elements (block/inline).
No mention of the fact that css itself contains a method to replace
html tables used for layout (css tables), but that they are not
supported by IE.

IE doesn't really allow you to start with non-tables and turn them into
something like tables. But it does allow you to start with tables and turn
then into non-tables. Here are some examples of use of valid CSS2, supported
by IE 5 & 6, to transform table-layouts by using CSS. They all use exactly the
same simple layout table.

http://www.barry.pearson.name/articl.../exhibit04.htm
http://www.barry.pearson.name/articl.../exhibit05.htm
http://www.barry.pearson.name/articl.../exhibit07.htm

Note that I'm no apologist for table layouts (I plonked B. Pearson
months ago),

Chuckle! I don't believe that for a second. I believe you are reading this,
but now you can't respond! (Your problem, not mine).


I just thought I'd reply here, now he can ;-) (only if he
wants to of course)
I never advise their use for layout purposes, and I've
mastered the skill to use css exclusively for layout years ago. But
the fact remains that using css for layout in practice throws up mayor
obstacles for the average author.


[snip]

They throw up obstacles for lots of experienced, professional, authors. It
often comes down to "what is the most effective way of developing my next
page?" If you do this for a living, you can't afford to ignore practical
issues in favour of pedantic purist policies that don't matter to the target
audience.


Nah, I'll stay out of this thread now.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 20 '05 #9
Barry Pearson wrote:
IE doesn't really allow you to start with non-tables and turn them into
something like tables. But it does allow you to start with tables and turn
then into non-tables.
Exactly the opposite of what is desired, in this case, and it's hard to
imagine a practical use.
If you do this for a living, you can't afford to ignore practical
issues in favour of pedantic purist policies that don't matter


Anxious anchors alliterate when placed in powerful posts.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/
Jul 20 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

61
24480
by: Toby Austin | last post by:
I'm trying to replace <table>s with <div>s as much as possible. However, I can't figure out how to do the following… <table> <tr> <td valign="top" width="100%">some data that will 'stretch'</td> <td valign="top" width="300">some data that won't 'stetch'</td> </tr> </table>
7
5939
by: mr_burns | last post by:
hi, is the table percent value for height used for displaying in browsers. i have a table i want to run to the bottom of the screen so it seemed best to set the height value to 100%. when i display the table, it only sizes to the elements nested inside the table (as if no value for height has been given) and not to the bottom of the screen. i have also tried appling the height attribute as a css class but no joy.
39
5676
by: Zak McGregor | last post by:
Hi all Are there any good solutions to aligning form field names and input boxes without resorting to tables? I am struggling to do this nicely at the moment. Thanks Ciao Zak
28
5554
by: Anthony Williams | last post by:
Good morning, I'm currently designing a site, using CSS, and wish to create a variable width two-column layout, with header and footer, and one fixed-width column on the left. Previously, I would have used a table to do this, using the following code: <table width="100%">
6
1967
by: Pete | last post by:
Hello everybody -- Forgive my multi-posting my question. I posted first to ciwah, but I learned that ciwas is the better group for this CSS question. The problem has me stopped. The page: http://www.key-horse.com/fftst.html is rendered completely differently by Firefox 1.0 and IE 6.0. The code
117
18521
by: phil-news-nospam | last post by:
Is there really any advantage to using DIV elements with float style properies, vs. the old method of TABLE and TR and TD? I'm finding that by using DIV, it still involves the same number of elements in the HTML to get everything just right. When you consider the class attribute on the DIV elements, there's not much size savings anymore for using DIV. There are other disadvantages to not using TABLE/TR/TD, such as the lack of ability...
9
2425
by: ypjofficial | last post by:
Hello All, I am defining a class with one virtual function and storing its first 4 bytes ie. the address of the virtual function table to a file.I am again rereading the file in the same program and calling the virtual function.The function gets called nicely but it shows the junk values for the member variables of the class of which the function is a member..below is the code //Program start #include "iostream.h"
4
1773
by: Tor Inge Rislaa | last post by:
Table or Div Is there a common rule or "best practice" concerning when to use TABLE and when to use DIV tag's when designing a master page? I am designing a master page with a header and footer and in between I have a menu area to the left and a content area to the right. What would be the best way to design this page?
5
2669
by: Jeff User | last post by:
Hi all I am writing program/framework to server a web site dynamically based on stored web page data with C#, .net1.1 What is the preferred means of controlling page layout, frames or table(s) ? Benefits or problems related to using one or the other ?
0
8694
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8890
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7757
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6538
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4379
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4634
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3060
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2355
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2013
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.