Tables vs iFrames vs Div

P

PW

I read the "dear brucie" thread below ...

I develop the occasional website for friends, I do a little bit of
commercial work, and I use HTML to mark-up web reports at work.

I've never ventured into iFrames or <div> because tables have always done
everything that I need.

Could someone explain, or provide a link to a discussion as to, the
down-side of using tables ? I can't imagine that theres a load-time
component associated with tables, as its all HTML.

I'd like to know why the HTML veterans as so passionate about iFrames, and
dispise tables so much. There must be a good reason, because they are the
pro's.

Thanks,
PW
 
D

DU

PW said:
I read the "dear brucie" thread below ...

I develop the occasional website for friends, I do a little bit of
commercial work, and I use HTML to mark-up web reports at work.

I've never ventured into iFrames or <div> because tables have always done
everything that I need.

Could someone explain, or provide a link to a discussion as to, the
down-side of using tables ? I can't imagine that theres a load-time
component associated with tables, as its all HTML.

I'd like to know why the HTML veterans as so passionate about iFrames, and
dispise tables so much. There must be a good reason, because they are the
pro's.

All these reasons were already repeated in this newsgroup many times
before. You're asking others to type everything all over again when a
simple search would fulfill your curiosity.
Thanks,
PW

People use tables and nested tables to position elements on a page. They
don't know how to position elements, how to control the layout, how to
make the rendered layout scalable, etc. So table and table design is the
solution in their mind, not the problem.
If they knew nothing else besides MS-Excel, then they would use it to
post messages, compose emails, reply in newsgroups, etc..
Some people can not figure out how to configure different elements with
precise dimensions, a specific font, etc..; so they do a gif out of
these elements with an image software. The making of the gif is not the
problem; it's the solution from their perspective.
But when you know the defects, usability burden and accessibility
problems these false solutions cause, then you realize they never were
solutions from the beginning.

"Why tables for layout is stupid:
problems defined, solutions offered"
Seybold Seminars, San Francisco 2003
http://www.hotdesign.com/seybold/

MacroMedia has a few tutorials on why+how to avoid table designs.

Look Ma, No Tables.
http://glish.com/css/

900 different CSS Tableless Web Sites
http://www.meryl.net/css/

DU
 
R

Richard

DU said:
PW wrote:
All these reasons were already repeated in this newsgroup many times
before. You're asking others to type everything all over again when a
simple search would fulfill your curiosity.

People use tables and nested tables to position elements on a page. They
don't know how to position elements, how to control the layout, how to
make the rendered layout scalable, etc. So table and table design is the
solution in their mind, not the problem.
If they knew nothing else besides MS-Excel, then they would use it to
post messages, compose emails, reply in newsgroups, etc..
Some people can not figure out how to configure different elements with
precise dimensions, a specific font, etc..; so they do a gif out of
these elements with an image software. The making of the gif is not the
problem; it's the solution from their perspective.
But when you know the defects, usability burden and accessibility
problems these false solutions cause, then you realize they never were
solutions from the beginning.
"Why tables for layout is stupid:
problems defined, solutions offered"
Seybold Seminars, San Francisco 2003
http://www.hotdesign.com/seybold/

Nice. But bucks the alt.html convention that rules the use of more than one
# is not kosher.
What the hell is this supposed to be?
function hiveware_enkoder(){var i,j,x,y,x=
"x=\"67x=\\\"\\\\3366=x!P2\\\"=x623d2232383\\\"\\\\\\\\\\\\3353636366234343"
+



MacroMedia has a few tutorials on why+how to avoid table designs.

I'll bet they do. After all, they want to promote the use of flash.



While the main page works flawlessly, the others do not.
His 3 column layout is royally screwed. the outer 2 divisions lay over the
center making the center unreadable. Plus the fact the divisions break apart
badly in IE.
 
S

Steve R.

PW wrote in message ...
I've never ventured into iFrames or <div> because tables have always done
everything that I need.

Lots of Website creators still use tables for layout, (including the
company I work in), because they are easy to use, they are reliable, and
work across all browsers.

CSS although supposedly *the* way to do it now, causes many problems for
many people designing websites and also has some browser problems. Just
look at the number of "CSS problem" posts on the HTML newsgroups to see
what I mean.

I iframes are not difficult. Just use the mark-up I've used on the page
below and alter it to suit your needs. Just play with the mark-up till you
get used to how it can place the iframe, alter its size and to enable
scroll bars or not.

http://www.myby.myby.co.uk/image/
 
J

jake

DU said:
All these reasons were already repeated in this newsgroup many times
before. You're asking others to type everything all over again when a
simple search would fulfill your curiosity.


People use tables and nested tables to position elements on a page.
They don't know how to position elements, how to control the layout,
how to make the rendered layout scalable, etc. So table and table
design is the solution in their mind, not the problem.
If they knew nothing else besides MS-Excel, then they would use it to
post messages, compose emails, reply in newsgroups, etc..
Some people can not figure out how to configure different elements with
precise dimensions, a specific font, etc..; so they do a gif out of
these elements with an image software. The making of the gif is not the
problem; it's the solution from their perspective.
But when you know the defects, usability burden and accessibility
problems these false solutions cause

What 'accessibility' problems?
, then you realize they never were solutions from the beginning.
[snip]

900 different CSS Tableless Web Sites
http://www.meryl.net/css/

Sadly, contains many too many sites that don't allow text to be
re-sized, window to be re-sized, or that don't quite work with IE6 (i.e.
overlapping columns).

