What’s so bad about tables?

This is an old issue, but certainly not a WordPress issue: Tables were introduced in HTML to display tabular data. Not for layout.

And you can use anything you want.

Hmm, you’re opening a bag of worms here ?? There are many arguments for and many arguments against. Myself, I use tables only for tabular data, which is the reason the <table> tag was invented to start with.

Tabular data being defined as data that is best presented in rows and columns. So each “record” shares the same “fields”.

But… Why is CSS better? For starters, it’s usualy more accessible to people with disabilities (and bots… Google is “the ultimate blind user”). It is incredibly difficult to render tables properly through voice (trying to render a two dimmensional entity via a one dimmensional medium).

It also makes sense not to hard code presentation on your site. If you use tables, you limit yourself, the next time you’ll want to change your site, you’ll have to completely recode all your theme’s pages. Whereas if you have the site coded with css, you may just change the css file, and presto, you have a different layout.

Also, it gives greater flexibility to users coming to your site on alternate medium. Say, someone coming on with a cellphone. If you have a site relying on tables, it’s *really* hard to deliver the site in a different layout targetting small screen. If you have properly built divs, you can then assign an alternate stylesheet for the media=”handheld”, and you’re away laughing.

You can also easily prepare a print.css, which gives you control over what gets printed and how. You can strip out font colour, hide the sidebar and navigation (useless on a printed page), specify a good font size for print, etc. And you send it to media=”print”.

So, to me, using just CSS for layout gives me greater flexibility, and accessibility.

Now, granted, a poorly coded page relying on too many divs, with stuff all over the place is probably not a heck of a lot better than using tables.

My latest project (and first wordpress site) is a good example. If you look at https://cook.becanz.net and look at the page with styles turned off (easier in firefox than IE), you’ll see that I have content at the top (before navigation), which is arguably better for search engines. If you print a page, you’ll see that only the content prints, etc. You can even click on the high contrast button, and get a high contrast version of the site (good for some people with low vision), albeit the contrast stuff is not so much about layout as about design.

This thread may bring out a LOT of arguments… ?? YOu can also of course look on the web, loads of good places to find stuff about it. https://alistapart.com is one, or https://accessify.com another.

Cheers

well said nic ??

I’m not too confortable using pure CSS also. But I guess you can use tables if you want to use them. I’ve seen WP templates that use tables.

I guess you can use them as long as they don’t cause compatibility problems.

Yes, yes, of course anyone can use tables for layout. Just like anyone can use a knife to turn a screw in. Doesn’t mean it’s the best tool for the job ??

Hi,

there’s nothing wrong with tables. Not for tabular data, not for layout – still.

Reasonable backwards compatibility is nearly 100%, cross-browser compatibility is also nearly 100%. Positioning is quite a bit more exact still than CSS.

If you create for users in certain geographic/political areas of this planet, you can completely forget CSS for anything more than basic coloring, if even that. Same goes for users who are not necessarily rich and on broadband.

As to accessibility – indeed needed when doing public service/government sites, else it’s again a question of users most likely interested.

One already makes a choice to exclude users when one doesn’t design for 640×480 and definitely excludes way more users this way, than when using tables for layout. OTOH if you publish a website specifically for the blind, you’d better choose the best option for this user group.

It’s always a choice of exclusion, as such a super-accessible CSS site will not be accessible for all users on old browsers and old computers (whose numbers are definitely much larger than those of blind internet users).

As to search engines and ranking – some of the topranked sites I built use tabular layouts, and they stay topranked. Curiously Google & Co. have no trouble at all finding them and indexing them properly. At clients’ order I have created frame-sites which also went toprank and still are right there. So much for such myths.

Thus – if you feel better using tables, do so. There are very simple, very elegant and extremely (c)lean tabular layouts, which absolutely do the trick.

lhk makes valid points, particularly in terms of “know your audience”, but I’d like to differ on hiw statement that:

