The benefits of going tableless?

**X Q mano** · Dec 13, 2002, 07:02

Hi, I did ask this question carefully in another thread, but it wasn't the topic, so I decided to start a thread with this question...

I've seen people say that they want to go from tables to using css for positioning...

My experience is that tables are easy to use when positioning site elements and that they work very well...

So my question is: What are the benefits of going tableless, and using CSS instead?

Someone mentioned that nested tables can make the rendering of the page go slowly, but don't we have more to save in optimizing the graphics?

**vgarcia** · Dec 13, 2002, 12:59

Originally posted by X Q mano
Hi, I did ask this question carefully in another thread, but it wasn't the topic, so I decided to start a thread with this question...

I've seen people say that they want to go from tables to using css for positioning...

My experience is that tables are easy to use when positioning site elements and that they work very well...

So my question is: What are the benefits of going tableless, and using CSS instead?

Someone mentioned that nested tables can make the rendering of the page go slowly, but don't we have more to save in optimizing the graphics?

Benefits:
1. Pages load quicker. What do you think would load faster, this:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td>First Cell</td>
</tr>
</table>

or this?:

Code:

<div class="layout">
First div
</div>

2. Search engines can find your content faster, as there is less code to wade through.

3. If all of your layout declarations are in the stylesheet you can modify everything in ONE place and have it propogate thru the site. Changing fonts on your site from arial to geneva? Now you just change a few lines in your stylesheet instead of trying to find all of the <font> tags on your site.

4. No more stupid browser hacks to worry about (assuming your audience uses a browser that is from the last 2-3 years).

5. Easier for other devices to parse thru such as handhelds, screen readers for the blind, Internet appliances, cellphones, and other devices we have yet to think of.

6. You won't have to change your design for years and it will still work if the correct <!DOCTYPE> is applied.

I'm sure there are more but those are what I can think of off the top of my head.

--Vinnie

**X Q mano** · Dec 16, 2002, 02:23

Ok, for your first point, I can see the benefit. Though I didn't think that the actual code was what took so long to load. Aren't the graphics a little more important to optimize when you want the page to load quicker?

No. 2, is probably right...

No. 3, hasn't exactly anything to do with tables has it? I use css so I won't have to write those annoying <font> tags... But I also use tables... (now, it might change)

No. 4, Well, my experience is that NS 4, (So many people still use NS 4, it scares me) really has a problem with CSS...

5, I don't know very much about this, so I can't argue with that

6, That is, if you actually want your design to be the same for YEARS...

**Ian Glass** · Dec 16, 2002, 03:41

Originally posted by X Q mano
6, That is, if you actually want your design to be the same for YEARS...

I'm pretty sure he meant that you wouldn't have to change your page's structure at all. You can change your design as many times as you want--all with only one file, too--without ever touching the structure of the1001 pages you're redesigning.

top-left-corner the number reason seven why: and the top-right-corner this is most important hard to reason, is because you're not understand discombobulating bottom-left-corner the source bottom-right-corner. Comprenda? ;-)

~~Ian

**anode** · Dec 16, 2002, 03:53

Originally posted by vgarcia

1. Pages load quicker. What do you think would load faster, this:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="500"> <tr> <td>First Cell</td> </tr> </table>

or this?:

Code:

<div class="layout"> First div </div>

From what I understand, the bigger issue as far as slow loading tables is some browsers won't render a table until all of the cells in it are ready to go, or something along those lines.

**Bill Posters** · Dec 16, 2002, 05:33

Originally posted by vgarcia

Benefits:
1. Pages load quicker. What do you think would load faster, this:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="500"> <tr> <td>First Cell</td> </tr> </table>

or this?:

Code:

<div class="layout"> First div </div>

Aww, come on. That's cheating.

Don't forget that the class info itself as well as the link to the css file (or the style tags) all add to the read/load time of a site.

Code:

<style type="text/css">
@import url(styles.css);
</style>

+

layout {
border: 0;
width: 500px;
padding: 0;
}

+

<div class="layout">
First div
</div>

For the most part css layouts do reduce the amount of code needed.
It's just unfortunate that the example you gave was being a bit economical with the truth.

Arguments in favour of css can win the day without resorting to innaccurate comparisons.

**X Q mano** · Dec 16, 2002, 05:57

Originally posted by Ian Glass

top-left-corner the number reason seven why: and the top-right-corner this is most important hard to reason, is because you're not understand discombobulating bottom-left-corner the source bottom-right-corner. Comprenda? ;-)

I'm afraid I didn't understand that one... Has it something to do with visually impaired users getting the information read out?

Don't laugh at me if I'm wrong please...

**samsm** · Dec 16, 2002, 10:05

Originally posted by X Q mano

I'm afraid I didn't understand that one... Has it something to do with visually impaired users getting the information read out?

Well, yes and no. We are all visually impaired in that a bunch of formatting tags and code in the middle of paragraph content can be a baffling ordeal.

