Tables vs CSS design

**felgall** · Jan 11, 2009, 18:10

Originally Posted by esem

Personally i wouldn't even use tables for what they're made for, I would just use CSS instead.

Not using tables for tabular data is just as incorrect as using tables for layout. You need to use the correct HTML tags that define semantically what those tags contain.

**esem** · Jan 11, 2009, 18:17

Could you explain why not use css for tabular data?

Will tables actually render faster? The difference in code size should be negligible as well.

(Not defending myself, just curious for the future)

**kohoutek** · Jan 11, 2009, 19:32

Nobody said you cannot use CSS. CSS is the markup, a table is an HTML element. Tables are designed to present tabular data. You can use CSS to style your tables.

**Dan Schulz** · Jan 11, 2009, 22:31

Originally Posted by esem

Could you explain why not use css for tabular data?

Will tables actually render faster? The difference in code size should be negligible as well.

(Not defending myself, just curious for the future)

Let me put it to you this way. When marking up a Web page, the best thing you can possibly do is forget that style sheet languages even exist.

No, I'm not kidding. Yes, I'm 100% dead serious.

**sooner28** · Jan 11, 2009, 23:40

Originally Posted by axeray

Speed Baby!

When you visit a site you only download the CSS file once and it is cached for the entire time your at the site.

this is probably the best reason. less work to go through. using tables you have to manually edit every thing every time you want to change something. a good solution is using css with tables.

**itop10** · Jan 12, 2009, 00:34

CSS for sure. They contain less code, easy to maintain and improves loading time.

**felgall** · Jan 12, 2009, 00:37

Originally Posted by Dan Schulz

Let me put it to you this way. When marking up a Web page, the best thing you can possibly do is forget that style sheet languages even exist.

No, I'm not kidding. Yes, I'm 100% dead serious.

I agree with you. You shouldn't be thinking about how the content should look/sound until you have created the content. After all the content needs to work for any media and as soon as you start thinking appearance you will be thinking of a particular media. If you absolutely can't let go of the appearance while producing the content then think web reader and write the content the way you want it read out when the device the person is using to 'view' your site is a set of speakers.

**run.haole.run** · Jan 15, 2009, 18:38

This one of the better discussions I've seen on this topic, so I decided to jump into the mix. Also, I apologize for not reading every single post if I repeat something that already been said.

I've seen quite a few arguments for css-based design that focus on ease of site maintenance and layout changes. Basically stating that if you change the stylesheet, those updates are seen in all pages that use the stylesheet. But what about the curious case of MVC (Model View Controller) site programming? When you build a site using MVC, a change to a single View will be seen in all pages that load this view. In this case it doesn't matter if you've designed the view using tables or css. You change one file to effect many pages on the site.

Thoughts? I welcome your opinions on this. I've really been going back and forth with tables versus css. The accessibility deal is really the only pure win I see for css. Table-based layout is much more cross-platform and cross-browser consistent. I spend quite a bit of time tweaking my css to ensure that it loads properly on the various flavors of IE (6, 7, and 8 are all out there in large numbers) as well as Safari, Firefox, Opera, and Chrome. I can lay it out once with tables, and I know its going to look the same in all browsers on all operating systems.

Then there are the long pages with lots and lots of content. I think that's a bad design, I try to avoid forcing the user to scroll at all if I can. But long pages happen. This is a win for css too. You've got to load the entire table before any of it is drawn on the scree, where css can draw as it loads. So perceived load time for a page can be much faster with css layout on long pages.

Again, thoughts please!

Aloha,
Colin

**felgall** · Jan 15, 2009, 21:30

Originally Posted by run.haole.run

But what about the curious case of MVC (Model View Controller) site programming? When you build a site using MVC, a change to a single View will be seen in all pages that load this view. In this case it doesn't matter if you've designed the view using tables or css. You change one file to effect many pages on the site.

There is also the case of usability. With CSS you can have separate designs for handheld, screen, print, web reader, braille etc. If you were to use tables then the same page layout is used for all of those even though it really only works for one or two of them leaving the people using the other devices with a jumbled mess.

Another aspect not affected by your suggestion is that using tables will mean that your HTML is not as descriptive of what it contains as it would be if you wrote semantic HTML around your content. It will therefore rank lower in the search results than it might if it used more appropriate HTML.

