Why do people hate tables?

[Old John]

I've decided to learn CSS.

No big deal you might say -- but this old man was making magazines by sticking down waxed bits of paper long before the first Tandy TRS80 hit Australia in the '70s.

I've worked my way through to nested tables, and just got DW CS3.

Like so many others, I need equal length columns on a 3 col web page.

I got every template I need right here at DD, and read all the comments about the equal column .js thingy.

And I have this question: Can I use CSS AND tables? I mean, just set up a nice Fixed-Fluid-Fixed 3 column table and slip it in between a CSS header and a footer. And then use CSS for everything else.

Wouldn't that solve the problem?

I'd appreciate anyone with enough patience with my ignorance to let me know

Thanks in advance

Old John

[djr33]

You can mix it however you want, unless something explicitly conflicts with another element.

You can use CSS even ON tables.

CSS stands for cascading style sheet-- and usually really means the formatting therein.

CSS in it's simplest form is just a different way of writing html attributes--
background-color: #FFFFFF;
(rather than bgcolor="#FFFFFF")
There are, though, more css properties than html attributes, and it can also be more organized.

So, using that, you can apply it using the style attribute on most tags--
<span style="css: css;">
Or in the head section, either embedded or with an external stylesheet, with elements defined (ie, any 'a' tags, or any tag with class="test") by properties.

These properties then affect the elements.

You can use CSS to manipulate div regions (not something you can do with html alone) to have the same effects as tables.

Tables, likewise, could have CSS properties.

<table> tags and other CSS on the page are certainly not going to have any trouble both existing.


So... you ask... why not tables?

1. Using CSS to define divs, though more work at times, can end up with a neater page, and, with enough work, sometimes more control.
2. Tables can be very slow to render at times.
3. Tables are meant for tabular data (ie, numbers), rather than chunks of the page.
4. Different browsers handle tables differently, so making them consistent isn't fun.
5. Tables are generally overkill. Why write so many elements for a single part of the page, where <div class="content"></div> (with CSS at the top) would do, you need <table border="0"><tr><td></td></tr></table>, plus any actual formatting. Having extra elements is also a pain, specifically arbitrary borders/spacing defined in variors browsers. Tables can sometimes even ignore the main font settings for the page.

No one hates tables outright. They just are used in a way they weren't designed for sometimes.


Admittedly, CSS is harder to learn/control than tables, but it ends up nicer.

[Old John]

Aah -- too magic!

It's now completely clear.

I really appreciate your concise, well constructed post.

So while I get this old brain around all this new CSS, I'll opt for mix-and-match and then finally wean myself off tables -- I think that'll be best!

And if there are more people as helpful as you have been around in here, I guess I'll have no shortage of answers if I have a question from time to time?

(But I don't want to be an annoying old fart)

Cheers, and thanks again

John

[Twey]

See: http://www.hotdesign.com/seybold/everything.html.

djr33's hit it on the head, but as that slideshow says, there are some things for which tables are currently much better than CSS -- e.g. equal-height columns. There are various hacks to do it this way (which purists such as myself tend to rather masochistically use), but to be honest, tables are much neater. It should be noted, though, that the cause for this unreasonable difficulty in creating such layouts lies not in deficiencies in CSS but in IE's lack of support for display: table-cell; property, which would allow us to create table-like layouts using pure CSS.
And if there are more people as helpful as you have been around in here, I guess I'll have no shortage of answers if I have a question from time to time?

(But I don't want to be an annoying old fart)No no, that's what we're here for.

[djr33]

which purists such as myself tend to rather masochistically useAnd so I end up debating with myself whether to mess with that or just use "ugly" tables :p
Tables are cookies.
Divs are some sort of whole grain healthfood snack, with no salt.

[jscheuer1]

I don't hate tables.

[Old John]

I'm most impressed with all of you!

Thanks you all once again

Old John

[Tawni]

Another Point I might add, you may be aware of this.

But , if you often read your code and make changes , style sheets get rid of allot of code in your HTML doc. If you chose to use tables for example

rather then in html tag of table being <table> you can be specific, so if you have more then one table in a website , then using a class name like

<table id="content"> <-------u just gave your table a name, now in the style sheet you can change any number of things such as font, size, color, back ground etc even add a back ground image. And guess what becuse it is a class name it wont effect the other tables in your site .

This Gives you full control without CODe mess in yoiur html.

[jscheuer1]

One thing that is often overlooked about the much maligned table element is that if you lay it out in a consistent and logical manner as far as the width of the first row's cells and all of the table's contents go, and it isn't going to have its content's width changed markedly via scripting, you can use the:


selector_for_this_table {
table-layout:fixed;
}

style for it in your stylesheet. For an otherwise complex table, this greatly increases the speed at which it will load.


<table id="content"> <-------u just gave your table a name, now in the style sheet you can change any number of things such as font, size, color, back ground etc even add a back ground image. And guess what becuse it is a class name it wont effect the other tables in your site .

This Gives you full control without CODe mess in yoiur html.

The concept is sound. However, you gave the table an id not a name (names won't help you style a table, or anything else using a stylesheet). And, it isn't a class name either. You would do that like so:


<table class="content">

[Tawni]

The concept is sound. However, you gave the table an id not a name (names won't help you style a table, or anything else using a stylesheet). And, it isn't a class name either. You would do that like so:


<table class="content">

Thanks , I aprec the help pointing that out, as I am sure you know I was trying to help, but I guess I'm too new to this , I probably should have researched more before posting to save confusion, rather then go off memory.

I was Close LOL

Thanks again.

[jscheuer1]

Thanks , I aprec the help pointing that out, as I am sure you know I was trying to help, but I guess I'm too new to this , I probably should have researched more before posting to save confusion, rather then go off memory.

I was Close LOL

Thanks again.

Don't feel badly. I 'knew what I was doing' for years before I knew the actual terminology involved well enough to write out a cogent explanation of it.

[carlocodamus]

yeah, you can mix tables and css. usually i use percentage to get the size for tables instead of pixels. but im no expert, im just sharing..
[SIGNATURE AGAINST TOS REMOVED BY MODS]

[Twey]

You were quoting me but attributed it to another member.The blame for this one is mine -- Tawni originally missed the opening [quote] tag altogether, so I edited it in and put djr33's handle instead of yours, it seems. I'm not sure how I managed to do so, since the post was right there and clearly yours.

[jscheuer1]

One of the big problems with tables is that, if they are complex, it can be hard to edit their code in a text editor without introducing a row(s) with a number of cells in it that doesn't agree with the other rows' cell count. This is especially true with extensive use of the rowspan and colspan attributes.