As far as viewers go, this might make viewing more difficult for visually impaired users but it will also make viewing of the source more diffcult for the coder.

**myusername** · Dec 16, 2002, 11:52

5. Easier for other devices to parse thru such as handhelds, screen readers for the blind, Internet appliances, cellphones, and other devices we have yet to think of.

Even if the browser being used doesn't understand the style sheet, it will display the information in a long column in a readable format. It may not be pretty, but it is functional. For an example, build a page using a style sheet and then remove the link from the page. It still displays, it is just really ugly.

**duckie** · Dec 17, 2002, 02:47

Originally posted by Bill Posters
Aww, come on. That's cheating.

Don't forget that the class info itself as well as the link to the css file (or the style tags) all add to the read/load time of a site.

If external CSS files are used, then the CSS only needs to be downloaded once for the entire site.

Of course you need code to @import or link to the CSS files, but that is insignificant compared to all the presentational HTML cruft you can get rid of.

**Bill Posters** · Dec 17, 2002, 03:12

Originally posted by duckie

If external CSS files are used, then the CSS only needs to be downloaded once for the entire site.

Of course you need code to @import or link to the CSS files, but that is insignificant compared to all the presentational HTML cruft you can get rid of.

I was just drawing a fairer comparison of 'just' the code in the example.

**X Q mano** · Dec 17, 2002, 03:21

Of course... I understood that too. But we ARE talking real life here...

**Bill Posters** · Dec 17, 2002, 03:34

Then perhaps vgarcia should have used a little more real-life in the original sales-pitch.

If I take examples at face value it's because I feel that newcomers might also be inclined to do so (esp. in cases where css is still brand new to them). I just wanted to push someone to make it clearer when the benefits of css really kick in.

Anyway, it's all good

**duckie** · Dec 17, 2002, 03:50

Originally posted by Bill Posters
Then perhaps vgarcia should have used a little more real-life in the original sales-pitch.
If I take examples at face value it's because I feel that newcomers might also be inclined to do so (esp. in cases where css is still brand new to them). I just wanted to push someone to make it clearer when the benefits of css really kick in.

Point taken. But its probably worth it to mention the savings you'll get if CSS is used site-wide.

**Ian Glass** · Dec 17, 2002, 03:55

Originally posted by X Q mano
I'm afraid I didn't understand that one...

Exactly! But, it's not about "visually impaired"--far too many designers/developers use that distinction to write people off.

Like Sam pointed out, tabled designs can be a bear to edit and wade through for the developer. However, as a viewer, when the browser linerizes the tables (meaning that the browser just ignores <table>, <tr>, etc.) for some reason (i.e. in text-browsers, screen-readers, pocket pcs, old browsers, etc.) you get a very disorderly page--and that just escalates with complexity. Of course, your viewers don't get the advantage of color-coding, either. ;-)

~~Ian

**X Q mano** · Dec 17, 2002, 04:13

But is it very common for browsers to ignore <table> tags... How many percent actually use devices that do?

Now I'm not saying that because they are few, they should be ignored... I'm just wondering...

**Hierophant** · Dec 17, 2002, 09:03

Originally posted by X Q mano
But is it very common for browsers to ignore <table> tags... How many percent actually use devices that do?

Now I'm not saying that because they are few, they should be ignored... I'm just wondering...

I would hazard a guess that 10-15% of all Internet users today have a problem with tables in one way or another.

This doesn't just include screen readers but it also includes Netscape 4.XX which can't display a page properly if it uses tables, CSS and javascript. It also includes MSNTV (formerly WebTV) and AOLTV. Throw in Cell Phones and PDA's and you have a very sizeable audience.

It is estimated that by 2007, 1 Billion Cell Phones and PDA's will be connecting to the Internet in some form on a daily basis. The chances are they are going to be able to handle 800 X 600 fixed width table designs in the near future are between nil and zero. So if all you are really worried about it audience and marketshare then this is a sizable market to look at.

**Option1** · Dec 17, 2002, 11:13

Originally posted by W. Luke

I would hazard a guess that 10-15% of all Internet users today have a problem with tables in one way or another.

This doesn't just include screen readers but it also includes Netscape 4.XX which can't display a page properly if it uses tables, CSS and javascript. It also includes MSNTV (formerly WebTV) and AOLTV. Throw in Cell Phones and PDA's and you have a very sizeable audience.

It is estimated that by 2007, 1 Billion Cell Phones and PDA's will be connecting to the Internet in some form on a daily basis. The chances are they are going to be able to handle 800 X 600 fixed width table designs in the near future are between nil and zero. So if all you are really worried about it audience and marketshare then this is a sizable market to look at.

Ummm, don't you think including NS 4.xx in this was pushing it?

NS 4.xx's display of CSS is problematic at best. I know there is a tableless (and hence CSS-based) design around that DOES work with NS 4.xx, but I've never seen a table not work with NS 4.xx either. Surely, where NS 4.xx will break will be with the additional CSS to make it look "oh so pretty, oh so pretty..."? That's something that's going to break in NS 4 irrespective of whether it's tables or tableless.

