Are Nested Table Layouts That Bad

DP uses tables because it's the most appropriate way of laying out information on this site. It's tabular.

There are a few good reasons to use tables for layout, but there are a million reasons to use CSS. CSS promotes semantic markup and as any good web design agency will tell you, this is important for both search engines and users because there is less markup, and what's there is easily understandable.

Anybody that uses tables for layout these days needs a sharp slap across the back of the head and a lesson in basic CSS.

 

next time you sit down to build a new site - just do it without tables. tackle your CSS gremlins. CSS is easy a pie to learn, and once you begin developing websites that meet standards, you're going to get a lot more respect from your peers and deliver much better solutions to your clients.

 

Just a note in passing ..........

The W3C does not totally condemn the use of Tables for layout - in fact they provide guidelines for their use - as can be seen at: HTML Techniques for Web Content Accessibility Guidelines 1.0 W3C Note 6 November 2000 - Section 5.2 Tables for layout

See also WEbAim's Creating Accessible Tables - Layout Tables

James

 

Nested tables make bloated code but it's not that bad for seo.

 

The biggest problem with tables is when they are nested. A very simple table wrapper for, say, 100% height columns to avoid a bunch of wrapping divs isn't going to kill anyone.

However getting through nested tables, esp with Lynx or a screen reader, can be such a bitch... I invite those who've built nested tables-sites to try getting through such a site with a text-only or other linear user agent. The frustration makes me appreciate even more how lucky I am to be able to use a graphical browser when I want.

The idea behind the web was, exchange of information with user agents who accept information transfers, such as http, https, ftp, etc. That's still the basis of doing it right. You cannot assume your user agent can build frames or tables. You cannot assume your user agent can render CSS. You cannot assume your user agent has scripting enabled. You cannot assume it can run a third-party plug-in (like Flash).

Things like nested tables bring up issues of accessibility, freedom, the entire basis of the internet... well, and so does Flash. Many authors really couldn't give a rat's whether everyone can access their content (Joe's home page with photos of his favourite cats), while others care that everyone can access it (google is your most popular blind visitor who doesn't have css, images, scripting, or the ability to set up framesets).

I'm such a smelly hippy sometimes. But I think backing away from nested tables in favour of semantic HTML (whether you style it with CSS or not) is a Good Thing simply for the good it does for visitors.

 

They're not bad per se. They're not going to effect the visual performance for desktop users and loading time that <td> tags require as opposed to <div>'s will hardly be noticed on modern network connections.

It depends on your needs and skillset. If it's setting up a site which isn't meant to be portable or isn't mean to be overly dynamic, tables are fine. Don't get sucked into the whole anti-table feeling that will generally be seen by snooty web designers

However. If you're looking to do a site that demands scability and portability, then it's kinda a requirement to use divs.

The whole Web 2.0 craze brought about a concept of keeping design and content entirely seperate. This is sometihng I actually agree with. Consider the scenario of a design that has to keep changing. You'd have to keep editting the HTML to change how the page looks, like in the good old days. This would rqeuire you to change more or less all the pages (this point has been raised before), whereas with CSS, you can limit this to just the one style sheet.

Also, more and more people are accessing webpages on mobile devices, such as the iPhone or other such high powered mobile devices. It's best to be able to offer scalable designs to cater for these views, not catering for them may equate to a loss in revenue.

Just a few thoughts - HTML is a markup language, it describes what data is, it doesn't describe how to present it. That's now CSS's job. But if you want to stick to that strictly, then you shouldn't use the <font> tag in HTML nor the <b> or <i> tags.

Enjoy.

 

I'm not sure snootiness has anything to do with it - it's more about pushing standards and unifying things so that websites, the Web over, are semantic and accessible.

 

...well, and snootiness too : ) I'll snooty my snooty snoot-snoot where I want when I want! (imagine this with some sing-songy ghetto tweenie voice)

