|
|
| Tables In Web Design |
By Tony Depledge |
Published
11/May/2006
|
Website Development
|
Rating: 
|
|
|
|
Page 1 of 2
Scarcely a week goes by without a post in a web design forum somewhere on the lines of, "how do I do this in css" or "..how do I replace this table with css". CSS purists all over the web have been promoting the idea that tables are bad for so long now that some people think they're breaking the law or worse if they use a <table> tag in their website. Well, I've got news for them - you are still allowed to use tables! Tables vs CSS This is not a css vs tables rant, and I am certainly not advocating a return to the nested table and spacer gif nightmare of years gone by, just a plea for common sense. A lot of people seem to think you have to use one or the other, but in fact CSS and tables can be used together. Much of the effort put into designing css only layouts involves using the "float" property to produce columns. While that is simple enough to achieve on a basic level, coming up with a method that produces equal height columns no matter which has the most content, where the footer stays below the columns, and which works correctly across all browsers has taxed experts for years. People are still coming up with new variations using all sorts of esoteric methods and hacks, such as negative margins, to do what a simple table has always been able to do. Tabular Data It is often said that tables were designed for presenting tabular data only and shouldn't be used for anything else. Well, its been said before - the world is full of things which were originally designed for one purpose, but which people found could be used for an entirely different purpose. The internet was designed for sharing scientific data - does that mean we shouldn't use it for anything else? In any case - what is data? If you ask me, data might be something like a product picture, description, price, "buy now" button, or menu, article, advertisement. Tabular data is surely data in which there is a unique relationship between one set of data and another e.g. all the data on one row refers to a particular product. Again, that surely could include price, description, picture, etc.
|
|
|
Comments
-
Comment #1
(Posted by Nick Lo)
Rating
I fully agree that there are people who get confused as to whether tables are "allowed" in CSS driven web development. Even though the same answer has been repeated many times, I even see people asking how to display tabular data without using tables!
This suggests that either the messages coming from CSS "purists" (not a term that I like particularly) are being misinterpreted or that some designer/developers are not taking the time to properly understand HTML and CSS. I think your article aims to give some perspective on the issue however I find it a bit dissatisfying.
A look at the actual HTML specs (I choose HTML 4.01) gives a simple enough explanation for anyone:
"The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."
"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."
http://www.w3.org/TR/html4/struct/tables.html
You say:
"Tabular data is surely data in which there is a unique relationship between one set of data and another e.g. all the data on one row refers to a particular product."
You are not giving a clear explanation here as you seem to ignore the columns which are the key element of tables. In simple terms; if you need to look across and down or vice-versa then you have tabular data. So in your example "data might be something like a product picture, description, price" then yes you could display the product list as a table with each row being a specific product/item and the columns being description, price, etc.
You are also not mentioning the semantic purpose of HTML. Using a table is marking up the data in a way that says "this is tabular information" in just the same way that the p and h1/2/3/etc tags are saying this is a paragraph and these are headers respectively.
In using a table for layout you are, in effect, saying this leftcolumn, centrecolumn, rightcolumn are a row of data with a "unique relationship" of which each column is a specific attribute of that data. In reality these columns will contain all kinds of content from navigation to articles to featured content which even though they exist in the same row bear no relation to one another at all. I will not even bother to go into what relevance this has with regards to accessibility for small screens, screen readers, etc.
Now I'm not an academic developer/designer, I generally work for small businesses for whom most of the above is entirely academic. However they are employing and trusting me to make those kind of decisions for them. If you are only just making a transition from table based development to CSS based development then my advice would be to do what is appropriate for your skill level, timeframe and confidence. The point is not to say "the world is full of things which were originally designed for one purpose, but which people found could be used for an entirely different purpose." but to aim to learn and use the most appropriate tools for the application.
-
Comment #2
(Posted by Tuna)
Rating
about itme... the is CSS and there is I have to get this web site out and get paid ASAP with the biggest profit magin.. CSS is nice if you have lots of time and budget
-
Comment #3
(Posted by Scott Swabey)
Rating
Suggesting that a table is the "HTML element designed for being divided into rows and columns", and that the use of such an element to provide multicolmn layouts is in keeping with the w3c specification, is just plain wrong.
While there is certainly no law against using tables, using them for anything other than tabular data is abusing the use for which they are intended, and is non-semantic.
Have a deadline to meet and no way to figure out the css to provide the layout? Sure, use a table, but only in the same way you would use a sliced photoshop comp to demonstrate a layout. Then work on the css for the final layout. As you say, there are many ways to provide through css what seems so simple with a table. Research, education and trial and error will lead you to the solution that is right for you.
-
Comment #4
(Posted by ChesterTheBear)
Rating
Yay! Common sense!
I get awfully tired of purists. Just because they've got nothing better to do then spend their weekend creating convoluted ways to get CSS to do what a table does with a few tags doesn't mean we all have to.
As someone whith a company to run, who just dabbles in web design, it strikes me that two things drive the CSS nazis.
The first is ego, because they want to show us all how bloody clever they are. Yes. We can see that, now where's my website?
The second is that the more complicated they make web design, the more we have to depend on someone who actually understands how to make the code stand on its head and sing... which would be... oh wait... let me think... yes... them.
Well done Tony!
CTB
-
Comment #5
(Posted by an unknown user)
Rating
Was there a point to this article? I expected something more than just "go on, nobody will shoot you for using tables".
At the risk of ranting myself: the broad table-based column layout given will cause grief to mobile browsers, screen readers, and if you're designing for government clients, they'll throw it back at you and tell you to try again.
And anyway - solutions to the likes of the equal-height column problem have been around a long while, and an experienced designer will construct around those features, not wait until the "boss is breathing down their neck" to find a way... :)
-
Comment #6
(Posted by Alan)
Rating
You are spot on.
I created my first site using tables. It was an ugly beast. Then I started reading about how bad tables are. So I tried to do everything without tables and my output came to a halt almost. Testing against different browsers was a nightmare and you would fix one thing then something else breaks.
Well I am wiser now. I know that using tables (sparingly) is sometimes the most efficient method to use. Sometimes the CSS is an uglier beast than the tables.
-
Comment #7
(Posted by Montoya)
Rating
Constructing an entire argument on one small issue (equal height columns) is a waste of effort. If anyone can point out a situation where equal height columns are even a necessity, I'd be surprised.
-
Comment #8
(Posted by WJ)
Rating
I agree totally Tony, since when were div's designed to be placed side by side, they never were. If anyone has tried a flexible 3 column layout using only css & divs they'll know the amount of hacks thats required to be cross browser compliant.
Until all the browsers adhere to the same standard its not worth the hassle when 1 simple 3 column table does exactly what's required & allows for a fluid center column width.
-
Comment #9
(Posted by Ian)
Rating
I was beginning to think that someone had tirned out the lights, when up comes your article. I'm only just getting into web design, which isn't too bad for a 54 year old, and have seen numerous sites that are CSS in overload. I get the impression that some of these people don't know the basics of HTML and/or tables etc. The biggest problem that I've seen and had to remedy on several occasions is that the designer hasn't spent the time doing cross browser referencing. I thought that would have been mandatory in design. What's the use of touting any form of code over another when it isn't used correctly. CSS has it's place like anything else, but you're right, so has the rest, like tables.
-
Comment #10
(Posted by Tom)
Rating
I agree...The big deal with css is to be able to hide or show certain parts whether you are printing or not.
So you can combine tables and divs to get the same result without a huge number of hacks to make it work in both ie and firefox.
And as fo search engines, I have done a few sites that are no 1 and they use tables! With a few divs.....
-
Comment #11
(Posted by Mike)
Rating
"is there any great difference between these two"
Yes. The first example is semantically correct (your class names, however, are not), while the second is incorrect. It's not a simple matter of using less markup, although in most cases a CSS based site will use generally less markup than a table based layout. Using semantic markup is more accessible to non-visual UA's, more SEO friendly, and is just a better overall practice.
-
Comment #12
(Posted by Stephen)
Rating
Absolutely brilliant article, it is good to see someone with a common sense approach and refusing to go along with the crowd. I have come to the same conclusions myself and it is good to see someone who agrees with me.
-
Comment #13
(Posted by Simon Jessey)
Rating
I'm afraid I disagree with you. You have basically decided that it is okay to use tables for layout because it is easier, and you have tried to soften this stance by saying that either layout method is fine. I feel you have excluded the user agents than are not "standard web browsers" from the equation. Almost all atypical user agents, such as cellular phones, struggle with web pages designed around tables. Furthermore, since you don't necessarily know how your document is going to be accessed, you shouldn't use (X)HTML elements to control ANY presentation, because you may be misrepresenting the meaning of some particular chunk of content.
Using tables for layout limits the potential audience of a document. If you are in a controlled environment (a corporate Intranet perhaps), this may not be a problem. But for the World Wide Web, tabled-based layouts should be considered inappropriate. Keeping your content separate from the way it is presented is a far-sighted approach.
-
Comment #14
(Posted by Nathan)
Rating
If you care to google this issue you will find holes in all your arguments, particularly from an assistive technology point of view. Sometimes in life we make mistakes. I admire those the most who are brave enough to own up to them (a follow-up article with facts and research as opposed to view/opinion would be a professional thing to do for the web community).
-
Comment #15
(Posted by Michael)
Rating
I agree with this point of view, which is basically use what works for you in your given situation, and don't feel you have failed because you haven't created a full css site.
I have used both methods of coding sites - and I am a big fan of css layouts. My favourite example of what can be achieved this way can be found at http://www.csszengarden.com/.
However, the reality is that to create cross browser compatible multi-column layouts in css1, you need to use a whole heap of hacks (depending on what you want to do of course). I don't have any problem using a table for layout.
A real world example is www.bbc.co.uk - one of the world's leading websites.
-
Comment #16
(Posted by Ian)
Rating
Hehe... I can't believe the number of people who obviously call themselves web-designers/developers and who are only interested in getting a product out of the door!
I for one, spent many days toying with CSS and have finally a thorough enough understanding to use it - more quickly than tables. But that's not my point!
My point is, table layouts just don't compare to CSS layouts. Especially when it comes to accessability - and not just disabled users; disabled search engines - who are (in many cases) the most important user you could have!
So, get with the program. Stop using your fax machine as a photocopier (just because you can doesn't mean it's the ideal thing to do) and use CSS layouts. Your clients don't know, they probably don't even care. You should!
-
Comment #17
(Posted by Mame du Bois)
Rating
I opted for a CSS template for my Joomla site. Joomlashack do a great template called Simplicity which is pur CSS and considered to be one of the best templates out there at the moment for Joomla. However, I use tables in my actual content to make my pages look nice. Today I spent nearly half an hour trying to get my content to centre on the page properly. In the end I threw my hands up and stuck a table in - worked perfectly. As long as you don't overload and use them as a tool and not a complete solution you should be ok.
CSS is powerful but hard to get your head around sometimes especially if your not gifted in that department.
-
Comment #18
(Posted by http://sumof.us/)
Rating
(I'm not sure if html works in these comments).
Well formed CSS makes the following work
# screen readers and mobile devices
# accessibility for people with disabilities
# placing content before navigation
# machine translation services
Table layouts for most businesses are a lazy solution that ignore the semantic nature of HTML, as others have already commented.
Justifying the argument on basis of three equal length columns regardless of content length is a furphy. For most designs you know which is the longer column, for generic designs there are plenty of tutorials and designs available.
If your designer needs to use tables for speed or to maintain his profit margin, get a new designer. Professionals know when to use a table for technical or expediency reasons and when to do it right.
Sure many large and profitable websites use tables - eBay is one of them. That is normally the result of the age of the site, they predate CSS and it is a major task to redesign.
My first sites in the last century were table based, now I use CSS happily. My mum can't code HTML but her blog outputs XHTML 1.0 TRANSITIONAL and validates using CSS and no tables (except when posting tabular data). That makes her site widely accessible to the world.
Anyone who advocates tables as a workaround needs to research accessibility, standards compliance and future-proofing.
-
Comment #19
(Posted by Tabular-tuna)
Rating
Just a quick note for tuna who i think needs a little help with her web business, The use of css when used properly takes i would say about 50% less time to develop a website and will result in probably around 50% less ongoing development and maintenance time, which in the end means more of a margin out of smaller budgets. Looks like you need to re evaluate Tuna.
We have a nice saying in our very profitable web studio "But for Tabular data we dont touch tables with ten foot totem toting table less temptuos telegraphic .... " cant remember how that one ends but ill cut it short and say that for anyone learning how to design or wanting to make their web studio more profitable then "NO TABLES" and another reason for all you designer who have no idea why you dont get ranked well on the seo front remove your tables from your site and you will DEFINATELY see a massive improvement in rankings.
-
Comment #20
(Posted by NM)
Rating
I beleive that CSS is a fantastic and flexible method of site layout...but I find its major downside is that it takes far more concentration, time and energy to get it the way you want. If your a fast worker and don't keep tabs on the "neatness" of your code, then CSS can quickly get messy and confusing and it takes far more time to pinpoint an area in your code.
The plus I have found which is the main reason I am now getting into using CSS is the ability to change a sites design completley without having to rework the content...and changes can go to every page if you build it that way.
There have been a couple of things that have frustrated me so far about CSS, especially having to hack it to simply centre a block. Other than that, I am finding CSS to be really flexible and am slowly learning more advanced tricks.
-
Comment #21
(Posted by kenshi)
Rating
Well done! As the comments in this post represent, it seems that those of us who consider tables in this way seem to be in the minority. Most of the CSS apologists who critise the wish to do the same job in half the time, and offer the suggestion that css increases the site market profoundly are misrepresenting the facts. The suggestion that tables are suited to an "intraweb only", and are not suitable for the www because "you don't know what the use will be browsing on" is ridiculous. Cell phone and other devices have a long way to go before viewing a content heavy website is concerned. Due to that fact, the adoption rate of cell phone www browsing is very low. For now at least, that market is hardly reason enough to go through the quirks mode engineering that css offers.
The whole satisfaction of "code validation" is that the coder actually got their site working cross browser, and it still validates! To me, that's absurd. The two shouldn't be in battle. I was more than happy to start using css-only in my designs, but while in some areas I found it to be a revolution (background-position; border-style; -top; float etc), in other areas it was (and still is) severly lacking. The CSS community (kicked off by Zen Garden imo) promoted itself as ready for mass adoption. I think they called us over, and they were still getting ready.
-
Comment #22
(Posted by Peter Betts)
Rating
Here! Here!
-
Comment #23
(Posted by Dan Abrey)
Rating
I cannot believe the amount of people casting aside CSS when it is positively young in development. We haven't seen the best of CSS yet, but what we have seen is revolutionary in terms of accessibilty, ease of use and updating and semantics.
I'm no "CSS sympathiser", I take things as they come. If tables were fitter for a job than CSS, I'd use them. However, when I develop a website I develop a website that everyone can access and that's priority number one. If you don't want to use multiple hacks to make a three-column design work cross-browser, then why not? The bonuses in accessibility (use the Web Developer extension for Firefox or a text browser to compare both ways of doing things) far outweigh the inclusion of a few hacks, and the need for hacks will diminish with time.
Forward compatibility may be in question, but there are ways of getting round that. Conditional comments, for example, in my view are not a hack. In reality it's using an 'if' statement to serve up different styling, and that shouldn't weigh any guilt on even the most semantic-conscious developer.
Just take things as they come, use the best tool for the job, and stop getting such a chip on your shoulders about everything.
-
Comment #24
(Posted by Laughable)
Rating
This article is laughable, suggesting to people to use tables instead of modern layout techniques.
Tuna: CSS doesn't take a lot of time nor a huge budget, that just means you aren't familiar enough with CSS to produce a page in a timely manner.
Welcome to 2006.
-
Comment #25
(Posted by an unknown user)
Rating
PS - Hasn't anyone looked at CSS3 yet?
Multi-Column Layouts
http://www.w3.org/TR/css3-layout/
Template-esque Layout Module
http://www.w3.org/TR/css3-layout/
Tables, what?
-
Comment #26
(Posted by Steven Hambleton)
Rating
For all those who are 'dabbling' in web design then yes tables are fine, just leave them out of 'professional' web design.
As professionals we are bound to make sure our sites are cross browser supported and that especially includes accessibility.
For bigger sites, the bandwidth costs are nothing to be sneezed at.
Of course CSS can be used with tables but tables are meant for tabular data. Think of an Excel spreadsheet. What kind of data would you put in there? Not a resume thats for sure.
Taking the time to learn CSS and non table based layout means you take the web industry seriously as a professional.
-
Comment #27
(Posted by an unknown user)
Rating
Tony gives us a little more freedom to make things work. That's what I want my websites to do - work. And if tables work better, why not? Also, its much easier to use tables than css in wysiwyg design software - eg Dreamweaver.
-
Comment #28
(Posted by Francis)
Rating
Good article.
It has taken three versions of CSS, kicking and screaming against the idea over many years, to get to the point of supporting 'table-like' layout at last.
But until browsers support CSS3 reliably, tables will get you over the line. It's easy enough to assign classes to table components to achieve formatting and invisibility as needed.
Oh, and the billions of web sites that use tables now will continue to be viewable on new devices, owing to the smarts in the parsing software.
Having said all that, after getting your prototype layout up from paper sketch to table, the sooner you refresh it with CSS the more control you will have of its future development. Extreme positions for and against tables are like extreme positions for and against split infinitives, "up with which we shall not put!" (Winston Churchill)
-
Comment #29
(Posted by melanger)
Rating
tables or css is just an educational choice. if you spend your time learning how to use css properly then the development process becomes as quick or quicker than tables. plus you can get real design jobs.
my advice for beginners is this. your going to spend time learning, no matter which way you go. the choice is whether you want to be a developer who makes nice semantic and clean code and actually understands html or a developer who uses dodgy unsemantic unreadable inaccessable code to meet deadlines and really will only ever kind of understand html.
make the choice and dont look back. ps, this article's text is all out of whack in firefox, kind of funny for a topic like this.
-
Comment #30
(Posted by Mark B.)
Rating
Integrity be damned. I've got a deadline and need to be paid.
-
Comment #31
(Posted by Dominic)
Rating
I have switched to CSS but honestly, it's taken a long time to learn it. And still without using it regularly, I forget how to use the classes, the blocks, inlines, the div's vs the span's, the EM's vs the Px's vs %'s, what properties carry though, which ones don't, etc blah blah. It takes weeks and tons of testing to develop a layout that works.
And web browsers will never standardise, you will always have to deal with backwards compatibility, and every greedy web browser developer (I'm sure we can all name the one I'm thinkin of) will purposely make their browser incompatible so that you become dependant on their product. Think about it.
Tables though are simple to visualise and implement. And mobile devices are still too rediculously priced.
All up, well I agree that CSS is better, but the technology is unfriendly. Without the simplicity I will always hate it, kinda like I know vegies are good for me but I hate eating it. I can't blame people for sticking to tables.
-
Comment #32
(Posted by Peter)
Rating
Good article!
Though CSS got rid of the "font" tag, it is still too convoluted on the "div" part. The box model which has padding border and margin all on the outside is logically wrong, making positioning and alignment much harder than it should have been. This also makes percent widths virtually useless. - A 100% div with a border is wider than the screen.
Being able to separate content presentation into classes is really great. But separating content from presentation completely is never going to happen. Simply because content is part of the presentation and presentation is a part of content. - Inseparable. Just look at any modern web page overloaded with useless irrelevant information in the margins and you will know what I mean.
Table provide a simple cross platform way to separate content into consistent ares which are easy for seeing human to navigate, and they are not logically flawed like "divs". The blind robots will get better, they will adapt. We should be designing for the humans, not robots, standards or some mythical future technology.
CSS does make tables better, and it is an argument for using styled tables when ever appropriate, or the use of divs is just too convoluted.
-
Comment #33
(Posted by David)
Rating
This article is great. We, at our office, have "discussed" all this before. I'm glad to read the full spectrum of opinions. What's right or wrong depends on many things outside the world or development. I wonder if there really is a "standard". Definately not a common one. W3C needs to try harder to win over Microsoft, Adobe and all the major players--so we can all move on.
Submit Comment
|
Report a bug