“As to accessibility – indeed needed when doing public service/government sites, else it’s again a question of users most likely interested.”

There are many aspects and layers to this.

First, legally.

In the US, under Section 508 of the Vocal Rehabilitation Act, only Federal Government Agencies, or those providing services to said agencies, or those receiving a majority of their funding from said agencies, are required to comply with the Accessibility Guidelines of Section 508 (which incidentally covers MUCH more than just website but access to *any* electronic data).

There are arguments about non-governmental organisations and companies being included under the Americans with Disabilities Act. I think the jury’s still out.

More and more countries have adopted and are adopting online accessibility laws. Canada, UK, New Zealand, Germany, Australia, Denmark, Finland, India, Honk Kong, Ireland, Italy, to name a few…

Second, wider audience

Accessibility is not, contrary to popular belief, only about people with disabilities! It *is* about people using a wide range of devices, such as cell phones, PDAs, Lynx browser, etc, *as well* as those using screenreaders, voice driven input devices, etc. The most important thing for a website is its content, ultimately. Delivering content is important here, and if you have an unstyled page that delivers content properly, it doesn’t *matter* what it looks like if the person gets the *content* properly.

I completely disagree with the statement that only rich people on broadband can handle sites that are purely css driven. That’s ludicrous! In fact, if anything, it would be the reverse. A table driven layout often sees pages that are two and three time bigger than a css driven one achieving the same effect!

As to people in certain geographical areas of the world not being able to see the page, I assume you mean folks in places where they don’t have access to computers that can run generation 4/5/6 of the netscape/IE/opera browsers. This *is* a valid concern, although, if you have a css driven site, it is *easy* to detect the browser and deliver the CONTENT without the styling to those browsers known not to handle CSS properly.

Third, it’s about money.

While it may not be the law, it makes sense to have your site accessible to a wide audience, including people with disabilities. Ok, not everyone runs business websites, but for those of us who do, don’t forget that people with disabilities buy stuff too, with good money. If they cant’ navigate your site, they won’t spend their money at your place, no matter how good the product is.

If you are interested about this some more, which you probably aren’t by now ?? I wrote the following article for Mezzoblue (Dave Shea from CSS Zen Garden, who incidentally created one of the default templates for WP)

https://mezzoblue.com/archives/2003/08/10/accessibilit/index.php

Hi vavroom,

there is no legislation forcing webmasters of private sites to provide accessibility to disabled persons in Europe. If this were so, that would close down 99,99% of all private sites at least here in Europe and this is not going to happen.

Actually I don’t see any need for that. Sorry, but I didn’t build my house so that wheelchairs can navigate it easily, nor are there texture-coded switches for the blind in it. Why should I do just that in what is practically “my living room on the web”? Why should someone else? Why should anyone be forced to do something like this?

As I said, I can understand governmental sites needing full accessibility (they won’t ever get that, as I explained, perforce they will shut out those users with lesser hard- and software if they do), but private sites? No. All countries you cited only enforce government sites being accessible to the disabled. But then – it’s also only government services which are forced here in Europe to provide actual real-life accessibility either.

Then – on my own personal websites (as opposed to client sites, and I do have a few personal sites) I couldn’t give less of a damn whether someone wants to access those by a palm pilot or via a cell phone. They are not selling stuff, they are purely informational and if the users can’t be bothered to sit down at least at a laptop and read at leisure – well, ta-da and so-long!

I never liked tapes reading books to you during driving, I dislike the idea someone just skims through information painstakingly gathered and represented while waiting at the bus stop. That’s not the sort of users I write my personal sites for.

With clients I usually sit down for a long time and discuss about the intended audience and practical effect of their site. If they need disabled and on-the-fly users, they get that. If they don’t (and most don’t), I don’t bother bending over backwards for that, especially when there are perfectly good reasons to prefer a maximum of crossbrowser and backwards compatibility. It’s also a question of budget. Few clients have the dough to pay for multi-level sites.