True.
Which can show the problem with using tables (or lists, or any other element) to build whole layouts. I mean, is the page really a table, or a list? Should you build your house out of spoons? : ) That would be so cool.

Re the b and i tags though, they do have a place if you're using them for typographic (therefore content) reasons and not just because, for styling reasons, you want something to look bold or italic. That's why they haven't been deprecated yet. Popular example seems to be ship names. I remember book titles from my school days.

 

Take the time to learn CSS - see w3schools for a good tutorial on divs - and you can avoid tables pretty well altogether. I made the jump a few months ago and I reckon you could do so in half a day.

 

I belive table has more hassles compared to Divs.But I think that is purely developers perspective. From user/search engine perspective it wont matter.

 

heh heh ... and now the css guys are saying the same thing about tables that the table guys are saying about frames ... it just struck me as funny.

As long as there is an internet explorer, there will be tables .. sorry to disappoint you guys, but that's the God's honest truth of the matter.

The rendering capacity (or lack of it) of the internet explorer will prolong the life of the "table" one thousand fold .. and beyond.

75% of internet users, use internet explorer, just like 75% of the websites out there still use tables .......

All of the big boys, Walmart, Sears, Exxon, MSNBC and on and on... use tables. Big, big design firms in New York City ... still use tables.

Now I'll ask you ... how childish and nonprofessional is that?

Regardless of what we might think, or how we might feel ... tables are going to be with us for a good long while yet.

I just happen to like css personally ... it's cake, and it doesn't require a whole lot of thinking .. but still, my main site will use tables until I can finish my new main site.

I will never regret writing tables, and I'll never stack one against the other, because in my history, both have been, or are, very good things.

This whole business of to use or not to use ... this, that, or the other, with regard to coding ... seems a bit foolish in a sense ... I mean .. If someone walks up and offers me $7,500 bucks to write tables .. what do you think I would do?

I'll give you a hint ...

Extolling the virtue of css would most likely be the furthest thing from my mind ..

 

I advise my clients that they shouldn't use a designer who structures websites with tables. If they ever want it redesigned, or copy to the HTML, they're screwed.

You can nest divs just like tables, and make changes on-the-fly to ALL pages. Why any designers still choose tables over CSS structure is truly archaic. Once you get used to it, you'll wonder why it took you so long to convert over.

 

I don't mind css at all ... I prefer it really. But I'll still ask ..

Why would you discourage a client from using someone who writes tables?
And why wouldn't they be able to get their site, that was written with tables, redesigned? Why would they not get the code? Do we not deliver their code via CDROM upon project completion?

Do you know that 90% of those who would be new clients, #1, have no idea what makes a site work, and #2, could care less what the difference was between css and tables.?

Make changes on the fly?
I just had a pretty good visual of a client making changes on the fly ... er ... flying right back up to my office to fix it, that is. How many "new" clients do you know that are that well versed in css, or even tables for that matter, that they could do any of this on the fly?.

Do you discourage the use of tables because they are more time consuming and difficult to do?

And since many of us manage client accounts after the design is completed, would your table discouragement be such that you would prefer to not work so hard opting rather to give them something that would make your job easier?

just sayin'

 

Isn't this a no-brainer?

"they could do any of this on the fly"
... obvious you can't either.

"Do you discourage the use of tables because they are more time consuming"
... damn right. Nobody in their right mind would choose tables over CSS

"and difficult to do"
CSS takes more knowledge - guess you're showing yours here ROLF.

But, hey - I can easily re-design a tables website, and wouldn't convert it to CSS as it would increase the cost. Matter of fact, see this re-design - I just finished it last week.

 

I have had clients screw up a css files so bad, that I had to pull a copy for them to start over with.

I had to completely rewrite two sites last year because we somehow managed to not have copies of either of the two.

As far as right minds? ... many new clients don't know tables and css from Adams off Ox .. how could they not be in their right mind over something like this?

I'll defend tables like I'll defend css .. in that I won't, because I'll use both depending on who wants what and when and for how much.

