HTML: Why are Tables so evil?

I've been pondering around this issue a long time. And I hear it from everywhere, but why EXACTLY is it that tables are evil to use in website design?

I personally really like using tables, they are easy to use, you can get a design set up in a matter of an hour instead of days and it just... works. In all browsers. Without using 3 workarounds so it works in Opera, IE and FF. Without using a hack so that I can place that one thingy there where I want it to be, and have it stay there in all browsers.

Now, I don't have a problem making a website using divs and css only but it's a painstaking experience. When I have to use hacks and workarounds to accomplish some simple layout so it looks the same in all browsers, it becomes part of a problem, not of a solution. Why not use a table instead? I could have this thing up and running in 10 minutes, but using this DIV there and those CSS properties with a little JS hack takes me a day if I'm lucky.

I'll quote a phrase I've seen on another website the other day, unfortunately the comments didn't help me any further, as its just a back and forth between "tables are evil", "no they are not!":



Most of my clients demand websites in DIV and CSS only because someone told them that tables are evil. But _why_exactly_ is that?

Answers that are not valid:

- If you know CSS well enough you can do the same thing just as well without using tables. (Again, WHY avoid tables in the first place?!)

- Tables render slow (I doubt that anyone using a 200MHz PII Processor uses it to browse the internet on a regular basis. With processor powers over 500 MHz that issue really cant be noticed *at all*, yes, maybe a robot with a 2 Teraherz processor would complain cause it would seem like an eternity to him... but a human? the time difference is merely the blink of an eye)

- Tables can be inflexible (not as inflexible as using div's with floats and relatives and absolutes and.. and and...)

- Tables don’t "degrade" (de...grade...?)

Well I'm not sure myself but I always thought it was a matter to provide accessibility to disabled persons by not using tables as layout but just for data which belongs in a table and needs to be presented in a table.

But I'm really interested in other's opinions on this too.

Tables make using dynamic content more work, they require lots more lines of code to accomplish the same effect that css could do with less.

Also you don't need to use workarounds for cross browser support, just need more advanced css

Css isn't just divs

If this site goes back up check it out
http://friendlybit.com/css/levels-of-css-knowledge/

the same page but working
http://www.stumbleupon.com/s/#2sbQTw/friendlybit.com/css/levels-of-css-knowledge//topic:Web%20Development

Edit:
I can think of more reasons but am eating dinner so will post them later if this discussion goes anywhere : )

More links to help you understand : )
http://www.hotdesign.com/seybold/
http://www.hotdesign.com/seybold/03overview.html

Maybe you mistook me. I have no problem using Tables or DIV's(and CSS). It just requires a LOT more work using DIV's and placing them with CSS.



Which is a.. workaround, around the issue that you can't do it the simple way.

The whole point is: Why difficult if you can do it simple?

I would like to hear more of those reasons of yours :-)

If you look at the last link i provided it should provide all the information, including reasons why you should use css over tables.

Some of the reasons are things such as reduced file sizme, support for disabled users (i think tables can affect the way data is read when using web page readers).

Also as i said using tables makes placing dynamic content (either JS/Ajax or just PHP) more complicated.

Another reason is redesigning and maintaining site design consitency is more difficult, where as using css it is simple (sometimes just a case of a different css file)

Also using css allows sites to be redisigned totally just by using a different stylesheet instead of recoding lots.

Edit: Also i wouldn't count using more advanced CSS a workaround as when you start learning HTML you don't know tables to start and probably just use paragraph tags etc. then you find tables and use them, maybe that can be considered a workaround as well ?

I have to agree with Michael Schwarz.

I really love tables, and I really don't see any reason that using divs instead should be easier. It simply isn't.

The problem is the "weight" of the table tag.
A table implies tabular information, and devices like screen readers treat tables just like that.

Depending on the search engine, the search result might look crippled when using a table for design.

Another point is that you don't separate design from content anymore sicne you're using a table as design element.
Of course this is possible, but it's not clean, as when using divs and spans, they do not influence the display of the containing elements directly. The appearance and positioning is all done using CSS - there you have a clear separation between design and content.

Short:
Tables should be used for displaying tabular information, just as heading tags (h1, h2...) should be used for headlines instead of some oversized normal text.
Use the elements for what they were made for. Tables certainly were not made for doing layouts with them.

Apart from that I don't really think tables make things easier than divs, but I won't start a discussion on this one now. Find out yourself!


If I hired someone to do a website I would insist on proper CSS, without browser switches, without table layout, and of course it should validate at least XHMTL1.0 strict.
Everything else I consider as unprofessional Pfusch and not worth paying for.
For some private person it might be okay to use tables and do everything quick and dirty, but from someone offering website services I expect a certain professionality which includes following web standards.

I agree with firoball completely

The only reason i use tables is because i don't have the time or skill to implement CSS for my work as i am mainly server side, so i use tables until i get a designer in.

Well i once had to do a presentation about barrier-free websites and tables was one of the big no-goes. I showed an example with a text reader and the tables totally messed it up.

BUT i don't mind using tables for designs sometimes. I used them for my latest website too. CSS is cleaner, that's true but
1) i was too lazy this time to use div and told myself "i will replace the tables later on with divs" but that's already some years ago
2) i doubt people who are blind will go to my website and check out my games/art so it doesn't really need to be barrier-free.