Any of the tabled sites I built which currently are still up and raking in heavy traffic are way faster than the majority of recent, pure CSS-driven sites. WAY faster.

For one thing most of them are static, for another a convoluted CSS file can be a tad larger and more cumbersome for a server than a single, static html page to render. And – as I already once explained elsewhere – CSS is properly rendered only on modern machines and using modern software. And with modern, I mean truly up to date. This *is* expensive, want it or not.

As to content without CSS – I often browse with it off, it’s – for 99,99% CSS-sites – a pain in the behind to even try to navigate from one article to the next. And it’s mouse-abuse. ?? Seriously, that argument is the worst one you made. Unless someone is so masochistic as to love cramps in his right middlefinger with all the scrolling he needs then.

Lastly, it largely depends entirely on product whether or not you even have disabled people as potential customers. To cater to a minuscule minority which can’t even in 10 years bring back in the money it took you to pay the webmaster to create that nifty accessible page for you, isn’t very logical. Of course, if you sell Braille printers or glasses that is usually different.

But on the whole the commercial clients I so far dealt with had (in their real shops) less than 1% disabled customers, and a potential of 1% is no reason to invest a larger sum in (unless you sell highend luxury goods).

That’s real, pure, down to earth business thinking and not even on my part, it’s what clients say when asked about the topic. They can do without those customers and no one can twist their arms to serve them.

Ok guys. Put down the Mountain Dew.

I use both – tables and css – cause I can’t get the layout to work properly in IE, the browser most of my visitors use – and ultimately, that’s what it must come down to – if I only had a small number of IE users, if most of my visitors were using firefox, I’d ditch the tables no worries.

Hi marko,

yes, that’s for me one of the main reasons why tables still are and will be for quite a while yet a perfectly valid choice. IE7 isn’t going to change this when you have a good look at the specs.

Oddly enough I’m using tables because FireFox won’t display my page properly.

Whenever I have a CSS div with a background image set tp say 700 pixels wide if I add a padding to the left side of that div of say 15 pixels then in Firefox 15 pixels of the background image is sticking out the side of the page!

That’s not a standards issue, it’s not an IE issue it’s just Firefox being weird, it’s better overall but it’s not perfect by anymeans.

Anyway thanks for all the great replies, I think I’ll stick to using tables.

See this presentation: https://www.hotdesign.com/seybold/

Your problem is not that Firefox is weird. IE is weird, and is not following the standards there. You should read up on the CSS box model.

Hi again,

sorry, but half of this is absolute bull.

The CSS file size alone e.g. of a medium-customized WP site is already 12kb. That’s yet without graphics and text and called template files. Spliced all together an average index or category page has at least 40-60kb, still without any articles displayed, just with the bare bones (CSS file, index template, sidebar template, header and footer templates, site graphics) called from the server. And these bare bones get called from the server, want it or not, with each page. All of them.

Using a tabled design I don’t even need 30kb to reproduce those bare bones in one html page.

Thus, what is saved isn’t really bandwidth, it’s server space and that’s currently as cheap as peas.

This article invalidly and illicitly meshes the good points of CMS with CSS. That’s idiotic. You can OF COURSE use a tabular template for a CMS and are able to not only re-use it all across the site, but you can also re-design in a split-second as well. That’s absolutely no thanks to CSS.

It’s not code which messes with search engines, it’s stale content and little outside interest. I manage to get high and top ranks for tabled sites just as for CSS sites, and it’s got nothing at all to do with code. I manage to drive the rank to tops even without SEO, solely through regular updating, good and quality content, and lots of serious and real backlinks. Unless you have a site competing with a gazillion of others of the same content, that’s absolutely all you need to do to reach frontpage Google rank on your keywords. I even managed to drive non-self-hosted forums (actually hosted on free-forum-services) to the frontpage on Google that way.