How hard could that possibly be for you to understand?

As far as difficult to do? Not showing anything but the fact that it requires more time and "effort" to write a 28k page than it does to write an 8k page ... easy peasy ... no thought or time at all.

Good looking site by the way.

 

When I see big companies using tables over CSS I rethink doing big deals with because clearly something somewhere has gone wrong in their staffing. Big companies cannot afford to be stuck in the previous century when it comes to business or webdesign and while they might get away with it for longer because they are big, they won't get away with it forever. Exxon is a good example of this - stuck with 20th century business models, 20th century web design, 20th century ideas - history will show they have no future outside the 20th century. Good riddance.

 

Yes, they are the devil's handiwork.

 

Dunno about childish but deliberately making sites inaccessible and inappropriately is what these large companies are doing. Why are they building in tables? Why are they building their houses out of spoons? Because they are building with software (read: templates usually) that doesn't know any better, and with developers who don't know how to do it right (yes, things have changed and guys who knew how to wrangle the old browsers who couldn't do CSS correctly, needed to learn how to use CSS since at least a few years ago).

Just like some large corporations still don't follow any government rules about accessibility, equal opportunity etc. Does that mean they're doing something right, because they are a rich company? There's getting rich selling a popular product, and then there's Doing The Right Thing (the Right Way). Any web designer with skills would look at those sites and say, they're built crappily. Well, I know I'm not the only one who takes a peek at the HTML underwear of random sites I visit : )

I would discourage any client from using someone who writes in tables, font tags, center tags, in DreamBeaver or FrontPage, if it was a client who needed to reach everyone. I wouldn't necessarily bother telling Joe that his personal homepage of cat photos shouldn't be built by someone who writes that way. Joe doesn't care, and neither do his visitors.

But any business or non-profit or government client needs to be accessible. Obviously being accessible might not mean much for a small business who happens currently to have no disabled customers. But (hopefully) businesses grow.

Again, a table in an of itself won't make a page inaccessible. Most of the time when I see tables (not all of the time), the person who thought tables were the way to go also used empty anchors with no hrefs doing javascript stuff, font and center tags, and the dreaded MM_swap crapola. Other times, the order of the table made no logical sense unless you could SEE it visually (people making columns out of one big table).

Lawlz. I might be getting confused, but isn't the client the guy who doesn't know any coding and wants a website? The point is that YOU (or whoever built the site) can make changes on the fly.
As far as I can tell, you can do this with tables if you're using one of those fancy includes or a CMS. You'd only have to play with the tables once to, say, rearrange a right sidebar to a left and so on. And usually the fonts and colours are CSS'd whether the HTML is in tables or not, so that's no different. I'm guessing steve means that static HTML pages are easier to change on the fly qua layout, because you'd be making your changes in the single CSS file rather than a bunch of HTML files.
But with a CMS-type thing, I think tables don't necessarily pose any extra problem.

I'm betting steve means, no web developer in their right minds would choose tables... though I still see plenty of them out there. And fresh ones every day.

dulcificum++ being the hippy I am, I rather hope Exxon can get out of the dinosaur business while staying in the energy business, if you know what I mean.

 

Great post Stomme - unfortunately though it seems that Exxon have no interest in looking to the future of energy instead of digging up old squashed lifeforms.

 

Every time I search this topic, I get a headache. I registered with this site because of this thread and I hope someone can help me to understand the difference.

I would like to know the benefits of using nested divs rather than nested tables. When I search, I get the benefits of CSS over tables. I understand that divs load a bit faster than tables, but what does a style sheet have to do with it?

I use css for tables extensively. For any given table, tr or td tag, I only need to add an ID (if needed), a class and a colspan/rowspan (if needed) attribute. What am I not understanding about the debate?

Keep in mind, I do not use tables or divs exclusively. I use both (usually on the same page). I try not to nest tables because it is not acceptable these days, so I nest divs instead. What's the difference?