Which should you use for layout CSS or tables? The consensus these days would be CSS, but I don’t always agree with that. Let me stop you right there before I’m burned at the stake for design sacrilege.
While I’ll agree that CSS gives you control to do things that one can only dream of with HTML tables, they aren’t perfect. 
For starters… how many hacks have I had to learn to make my site work in Internet Explorer and Firefox. Then when you think your layout is just about perfect you check it in a legacy browser, and it’s time for more hacks.
For everyone that says it’s CSS or nothing remember that your beautiful layout only works because of a hack. What does that make you?
It seems like to be part of the web design “in crowd” you have to religiously use CSS or else. There are entire websites that have sprung up on the misguided determination to rid the world of tables. These websites give the all important CSS hacks a place to go and pat themselves on the back and tell each other that they’re better than everyone else.
To what end. Are CSS layouts better in any way than HTML table layouts?
So what is the big deal in all the CSS only fervor.
HTML tables are a lot easier to code, and therefore a lot easier to learn. I think it is wrong for the enthusiasm of newbies to be crushed because they learned how to code HTML tables. It is like crawling before walking.
I will personally continue to use CSS layouts. Why? Because you can do so much more from a design standpoint, and in time the table using newbie will see that also and learn the black art of CSS. Till then be nice to your fellow designer and hug a HTML table coder today.
 |
 |
 |
 |
