css vs tables

W

Wally S

I have read stuff here and on the internet about the benefits of laying out
with CSS instead of tables, so I decided to try it out. I copied one of my
pages laid out with tables and created an identical page using CSS. It was
easy because it was a simple two-column layout.

But what's the advantage? The estimated loading time on the bottom of the
screen is exactly the same for both versions. The CSS isn't any easier or
faster to work with, and you have to be careful about long, unbreakable
words. If you have one, and the reader enlarges the font, the right-hand
column will go crashing to the bottom of the page.

With tables, you might get something ugly and mashed-up, but it won't
destroy your layout. It took me quite a while to find the long, unbreakable
word because the right-hand column had gone down to the bottom, whereas with
a table I could have spotted it right away. I couldn't find any fix for this
on the web.

So I found a disadvantage but no advantage. Am I missing something?

Wally S
 
M

Mark Fitzpatrick

Wally,
Basically, it's more a matter of style and elegance. Tables are
messy, non-efficient, but they work like a charm if you know how to use them
right. CSS is the "way to go", though I would tack an eventually onto that.
I like CSS, but not for doing layouts. Tables, although they're not very
elegant work nicely and their behavior is well understood. CSS positioning
also works, but has it's own set of quirks across multiple browsers,
especially for sites that have to support users that haven't (don't) want to
upgrade. I still see plenty of users with old versions of Navigator hanging
around and are just too stubborn to upgrade to a new browser.

I would agree with you that a lot of things are easier to spot with
tables and, they usually make our job easier in the end.

Hope this helps,
Mark Fitzpatrick
Microsoft MVP - FrontPage
 
W

Wally S

Thanks, Mark,

It's nice to know I don't have to go around feeling like a dinosaur. I do
most of my formatting with CSS, but I think that for basic layout, tables
are more solid and reliable. We'll see what the future brings.

Wally S
 
E

E. T. Culling

I think that CSS-P is not easy to learn and because I'll be retiring fairly
soon, I'm not going to bother. If I were younger I would feel more compelled
to learn it.
Eleanor
 
J

Jon Spivey

Hi Wally,

I agree with you - my own method is to stick one simple 2 or 3 column table
on the page and then style the content with CSS, this is quick to design,
easy to maintain and bomb-proof all the way back to NN4. I see some of the
CSS "gurus" saying thngs like tables are only for tabular data, and even
using tables for layout is plain wrong - but I've never actually seen a
real business benifit to using CSS for layout. If I saw one benifit I'd
switch tommorow - the way things are going though that may be a long wait
:)
 
T

Thomas A. Rowe

Wally S,

I don't feel like a "dinosaur" and as long as tables are still supported (along with other HTML
tags) I will continue to use them, since they work. I see very little reason or benefit to use CSS
for the work that I do.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WebMaster Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
C

Chris Leeds, MVP-FrontPage

FWIW;
I did a site in nothing but css (no tables) and it's probably the last time
for a while that I'll do it.

rather than engage in the debate as to which is better css or tables I'm a
proponent of using both. it gives you the "stability" of a table and all
those <td> tags and whatnot are perfect places to "class" or "ID". you'll
also find that you'll need a lot less "nesting" of tables by this method.

also, if you're interested in "tableless" design the best book I've found is
at www.sitepoint.com it's called HTML Utopia. it's a great book for .css
skill enhancement even if you don't intend to go "tableless".

HTH

--
Chris Leeds,
Microsoft MVP-FrontPage

ContentSeed: great tool for web masters,
a fantastic convenience for site owners.
http://contentseed.com/
--
 
K

Kevin Spencer

As Uncle Chutney would say, "It's six of one of half of one of half a dozen
of the other." But he wouldn't tell me WHY he would say that.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
Ambiguity has a certain quality to it.
 
D

David Baxter

The more I hear about Uncle Chutney, the more worried I am about the
danger he presents to self and others...
 
K

Kevin Spencer

The more I hear about Uncle Chutney, the more worried I am about the
danger he presents to self and others...
Click to expand...

Ah, he's quite a kindly old chap, actually. No more danger than Geppetto,
Albert Einstein, or Jerry Garcia!

--
;-),

Kevin Spencer
Microsoft MVP
..Net Developer
Ambiguity has a certain quality to it.
 
C

Chris Leeds, MVP-FrontPage

Mr. T used to say "five on one hand 1/2 a ten on the other" :)

--
Chris Leeds,
Microsoft MVP-FrontPage