While it may not make a great difference depending on internet connection speed, using tables usually means larger HTML files than you'd have without the table and the common CSS file only needs downloading once whereas the table needs to be downloaded in each page. Pages using table therefore would download slower than pages using semantic HTML.

There are lots of reasons for using semantic HTML and CSS rather than tables and not just the one that your suggestion overcomes.

The other consideration is that once people stop using IE6 and IE7 the CSS table commands will be able to be used to do table layouts for web pages (all commonly used browsers except those two support CSS tables). That would have all the benefits of using semantic HTML and using tables since your layout table is defined once in the CSS.

**barry-M** · Jan 29, 2009, 02:19

Tables where designed in html to hold data. CSS is a freeer (dont know if i should have put in 3 E's there but there in) design tool/language what ever you need to call it and is designed to be used for layouts. Tables are good for beginners who need to get used to how a site should look and to quickly grab the concept of website design but the end result will be limited in comparison to CSS.

**jemple** · Jan 29, 2009, 15:59

The bottom line is that until IE renders the same as the other browsers then tables will be used for layout. css with tables is a good compromise unless you want to live on forums asking dumb questions about why your div is floating over something else in IE.

Example today, I was tweaking a script on my site and whoever wrote it cobbled together a huge mesh of divs that linked to over 30 style values. I tried to do it right for half an hour, and then screamed "why am I bothering!" bunged it in a couple of nested tables an bang! It was layed out fine....and I went on to have a productive day.

**jemple** · Jan 29, 2009, 16:00

Hmm, and what is the current user base for IE6 , still a fair percentage of low tech users I believe. So we could be waiting two more years for this utopia.

Originally Posted by felgall

There is also the case of usability. With CSS you can have separate designs for handheld, screen, print, web reader, braille etc. If you were to use tables then the same page layout is used for all of those even though it really only works for one or two of them leaving the people using the other devices with a jumbled mess.

Another aspect not affected by your suggestion is that using tables will mean that your HTML is not as descriptive of what it contains as it would be if you wrote semantic HTML around your content. It will therefore rank lower in the search results than it might if it used more appropriate HTML.

While it may not make a great difference depending on internet connection speed, using tables usually means larger HTML files than you'd have without the table and the common CSS file only needs downloading once whereas the table needs to be downloaded in each page. Pages using table therefore would download slower than pages using semantic HTML.

There are lots of reasons for using semantic HTML and CSS rather than tables and not just the one that your suggestion overcomes.

The other consideration is that once people stop using IE6 and IE7 the CSS table commands will be able to be used to do table layouts for web pages (all commonly used browsers except those two support CSS tables). That would have all the benefits of using semantic HTML and using tables since your layout table is defined once in the CSS.

**oddz** · Jan 29, 2009, 18:48

Originally Posted by felgall

Not using tables for tabular data is just as incorrect as using tables for layout. You need to use the correct HTML tags that define semantically what those tags contain.

At the same time you could argue that table data is merely a list of items so a list is just as appropriate as a table. For creative reasons I've used a list before to markup table data, then styled it into columns to achieve a certain effect. A table is just really a list with horizontal display properties the way I see it. Don't get me wrong, under most circumstances I would choose a table to mark-up table related data, but I don't think its wrong to once in a while reconsider based on achieving a particular layout.

**felgall** · Jan 29, 2009, 18:56

Originally Posted by jemple

The bottom line is that until IE renders the same as the other browsers then tables will be used for layout.

A version of IE was released in 2001 that does that. The only reason for retaining tables at that time was that Netscape 4 doesn't render the same. Once Netscape 4 and IE5 ceased to have significant numbers of users any excuse for using tables incorrectly disappeared. IE6 is as capable of rendering pages correctly using CSS as any other browser. Admittedly there are a few commands that it doesn't support but then tables don't support those things either.

As long as your page starts with a valid and complete doctype the corrections for IE6 are minimal and they'd still be there if a table were used.

In fact using a table for layout is the easiest way to break the page layout for the most browsers. It is ompossible to get the page looking the same across more than a small fraction of browsers by using tables.

Some people just don't want to learn how to use a hammer (CSS) for knocikng in nails (layout) when some other tool such as a plane (tables) can be used to bash it in instead.

**felgall** · Jan 29, 2009, 19:00

Originally Posted by jemple

Hmm, and what is the current user base for IE6 , still a fair percentage of low tech users I believe. So we could be waiting two more years for this utopia.

You mean IE5, not IE6 since IE6 supports the standards quite well enough to make tables for layout completely unnecessary. It actually took about 4 years after IE6 was released for Netscape 4 and IE5 use to fall to the point where that utopia you mention was reached - back in 2005.

**Torgut** · Jan 29, 2009, 19:56

Good morning. I do prefer work with tables. Reasons? Probably none that you (guru's and etc) will recognize as valid:

1) My first approach to CSS regarding layout design was traumatic, a few years ago, with the browsers rendering in diferent ways and positions.

2) Tables do the work. What I want is a website done. I recognize value in some (or most) of the reasons mentioned for using CSS. Although I don't recognize they are so important that I can afford to learn CSS now. Some other, like the SEO, I don't accept at all. I saw CSS pages with hundreds of lines of preparatory non-content CSS. What was that about, of pulling relevant content to the top?