And once more, browsers of the 4.0-family and below will NOT display CSS properly – and this usually means 1 mile length of content tops, and somewhere far, faaaaaaaar below some snippet of navigation, with the user having to continuously abuse his mouse to jump from one item to the next. It means no illustrating graphics, no logical color scheme, no ease of nav. Depending on where you are and where your users are, this can amount to up to 50% of all visitors.

So, if you use an argumentative stance, do use valid arguments – and not invalid or construed ones.

lhk –

I feel I must respectfully disagree with some of your opinions ??

First of all, accessibility isn’t necessarily *only* for the disabled. It’s also for the elderly. The elderly (especially within the US) is quite a growing population. The need for text-resizing and screen readers, as well as other accessibility options are *necessary* for this growing population. Screen readers *do NOT* read through tabular websites well. Especially when the styles are mixed with the content. CSS makes accessibility *much* better because the readers (AND search engines) read, basically, the code of your site. Just like we read a book – top to bottom, left to right. In *both* cases of accessibility and SEO, the stuff at the top of the page is deemed most important – so if you can get your content at the top of the page, then that is best.

This is something you *can* do with CSS, but not with tables (especially with complex layouts).

I’m not saying that table-based websites *can’t* be indexed and held in high rankings by Google (et al) BUT to say that going the CSS route is a “myth” in *assisting* with rankings is..IMO…bad form. SEO is *never* ONE particular thing you do in your site. Yes, content is king. But so are valid, incoming links and the way you arrange your page. CSS helps in the “page arranging” area better than tables. Valid coding also helps. But no one ever said that CSS, alone, will cause your site to shoot up the ranks. It’s multiple things that bring up your rankings – table-based or not.

As for cross-browser issues – that’s mainly due to the fact that IE is a bad browser. Most other browsers you can name off the top of your head are *standards* compliant browsers – meaning they follow the standards as they are now. If you code for these browsers, then the sites you code in CSS *will* be cross-browser compatible – EXCEPT for IE. Then, all you have to do is apply – and I may note here, this is even an IE method that THEY THEMSELVES tell designers to do – a conditional comment with a few lines of code to fix the IE issues. Ie is only the “most used browser” out there because most people use PC’s that come bundled with it, and aren’t computer-savvy enough (or care enough) to get a better one. But, funnily enough, the number of people that *do* care is actually rising – which is probably why Microsoft is working so hard to make IE7 a lot like Firefox when it comes to these issues.

As for other countries and people using 4- browsers – well, that’s something *you* need to look into from your own stats. But as a general rule, browsers 4- are so far outdated that the percentage of the population using them is 1% or less. (https://www.w3schools.com/browsers/browsers_stats.asp – for one example) But that’s just generalitites – you should always check your own stats and see what *your* audience uses, and then apply your site coding in such a manner (for example, I code my sites to work in IE5+ – and yes, that includes the Mac – but in the last year or so, I’ve not seen a single person – other than myself – actually use a browser that old to view my sites, so I’m currently debating on even letting 5- browsers go).

But marko – again, if you code for a standards-compatible browser, and *then* worry about IE, you’ll have no issues whatsoever. It honestly only takes *very* few lines of code to “fix” a site for IE – mostly it’s fixing margin and padding issues because that’s the main thing that IE renders improperly.

And on a personal note, for me, the real reason I use CSS-based design rather than table based is 1) my code is *much* easier to read, fix, adjust and navigate through when I’m designing, and my sites are coded and up in half the time it used to take me to do it in tables – it’s just *cleaner*, and 2) I’m a true believer in standards. I know W3C isn’t perfect right now (who IS?) but the idea that there is a goal to create standards for designers so that we *don’t* go through these cross-browser issues. The end goal is to make all browsers that are created have a standard to work from, so that what you create in *one* browser will work as expected in *every* browser. I work towards that end result. Personally, I feel that if we keep relying on old, outdated methods then it just makes that progression to an easier base for ALL of us that much more difficult.