Interestingly, they all look pretty much the same: main text column with
a thinner right-side menu column.

....... and not a 'famous' site amongst them :-(
 
W

Whitecrest

"Steve said:
Lots of Website creators still use tables for layout, (including the
company I work in), because they are easy to use, they are reliable, and
work across all browsers.

Additionally all the professional graphics programs will slice a picture
up for you AND supplies you with the HTML tables needed to put it all
back together (surprisingly, with absolutely no extra code, only the
table tags and images) Cut/paste into your favorite HTML editor, and
you are on your way.
CSS although supposedly *the* way to do it now, causes many problems for
many people designing websites and also has some browser problems. Just
look at the number of "CSS problem" posts on the HTML newsgroups to see
what I mean.

The fact that IE support for CSS is unreliable at best(according to the
anti MS people in the group) means that it is unreliable in about 80% or
90% of your visitors. So should you use it?

Now on the other side of the coin, I do like the possibilities of what
you will be able to do with CSS as soon as all the browsers support it.
 
B

Brian

PW said:
Could someone explain, or provide a link to a discussion as to, the
down-side of using tables ?

I refer people to this:
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

And I just found this one:
http://www.w3.org/2002/03/csslayout-howto
I can't imagine that theres a load-time component associated with
tables, as its all HTML.

http://www.radionz.co.nz/digitallife/archives/series3/meyer.html

"The other real advantage of course for businesses is the smaller the
file sizes the less bandwidth they consume. If you can reduce the
total byte size of all of your web pages by lets say 33% that’s 33%
off your bandwidth costs."
I'd like to know why the HTML veterans as so passionate about
iFrames,

There are occasional uses for iframe or frames. But to implement them
correctly requires substantially more work. You can reduce your work
by implementing them improperly, but then the site is not easily
spidered by search engines, difficult to print, and difficult to navigate.
and dispise tables so much.

Perhaps I'm not a HTML veteran, but I happen to like tables. Here are
examples of a couple of tables I've done:

http://www.tsmchughs.com/menus/wine
(I'd ask that you kindly ignore the ugly wine bottle images. They are
there temporarily to fill in space recently created by a minor change
in the page layout; I expect replacement images next week.)

http://www.julietremblay.com/portfolio/catalogue.html
 
J

Jeff Thies

I can't imagine that theres a load-time component associated with
There certainly is!

Table layouts do not render progressively. Often, everything in that table
will have to load before you see anything.

Jeff
 
D

DU

jake said:
What 'accessibility' problems?

If content of a table can not be linearized, then such content will not
be easy to access with applications and devices for people with
disabilities and for applications with small screen like cell phones and
PDAs. Some applications and devices will render a table just like your
hanging-on-the-wall-calendar uses a grid to render tabular data. In a
table, there should be defined column header and row header cells.
Column headers and row headers should mean something in relation with
the content of the table, otherwise you're misusing the table element.

, then you realize they never were solutions from the beginning.
[snip]

900 different CSS Tableless Web Sites
http://www.meryl.net/css/


Sadly, contains many too many sites that don't allow text to be
re-sized, window to be re-sized, or that don't quite work with IE6 (i.e.
overlapping columns).

That's another issue. Of course, font-size should be scalable, using
relative length unit which is known to be best for screen media.
Ideally, columns' width should be scalable, resizable in case the window
is resized; most of the time, at least one column should be relying on a
relative value of the browser window viewport.
Finally, note that MSIE 6 for Windows has a long lasting bug on
overflow. overflow:visible is not rendered accordingly to W3C CSS2 rec.
and this might well be the cause of the overlapping columns you mention.
Interestingly, they all look pretty much the same: main text column with
a thinner right-side menu column.