I’ll agree with you that newbies should not feel crushed. It’s not the ultimate evil or anything to use tables. What you say is true.
However, I think that nowadays people should start out learning CSS layout rather than tables though. The benefits of CSS are huge.
For example:
Speed of development, tables are actually hard too – all the cells can be tough to keep track of. CSS can speed up development when you know how to do it.
Maintainability, clean HTML code is easy to edit.
Flexibility, separate your content from design.
Accessibility, many problems are avoided by using CSS.
Yikes. Look out your window… Zeldman is going to get you.
I would say that CSS does have strengths over tables beyond capabilities… right? Context sensitive presentation (print styles, screen, etc). Accessibility is usually brought up. Nested tables are not much easier than learning floats and such. Easier design updates maybe. I would say that in the end, given the same level of craftsmanship and expertise, a CSS based design would have some advantages that a table based design would not.
That said, there is a part of me that would agree with you. Good luck.
I think you have more scope to customize your code for search engines by using css.
You can put the most important content at the top of the code, although it is displayed lower down on the page – from my experience this does make a difference.
It is true that the majority of (but not all) CSS based layouts depend on some kind of hack to work. But I’d also like to point out that using tables for page layout is inherently a hack as well. So the hack argument is a moot point.
Completely agree. Both styles of design have their purposes on the internet and there are many cases where they work together. Personally I develop tracking and database web-apps and a table design far outweighs the full CSS design but CSS still plays a critical part in ensuring that it has an appealing look to it.
In many parts, you could say that DOM and Tables, although can be used individually, are separate types of coding. Like javascript and PHP, both can be used apart but together as server and client side scripting can produce something else completely.
CSS allows us to separate content from presentation duh… do tables do this? didn’t think so… Please do not embrace table based design because the longer people are around saying “it’s ok” the longer it will be around. Evolve.
Tables are easy to create and layout. Most people tell me to use tables for data displaying purposes only, which is quite seldom.
With tables its a much more difficult process to alter your design, you have to go into the code that writes out the html. Where as if done with CSS you can redo the design quite easy with just changing the CSS file.
Well.. the advantage is ease of modification. You mark up the content, and then you style it. Want this element somewhere else? Easy.. reposition it with CSS. With tables, you get a design, slice it up, code it, and then the whole thing is locked into place. No more moving things around.
Sure, HTML still matters when doing CSS layouts, but no way to the extent tables rely on it. So if you’re working on a template that will be very static, by all means, go with tables. If you want flexibility or ease of modification down the line then tables probably aren’t the best choice. Whether your designs should be static or flexible is another argument altogether, and there is a lot of weight towards the flexible side: i.e. the web isn’t a print medium — it’s used by many different devices with different capabilities, so the experience will be different on each. This is where flexibility of CSS comes in handy — you want to style the markup, and have the ability to provide several layouts for different media, instead of getting locked in with a rigid table structure.
Wow, people are still debating this. Dude. Seriously.
Actually, there is – http://webdesign.about.com/b/2008/12/21/seo-reports-tables-for-layout-affect-your-seo-efforts.htm
It’s not the table-layout which is easier to learn, its the behaviour of the elements into the table. The only answer to your title-question could be – CSS!
You look at this “problem” (if we can call it like that) in the wrong way.
As an example I’ll tell why I use CSS based designs:
- cleaner code (less html)
- screen / print layout view versions
- easy to update / change / add sections of html code or change the layout
- can’t remember more now
And what CSS hacks? The double margin in IE6 on float divs?? Oh get serious.. a display:inline and problem solved.
Designing for IE 5 4 Netscape 4?? WHY!??
They are like 10 year old browsers. I have around 80 websites on my server from different domains and I don’t have ie5 visitors and the ie6 visitors are a merely 4-5% but that on only on some sites.
As a side note. I usually see this kind of debate at old established web designers/programmers that are so used to writing tables and so afraid of learning CSS
that they just refuse to change.
I would have to agree with Matt. I have been a website designer for over 8 years now and I begun working with tables and too had the attitude that I thought tables was better than div’s. However I decided to give the CSS trend a go and found it to provide me with a lot more options than tables.
I think anyone who tries to convince themselves that tables are still ok has probably not figured out how to use CSS and div’s correctly yet.
I agree it’s easier to just stick to something you are used to but in the long run you need to be aware that you will not move with technology and in turn will land up at the bottom of the chain. Thus creating more complications and in the long run it would have been a lot easier to just move to the next stage when you had the chance.
I too want to say good luck!
Tables = Tabular data.
CSS/Divs = Page divisions/areas
That’s how it should always be and the only way I would work.
Personaly I agree with you. There are ups and downs to both techniques. I usualy prefer CSS for the layout because it’s easier to maintain later on (for me) and tables for the information that must be put in tables.
Sometimes when I have to edit code that is written by some retarded human being and I don’t want to rewrite … redebug and re..something his code …. I just put it in tables
and change the layout.
As you have said … there is no difference for the customer… The only thing that matters is the Work/Payment ratio
Yea you should be burnt at the stake.
Move on man!
Seriously?
Tables are for presenting tabular data and intended for that purpose, not laying out pages.
This post is funny for two reasons.
One, you are obviously trying too hard for attention.
Two, your inexperience shines brightly enough to void any sort of point you were trying to make.
Completely disagree with you, no hacks are needed to make any valid CSS work in the latest browsers.
People shouldn’t be bothered about legacy browsers just those from the past 5 years, none of the other rubbish, that is the users problem, they should upgrade, compromising for old browsers is the exact reason they still exist, don’t do it.
As far as I am aware the only ‘function’ a table has that CSS doesn’t is vertically centering more than one line of text, and that is a sacrifice I am willing to make.
Tables are for tabular data, there is no argument.
Please, don’t tell people this… Make them do right from the beginning = CSS.
Your premise is faulty and here’s why. You say that your objection to using CSS for layout is that you often must rely on hacks for cross-browser compatibility. While this is true in many cases it is not true in all cases and if the design is well thought out and executed properly very few hacks need be leveraged.
Sure, this is an issue but you’ve forgotten one very big thing here. Tables are not meant for layout… they are meant for displaying tabular data. Essentially you are using a very big hack to achieve layouts by using tables as your structural element. Divs and Spans are structural elements, TDs and TRs are not. You are simply trading one hack for another.
Oh dear.
Ok, anyone going to even mention screen readers?
Yes some readers will ignore tables which are used for layout, but you have to specify which are layout. Hack anyone?
Also, the argument that search engines ignore tables, that a layout will work on all broswers in tables yadda yadda STILL DOESNT MAKE IT RIGHT !!!???
The attitude of “i wont do it properly because i can get away with it the way it is” stinks. I for one would not hire or work with someone like that.
Yes, my first site was table layout. Its great to get going in experimenting with a site. But learning CSS isn’t as hard as people make out. Getting very very good at CSS takes a long time.
And as for hacks…. pathetic excuse.
This can of worms can go on for years, and well done for generating an interesting heated debate.
Bring on more!
Mac vs PC anyone ?
You’re kidding right?….When I was learning how to build websites, I found that CSS was MUCH easier than learning tables.
CSS allows for a far less complicated sizing and layout of content…not to mention the fact that makiing changes in CSS let’s you make a global change all at once…how much would it suck if you wanted to change the table width of the main header on a 10 page website…having to go into each of those ten pages to make a change is just a retarded use of time…
There are so many advantages to using CSS. You are retarded.
“springnet Says:
Tables = Tabular data.
CSS/Divs = Page divisions/areas
That’s how it should always be and the only way I would work.”
Exactly, It cannot be said better.
And im still waiting to see what these “hacks” you speak of are.
Usually when someone writes about this its because they don’t actually understand CSS yet.
I get what your saying, I have debated that with myself and other people, but I’ll never use tables for layout again for one reason alone, that tables are intended for tabular data… If it is not, then why use a table. use all HTML elements for what they were created for, simple as that for me. When I disable my styles I don’t want my document still laid out in a table, it should flow naturally and make sense.
I suppose you are also supporting the use of 1 pixel gif spacers too! Just joking but I use CSS layouts all the time and I never have to use hacks. If you understand how CSS layouts work you should be able to achieve almost anything without browser specific hacks.
I the reason this keeps coming up is that CSS is great, but ….
It’s implementation is not what it should be.
You want a hack? How about making a row of elements. A very desirable and basic layout tool even when your content isn’t “tabular data” in a strict sense.
Try making a row in CSS without unecessary markup( ), or a hack like adding invisible “after” elements. One day this will be solved but I haven’t seen anything non-hacky that works with IE 6.
How about vertical centering??
How about cross-browser minimum heights for a container?
These are very simple, and desirable design ideas that don’t require dedicated tutorials to solve with a table.
Some of you missed the tongue in cheek position of this post. Please take a look at my redemptive post. http://www.webdesign.fm/redemption-css-layouts/
Be cool designers,
We use whatever we want, right? don’t be scared.
In the case, we have to use what is appropriate, then I’ll say CSS is for layout, table is for layout(sections) that requires a table to archive technically.
You can’t just ignore about 50% of the public
IE has not lost the war … for now