Though CSS is a must-have for professional webdesign nowadays and i use it on the most websites i do (for other people).

Just as side note:

I did a test yesterday using FF3.
I loaded my old website 4warriors.de which is layouted using tables and I loaded my new website firoball.de

The table design was a LOT slower and showed some reformatting during display, as the final size needed to be adjusted by the browser.
The CSS page was faster and the build up was cleaner.

So yes, tables are slower. Maybe not concerning code size, but concerning proper display in the browser.


The bad thing is, that some browsers like IE6 are not interpreting CSS very good, whch currently leads to a lot of extra work (depending on how complex the website is).

Preferring layouting with tables is just an excuse for someone's own laziness.
You can use tables for a prototype, but as I learned: Prototypes may NEVER EVER be distributed.

i think too that a layout without tables would be clearer and better. but i´m using tables yet, cause its easier to create for me.

i think a problem is, that people (like me) got too many problems by creating a (floating) layout only with css. and to tell the truth: i dont want to grapple with it long. i want a good tutorial with examples. so if you know a good one, please tell me

The best way i would say is to look at other sites which use css only layouts and have a look at the stylesheet to see how they position elements etc.

Ever checked out http://de.selfhtml.org/ ?
Thats my first resource for looking things up.

I think that it also depends greatly on the type of site. If im going to make a quick portfolio site, that is 1 or 2 pages, and that Im not going to be changing very much dynamically on, as well as a style that I will be sticking with. Ill do tables.

If I'm setting up a e-store, building a login/bio/task system, I'll use css because the user can select different styles, I can keep certain areas a little cleaner, and to be honest, my code is a little easier to read.

All that aside, I'm for from professional, it takes me forever just to get a box to look right in one browser with css, so I only do it as a hobby, like I got paid $300 only to build a system for a group I'm a part of where users can log in, send messages to eachother check dynamic updates, upload and download minutes/reports, added a shoutbox, and set up a system where each feature can be allowed/disallowed per person.

At least you got payed.
To me only one person said thanks, and now nobody is using the appointment planer or even taking a look at the planned appointments.

Everybody asking for some web stuff will now get the answer "no", because I'm fed up.
Unless he pulls out some money.

eek. i hate tables now

i helped someone put their site back together. they made it in tables and then changed image sizes etc. gameover.
takes forever trying to fix it back up, moreso the more complicated the layout and content are

if it were css it wouldn't have taken long at all (especially for someone who knows the right properties), probably quicker than setting up tables in the first place. but then changing it around is so easy

so ecommerce level of website - no tables.
simple unimportant site? tables will do i guess

Well, I am never working with tables, but I can fully understand people using them. The web standards were made to help people doing things easier, but the missing support of the browsers (yes, IE, I'm looking at you) made it more complicated and only the easiest but at the same time dirtiest variant was proven to work properly in all browsers with little effort.

But now, where all big browsers were proselytised to the right path, it should be a looooot easier to work with proper standards and hopefully we won't hear excuses for bad web design so often anymore.

PS: and of course good web design is not only some esoteric stuff some web designers worry about (of course it is, too, it's like going farting and burping to a good restaurant), but it's directly related to speed, usability and maintenance costs.

If I remember correctly Joomla is also using tables?
But why, when everyone says tables are bad?

Maybe Joomla was done by programmers.

joomla is a cms and the only thing that uses tables is the interchangeable template. Presumably they focused on the development of the framework etc. and just hired a designer to do a default template.

i find this chart to be very true. i also sometimes still end up using tables because some layouts simply don't work or are a pain to do with css. i don't think tables are that evil. not every page needs to be barrier-free...

IE is such a !"§$% browser! rendering bugs, javascript slow as hell, no canvas tag,... someone should write an activex plugin for it that embeds an entire modern browser engine like webkit.

Smarty seems quite good.
Though that doesn't fix the CSS in IE crap.

A few days ago I stumbled upon a very nice css framework - called 'the 960 grid system' - and was first very sceptic, after having a look at it I was stunned.
The css does all the layout nearly itself.

There is a great video tutorial to get the concept and to get into work.

I changed my mind about layout w/o tables completely.

now, I looked at that 960 video, I must say, I might just be convinced to use it.

960 is nice but i did similar stuff myself already and like he said in the video it's not a solution for everything.

haha, google had the same idea i mentioned above:
http://arstechnica.com/open-source/news/...wser-plugin.ars

oh, thanks for the link alex
i´ll have a look

i´ve the same problems like in the chart . and even i cant ban the internet explorer, i can try to make my css-layout better

After layouting 2-3 pages with the 960 system I say:
It saves you a lot of time but as mentioned in the video you should have a certain amount of CSS experience to fix some things (Backgrounds, Margins in some special layouts, etc.)
I'll definitely use it a lot in the future and have a deeper look into other css frameworks.

@Tempelbauer and others who are interested:
Here is a link to a german article about that chrome-in-IE-plugin:
http://www.heise.de/newsticker/Chrome-verkleidet-sich-als-Internet-Explorer--/meldung/145750

http://css-discuss.incutio.com/?page=HundredPercentHeight
i just came across this IE6 hack. another reason less to use tables. but there still are some cases where tables just work better...