ContentSeed: great tool for web masters,
a fantastic convenience for site owners.
http://contentseed.com/
--
 
C

Cheryl D Wise

Wired.com is a real busines and uses CSS for layout. Because they elminated
many nested tables they were able to redue the number of servers in the
server farm and reduced bandwidth by 26%. They do use a bit of browser
sniffing so they aren't completely tableless since old NN 4.x vintage and
earlier browsers still get tables. Even Yahoo has dramatically reduced the
number of tables on their pages. There are other high profile sites that
have also moved to tableless layouts. I was just at espn.com and the only
tables they have on their home page are those containing adverts. Apple.com
uses a table for their nav bar but the remainer of the page is all a CSS
layout. In the store section they have a second table for the items being
sold but even 'purists' will consider that a data table.

Cingular.com uses a table for its search form but no other place on their
home page. Are those enough real businesses for you or do I need to locate a
few more? ;-)

Using CSS I can change layout simply by changing my stylesheet and never
touching the html code. That's the benefit for me, easier site mantenance.
Many of the benefits can be obtained using what is referred to as
'transitional' layouts where the basic structure is an HTML table and all
the text and other formatting is done with CSS. That seems to be what Jon
and Wally are doing. Which btw is a valid choice.

--
Cheryl D. Wise
MS FrontPage MVP
http://mvp.wiserways.com
http://starttoweb.com
Online instructor led web design training in FrontPage,
Dreamweaver and more!
Next Session June 26th
 
C

Cheryl D Wise

Couple of other good CSS books:

Eric Myer on CSS
More Eric Meyer on CSS
To some extent - Jeffrey Zeldman's Designing with Web Standards

All three of which have transitional (tables to CSS in stages) designs and
talk about the pitfalls of browsers.
 
C

Chris Leeds, MVP-FrontPage

Have the Myer book and a couple of others (I think from O'Reilly) but the
HTML utopia book was the only one that "spoke" to me. it just hit me in a
way that made sense.


--
Chris Leeds,
Microsoft MVP-FrontPage

ContentSeed: great tool for web masters,
a fantastic convenience for site owners.
http://contentseed.com/
--
 
C

Cheryl D Wise

Hmm, I thought I put them in. They have a few tables on the page but they
are all surrounding adverts, so I guess they are required to use what is
provided by the company paying for the ads or lose the revenue but other
than the ads ESPN.com does use CSS.

Another real world example courtesy of Chris.

--
Cheryl D. Wise
MS FrontPage MVP
http://mvp.wiserways.com
http://starttoweb.com
Online instructor led web design training in FrontPage,
Dreamweaver and more!
Next Session June 26th
 
C

Cheryl D Wise

That's why it is good if you can find copies at a local bookstore and see
which one fits your style of learning. A lot of people are fans of the
"Visual Quick Start" series and I hate them. It comes down to learning style
and how the books are wrtten.

Eric Meyers also wrote two O'Reilly CSS books, "CSS, The Definitive Guide"
and the CSS Pocket Reference but while they are good reference books are not
exactly easily digestible.

--
Cheryl D. Wise
MS FrontPage MVP
http://mvp.wiserways.com
http://starttoweb.com
Online instructor led web design training in FrontPage,
Dreamweaver and more!
Next Session June 26th
 
W

Wally S

But have you ever tasted a delicious mango chutney from India? You might
change your mind about Uncle Chutney.

Wally S
 
W

Wally S

Hi Cheryl,

But these real businesses have a staff working on their webs. I am one old
man, and I don't have all day to work on my site, as much as I enjoy it. The
problem I have with the CSS layout is that it is fragile. If I overlook one
little thing, some reader may find the right half of the page crashing down
to the bottom. I can see the benefit of being able to change the look of a
site simply by changing the CSS. The design I use now is different from what
I was using when I started the site, and it would be nice to be able to
change everything on the whole site just by changing my style sheet. But I
don't think that this advantage overweighs the danger of having a layout
crash into pieces.

Wally
 
W

Wally S

Hi Cheryl,

Transitional style is exactly what I am doing, although I didn't know it was
called that. I do my basic layout with tables and the rest with CSS. I do
very little nesting of tables aside from putting photos in tables inside the
big table.

Wally S
 

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

Similar Threads

CSS web page design 3
CSS Table Question 6
CSS table question 1
Ronx Question #2 3
Formatting the normal CSS with custom colors 3
set css print page margins 4
First CSS 1
need help with CSS and DWT 1

Top