3) My dear tables are not so mean as most of you describe. They take a few tens of second extra to load (render)? Most probably. Nothing that a common (or most of uncommon) web user will notice. They take some extra Kb? Oh yes. Again, nothing that a common (or most of uncommon) web user will notice. Or for most situations, not noticeable in the bill regarding bandwidth.

4) Still, excluding a few top-notch cases, CSS based websites are of arguable visual quality. Ah yes... hundreds of thousands of table based are like that too. But I'm thinking about professional work, hoping that none of you have the idea of saying that who works with tables is not professional. And anyway, this is my opinion, it's personal, don't have pretensions to be of any value so I don't really feel the need to provide a solid support to these impressions.

Well... I could write a little more, but it's late, I'm sleep, already in bed, and I'm going to the land of dreams right now :-)

"Tables where designed in html to hold data."

Oh and the World Wide Web was designed to hold text, or little more.

**Kyle W** · Jan 29, 2009, 21:45

3) My dear tables are not so mean as most of you describe. They take a few tens of second extra to load (render)? Most probably. Nothing that a common (or most of uncommon) web user will notice. They take some extra Kb? Oh yes. Again, nothing that a common (or most of uncommon) web user will notice. Or for most situations, not noticeable in the bill regarding bandwidth.

Oh, but this is not even really why CSS is better. Not even the 'ol "Tables where designed in html to hold data.". No my friend. It comes down to the work involved. Original design and re-design is cut way way way down, once of course you know it's ins and outs. But also among a few other small reasons, that escape me right now, because I am also tired. Tired as in I need to sleep, and also tired as in I wish threads... oh so many threads like this would just finally die. Someone please make a 'sticky' with pros and cons and lets move on with our lives. Its 2009, how long have these been popping up in forums, and how much longer must it go on?

**oddz** · Jan 29, 2009, 22:53

The only people who support non-semantic mark-up are those stuck in the past and those to lazy to keep up with the industry. A key indicator of credibility that you truly understand the difference is that you talk about semantic vs. non-semantic mark-up rather then tables vs. CSS. Its not about tables or CSS its about creating semantic mark-up - period.

**felgall** · Jan 29, 2009, 23:22

Originally Posted by oddz

A key indicator of credibility that you truly understand the difference is that you talk about semantic vs. non-semantic mark-up rather then tables vs. CSS. Its not about tables or CSS its about creating semantic mark-up - period.

Even worse are those who talk about tables vs divs - those are the people who generally catch divitis.

Let's hope that IE8 comes out soon and all IE users upgrade because the we can tell people that if they want a table layout then they should be using CSS tables and not HTML tables.

**eparkila** · Jan 31, 2009, 19:04

It is my understanding that CSS is preferred to tables because of two main factors:
1. Speed, a CSS page is processed faster.
2. Ease of changeability, when you need to change a design feature it only needs to be changed in the .css page rather than every table on every page.

**felgall** · Feb 1, 2009, 01:11

Originally Posted by eparkila

It is my understanding that CSS is preferred to tables because of two main factors:
1. Speed, a CSS page is processed faster.
2. Ease of changeability, when you need to change a design feature it only needs to be changed in the .css page rather than every table on every page.

The main reason is that HTML is supposed to semantically define what your content is and CSS is supposed to define how your page looks when displayed using one of a whole range of different devices. Using HTML tables for layout creates a jumbled mess in web readers and braille printers for example.

**molona** · Feb 1, 2009, 02:09