Personally, I've already consigned NS 4.xx to the glue factory of history (unless some pita/difficult client insists on living in the past).

Neil

**Hierophant** · Dec 17, 2002, 11:17

Actually, Netscape 4.XX will show properly written CSS pages linearly since it doesn't recognize the DIV tag as will any other previous browser. The pages aren't the best designed things in the world but they are usable.

And I have seen thousands of tabled pages choke Netscape 4.XX. Any site with more than 3 nested tables is pushing it and the rendering times are unbelievable. It partially because of Netscape 4.XX's handling of tables that they abandoned the Netscape 5.0 project and started writing the Gecko engine which is now licensed under the Mozilla License.

I don't know why you would disregard a browser that still has more market share than any of its successors or any other browser on the market except for Internet Explorer.

http://www.w3schools.com/browsers/browsers_stats.asp
http://www.theregister.co.uk/content/6/28601.html

**Option1** · Dec 17, 2002, 11:26

Hmmm, I'm not sure if you're saying I'm right or wrong.

I know that http://www.realworldstyle.com/nn4_3col_header.html works in NS 4, but then again so will a table. My point was that NS 4.xx will not display much of the other CSS enhancements such as when that design is used or when a table is used. For example, http://staging.noao.edu/newnso/nso_kp/nso-kp.html

My point still remains that it was a bit disingenuous to include NS 4.xx in your post because it displays tables just fine, it's the CSS it has trouble with.

Neil

**Option1** · Dec 17, 2002, 11:31

Seeing we're both here at the same time, I won't edit my previous post, I'll just make a new one.

I missed the second half of your post above, but for me, I drew the line on NS 4 when it went to 2%. My choice.

I take your point about nested tables, but then again nesting numerous tables anytime isn't something I'd consider great design. I still think it'll work a lot better than with CSS.

Having said that, I'll make the same remark that Bill Posters made about an earlier attempt in this thread to push the benefits of tableless design, "Arguments in favour of css can win the day without resorting to innaccurate comparisons." To my mind, including NS 4.xx didn't help given the terrible reputation it has concerning CSS.

Neil

**Hierophant** · Dec 17, 2002, 11:45

The main point is that by removing the formatting from tables and the HTML file, you can cater to any browser whether it is a 5 year old has been. Or tomorrow's next greatest release. All it takes is a little forethought and a few style sheets.

**vgarcia** · Dec 17, 2002, 12:07

I apologize for starting the ongoing war in this thread. It was not my intention to "lie" about anything regarding going table-less. Perhaps I should have been a little clearer with my code example. My points to be made from that post were:

1. The style sheet need only be downloaded once for use throughout the site. All layout descriptions, etc. are in that one sheet ready for use by any other page in the domain. Thus you only have to do a <div class="layout"></div> to achieve your desired effect once you have gotten the stylesheet. Yes there is code to add to each page (an @import or <link> tag) but it is very small compared to the many table tags needed all over a table-based site.

2. Style sheets keep you from having to resort to <font> tags littered all over your tables. Currently, all of the sites I maintain at work are table-based so I see both sides of the argument. Depending on when the site was created there are some with font tags littered all over the place that make an otherwise quick-loading site move VERY slowly, and there are other sites using stylesheets to format text, etc. that load much quicker.

Again, I am sorry for all of the confusion. It was not my intention to give anyone a false impression of the benefits of CSS over tables, so please accept my apology.

--Vinnie

**Option1** · Dec 17, 2002, 13:27

Vinnie, my reading of this thread isn't so much that you started a war, more that people are quibbling over the actual reasons.

Maybe I didn't make myself clear, but certainly I support tableless over tables and for the reasons you've stated so very well. I think some of us just want the reasons to be clear, accurate and beyond reproach. To my mind using that philosophy convinces more people to switch than using possibly spurious or suspect reasoning - not that I'm alleging anyone here has done that (he says, using both hands and a large piece of board to cover his butt).

Neil

**vgarcia** · Dec 17, 2002, 14:06

Originally posted by Option1
Vinnie, my reading of this thread isn't so much that you started a war, more that people are quibbling over the actual reasons.

Maybe I didn't make myself clear, but certainly I support tableless over tables and for the reasons you've stated so very well. I think some of us just want the reasons to be clear, accurate and beyond reproach. To my mind using that philosophy convinces more people to switch than using possibly spurious or suspect reasoning - not that I'm alleging anyone here has done that (he says, using both hands and a large piece of board to cover his butt).

Neil

Point well taken. I also don't believe there's an easy "definite" answer as to why to go table-less. If you find yourself racking your brain over CSS and can do it 10x faster with tables then by all means, drop the XHTML for the site you're currently working on. Personally though, I think it's best to know both sides and I plan on learning even more about CSS and table-less designs because I really do believe that (for me anyway) it's a better way to go.

--Vinnie