There can not be 50 layout possible when you're looking to build a 2
columns layout or 3 columns layout. These 900 layouts show that you can
be a table free layout, CSS-based, entirely compliant to W3C
recommendations, which will be more widely supported, accessible,
interoperable and device-independent.
...... and not a 'famous' site amongst them :-(

This site lists urls of website of people who submit urls. At
webstandards.org, I often see new sites which are talked about and
inevitably, tableless design is mentioned. The latest mentioned is
Vancouver-based North Shore Credit Union: the layout is not based on tables.

http://www.webstandards.org/
http://www.nscu.com/

DU
 
D

DU

Steve said:
PW wrote in message ...



Lots of Website creators still use tables for layout, (including the
company I work in), because they are easy to use, they are reliable, and
work across all browsers.

No one would want to argue with you on this. But then, can you answer
what are these web designers supposed to say when asked about
- why they use nested tables
- bandwidth-hogging due to tables
- slower parsing and rendering time due to tables
- inability of text-to-speech browsers and other small screen devices to
render accordingly what was supposed to be tabular data to begin with
- compliance with accessibility laws
- higher time to upgrade a site based on table layout; a real nightmare
in some cases (e.g.: http://www.yahoo.com)
CSS although supposedly *the* way to do it now, causes many problems for
many people designing websites and also has some browser problems. Just
look at the number of "CSS problem" posts on the HTML newsgroups to see
what I mean.

Everything you mentioned in these 2 sentences is general, abstract,
absolute, without any specifics, tangibles, without any detail, without
any relativity, with undistinguishable generalities, with nothing
concrete. No names, no urls, no code, no stats, no study, no newsgroup
name, no poster name, no subject line, no number mentioned, etc.

Your post never even put under the slightest doubt that most people
designing websites are not professionals to begin with, most people
designing websites never received a training of any kind to do so, most
people do not have (or never have read) a single book on web design,
HTML, CSS, DOM, javascript. IMO, 95%+ of all people designing websites
use WYSIWYG popular and free editors, copy and paste code from
copy-N-paste sites and assume everything is perfect. W3C assumes that
99% of all sites out there would fail markup validation. All this could
explain why so many people asks so many questions and have so many
problems. In this very newsgroup, I would say that 90% of all questions
or problem mentioned are related to the poster's code and not to a
specific bug in a defined browser.

"Although apparently suited to layout on the surface, under the hood it
becomes clear that 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."

Tableless layout with Dreamweaver by Drew McClellan
http://www.macromedia.com/devnet/mx/dreamweaver/articles/tableless_layout.html

I iframes are not difficult. Just use the mark-up I've used on the page
below and alter it to suit your needs.

Are you actually inviting people to copy your code and then paste your
code into their page without understanding it? without even
investigating their webpage requirements, needs, usability analysis to
begin with? without assessing the webpage design issues for starters?

Just play with the mark-up till you
get used to how it can place the iframe, alter its size and to enable
scroll bars or not.

http://www.myby.myby.co.uk/image/

You can use a knife to unscrew a screw, you know. A knife is easy to
use, it's reliable, and it will work with almost any screw.
You can use a screwdriver to cut your steak or cut yourself a slice of
pizza, you know. A screwdriver is easy to use, it's reliable, solid, and
it will work with any kind of meat and any kind of pizza size.

DU
 
D

DU

Steve said:
PW wrote in message ...



Lots of Website creators still use tables for layout, (including the
company I work in), because they are easy to use, they are reliable, and
work across all browsers.

CSS although supposedly *the* way to do it now, causes many problems for
many people designing websites and also has some browser problems. Just
look at the number of "CSS problem" posts on the HTML newsgroups to see
what I mean.

"Newbie Designer posts a link to a test page, asking for help because it
doesn’t behave as expected in this or that browser. Guru Designer
replies, telling Newbie Designer that their page doesn’t validate, and
that they should go validate their page before asking such questions."
Why we won’t help you
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

"Most of the Web sites on the Web are not valid. We may assume that this
is the case for 99% of the Web pages"
My Web site is standard! And yours? (W3C Quality Assurance tutorial)
http://www.w3.org/QA/2002/04/Web-Quality

It is known that roughly at least 60% (presumably more than that) of
all users out there use MSIE 6 for windows. Now, MSIE 6 for windows has
corrected many bugs related to what is know as the incorrect
implementation of the CSS1 box model: even MSDN and Microsoft publicly
acknowledged this some 30 months ago. Now, if all users out there would
write syntaxically compliant markup code and then trigger standards
compliant rendering mode in MSIE 6 for windows, then there wouldn't be
so many buggy pages out there and there wouldn't be any justification
left to use table design. On this precise matter, it's no longer a
matter of browser bugs; it's a matter of web designer's competence and will.

DU
 
M

Michael Fesser

Jeff said:
Table layouts do not render progressively. Often, everything in that table
will have to load before you see anything.

True in many cases, but it depends on the browser and is only an issue
if the entire page is put into a table.

Micha
 
J

jake

DU said:
If content of a table can not be linearized, then such content will not
be easy to access with applications and devices for people with
disabilities and for applications with small screen like cell phones
and PDAs.

[snip]

In practise, this is rarely seem to be the case. Most sites using tables
seem to linearise correctly without the author seemingly taking any
special measures.

Using Operas 'small screen mode', most tables-based sites seem to
linearise quite happily, so I doubt that PDA users have much of a
problem.


That's another issue. Of course, font-size should be scalable, using
relative length unit which is known to be best for screen media.
Ideally, columns' width should be scalable, resizable in case the
window is resized; most of the time, at least one column should be
relying on a relative value of the browser window viewport.
Finally, note that MSIE 6 for Windows has a long lasting bug on
overflow. overflow:visible is not rendered accordingly to W3C CSS2 rec.
and this might well be the cause of the overlapping columns you mention.

Maybe. But if it doesn't work in IE, then it doesn't work for 90% of
your visitors.
There can not be 50 layout possible when you're looking to build a 2
columns layout or 3 columns layout. These 900 layouts show that you can
be a table free layout, CSS-based, entirely compliant to W3C
recommendations, which will be more widely supported, accessible,
interoperable and device-independent.

... more widely supported .. ?

Not really. Tables-based layouts still have the edge over CSS-based ones
in this argument. Now, in 5 years time, things might be different --
when all browsers are standards-compatible, and the older non-conformant
browsers have been laid to rest.
 
C

Chris Morris

jake said:
DU said:
[table layouts]
But when you know the defects, usability burden and accessibility
problems these false solutions cause

What 'accessibility' problems?

w3m and links/elinks/links2 [1] both have problems with layout tables.
They try to support tables by positioning things on the page, which
works fine with data tables, even if you have to horizontally scroll
occasionally with the wide ones. Unfortunately quite a lot of the
time with layout tables this ends up with the entire page being wider
than the (usual) 80 character limit imposed by the terminal. And then
it gets really inconvenient.

Openwave has about 30 characters width at a readable font size and
suffers this effect *really* badly. The Openwave SDK is available for
testing purposes, though needs a modern windows OS to run. It seems
to be a fairly common rendering engine for mobile phones, etc -
certainly I've seen numerous variations on its UA string in web
logs. (UP.Browser/$version is the key string) - Don't know how common
compared to Opera, in the handheld market, but I've had a fair number
of hits from variations of it to a low traffic site.

Now, admittedly, none of these are common browsers. But then
Netscape/IE 4-, the last common browsers to have serious trouble with
CSS, are rare and getting rarer, and Openwave at least is getting more
common (temporarily, maybe?).

[1] When in text mode. When in graphics mode links2 does a good job of
rendering layout tables.
 
J

jake

Chris Morris said:
jake said:
DU said:
[table layouts]
But when you know the defects, usability burden and accessibility
problems these false solutions cause

What 'accessibility' problems?

w3m and links/elinks/links2 [1] both have problems with layout tables.
They try to support tables by positioning things on the page, which
works fine with data tables, even if you have to horizontally scroll
occasionally with the wide ones. Unfortunately quite a lot of the
time with layout tables this ends up with the entire page being wider
than the (usual) 80 character limit imposed by the terminal. And then
it gets really inconvenient.

Openwave has about 30 characters width at a readable font size and
suffers this effect *really* badly. The Openwave SDK is available for
testing purposes, though needs a modern windows OS to run. It seems
to be a fairly common rendering engine for mobile phones, etc -
certainly I've seen numerous variations on its UA string in web
logs. (UP.Browser/$version is the key string) - Don't know how common
compared to Opera, in the handheld market, but I've had a fair number
of hits from variations of it to a low traffic site.

Now, admittedly, none of these are common browsers. But then
Netscape/IE 4-, the last common browsers to have serious trouble with
CSS, are rare and getting rarer, and Openwave at least is getting more
common (temporarily, maybe?).

[1] When in text mode. When in graphics mode links2 does a good job of
rendering layout tables.
Most interesting, Chris. Not something I've taken the trouble to
investigate.

I've tended to think that if a page functions OK in Opera's small-screen
rendering mode -- simulating a screen about 280 pixels wide, then it's
probably OK (I think this is the same rendering engine used in some
Nokia phones). From what I've seen, Opera seems to handle tables-based
layout without problems -- assuming that they linearise correctly in the
first place.

regards.
 
D

DU

jake said:
DU said:
If content of a table can not be linearized, then such content will
not be easy to access with applications and devices for people with
disabilities and for applications with small screen like cell phones
and PDAs.


[snip]

In practise, this is rarely seem to be the case. Most sites using tables
seem to linearise correctly without the author seemingly taking any
special measures.

Quite on the contrary. A site layout based on table design can not be
linearized accordingly. I think we don't understand each other here.
Using Operas 'small screen mode', most tables-based sites seem to
linearise quite happily, so I doubt that PDA users have much of a problem.





Maybe. But if it doesn't work in IE, then it doesn't work for 90% of
your visitors.

A site which was not tested with MSIE 6 for windows and which has
overlapping columns shouldn't be listed at http://www.meryl.net/css/
Can you tell which site number at meryl.net gave you overlapping columns
with MSIE 6? At which scr. resolution? Was your browser application
maximized?
.. more widely supported .. ?

Not really. Tables-based layouts still have the edge over CSS-based ones
in this argument.

I think we don't understand each other here too. A 2 columns layout just
has 1 column on the left and 1 column on the right: there can not be
other ways to do a 2 columns layout obviously. That's what I meant. A
CSS based design is more scalable, flexible, interoperable, accessible
than a table design. It will usually be smaller in size and faster to
parse and render than a table design using nested tables.

Now, in 5 years time, things might be different --
when all browsers are standards-compatible, and the older non-conformant
browsers have been laid to rest.

Rigth now, MSIE 5 for windows, Konqueror 3.1, Safari 1.1, Mozilla 1.4+,
NS 7.x, Opera 7.x (and a few others) are used by about 96% of all users
out there and these browsers are known to support very well HTML 4.01
elements, attributes, syntax, CSS1 properties and DOM1 attributes and
methods. Not a perfect support on everything but a very good support for
a very wide spectrum of webpage cases. I'm not the only one claiming
this: an unanimity of reviewers (E. Meyer, PP Koch, westciv.com, R.
Lionheart, Nestcape DevEdge, webstandards.org, etc..) say so along with
testpages for anyone willing to test and see for himself.

Here's one:
"Last September, I put a batch of browsers through some gruelling tests
to see how well they coped with Cascading Style Sheets layouts. More
specifically, I wanted to see how far I could push them before they fell
over. When you use CSS for layout, if the browsers don't behave as
expected, you can end up with a mess."
and the results were that 8 browsers score 95% or better on 20 different
layouts; only ICab (version 2.9.5) scored below 90%.
http://www.wpdfd.com/editorial/wpd1003.htm#feature

DU
 
B

Barry Pearson

PW said:
I read the "dear brucie" thread below ...

I develop the occasional website for friends, I do a little bit of
commercial work, and I use HTML to mark-up web reports at work.

I've never ventured into iFrames or <div> because tables have always
done everything that I need.

Could someone explain, or provide a link to a discussion as to, the
down-side of using tables ? I can't imagine that theres a load-time
component associated with tables, as its all HTML.
[snip]

There are few downsides to using simple layout tables. But some people may try
to convince you otherwise. Typically, their statements don't stand up to
scrutiny. Have a look at the following:

Layout tables considered valuable
http://www.barry.pearson.name/articles/layout_tables/

Reflections on CSS Positioning
http://www.barry.pearson.name/articles/layout_tables/css_positioning.htm

In defence of layout tables
http://www.barry.pearson.name/articles/layout_tables/defence.htm

A brief history of tables
http://www.barry.pearson.name/articles/layout_tables/history.htm

Sayings
http://www.barry.pearson.name/articles/layout_tables/sayings.htm

Don't get caught up in this holy war. There are 2 or more imperfect systems -
tables and CSS positioning. Use either or both according to need. The sky
won't fall in, and you won't end up in court.
 
W

Whitecrest

Don't get caught up in this holy war. There are 2 or more imperfect systems -
tables and CSS positioning. Use either or both according to need. The sky
won't fall in, and you won't end up in court.

Truer words have never been spoken
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,831
Latest member
HealthSmartketoReviews

Latest Threads

Top