Tables for layout? Yes or No
Wednesday April 26, 2006
I got this comment a few days ago, and I was wondering what you think:
Tables ARE positioning elements!! Get over it. Table layouts are as old as writing but typewriters are really where we see the TAB key being used to line up information for display purposes.
Tables are robust where CSS layouts often are not and by the time you have added in the masses of CSS work arounds to make all browsers work some of the time, table layouts can often end up with smaller downloads.
Let me say it again - tables ARE layout structures.
Comments
Of course tables can be used as layout structures, but they’re certainly not the best way of doing things: Why tables for layout is stupid.
CSS layouts can be as robust, and even more so, than table layouts, it’s just a matter of learning new techniques: Bulletproof Web Design.
There is a problem with css layout in than Monopolist Explorer and other browsers use a different box model. Monopolist Explorer includes the border and padding width as the block content width (which seems to make more sense as one would like to layout by block size), but other browsers do not. Thus it takes considerable fiddling to do columns in pure CSS. I’ve tried CSS column templates that look beautiful as templates, but when you start adding stuff they fail, so you end up fiddling and fiddling.
Tell me. Why do you still use tables at about.com?
I can understand the frustration with the issue of work-arounds for specific browsers, but I think this is an adoption issue. Once (hopefully!) all the browsers really adopt the standards, CSS will be much more effecient than tables. Change is sometimes painful, but that doesn’t mean it’s not worth it.
I would say it’s a definite no-no for table layout see Introduction to tables para. 6.
The W3C Web Content Accessibility Guidelines do make the following point, however:
“If a table is used for layout, do not use any structural markup for the purpose of visual formatting” (see Tables for layout)
but I think that’s just so they don’t upset too many ‘old-skool’ web designers!! ;P
Hey Bill,
Frankly, I’m not really sure what the actual reasons are for the table-based design that is used at
About. This design is several years old, so it may be as simple as that.
And before you ask, I don’t control the design or HTML of this site. I WRITE about HTML and Web Design for About, but I don’t write their HTML/CSS/etc.
– Jennifer
Sure it is difficult to do padding AND margins at the same time, but the work arounds are pretty clean for IE (even though they break the page on the w3c validators!) Also, I’m doing a lot of internal reports where tables would make sense for the data, but I find that a simple well styled div structure makes building these reports significantly easier to follow as there are less tags distracting me from making the report work.
This is the problem I run into when building sites. I start off with the idea of doing pure CSS but by the time I start delving into getting it working in all the browsers it just falls apart. Using tables is unfortunately the best route for consistency. Ideally, yes, CSS would be the best, but until the browsers will read and interpret everything the same way (which will probably never happen) I can’t see going pure CSS. A mixture of the two right now is the safest IMO.
I wrote the original comment and I stand by it.
Tables produce robust web designs easily. I don’t need to worry about compatibility, I just get on with it. It saves time and money and gives an excellent result.
Indeed, the results ARE accessible on all modern screen readers and the like especially if you are sensible and the resulting HTML is often smaller than nested divs and spans with their accompanying CSS.
Why do people have problems with this? Is it because someone SAID tables were bad? Is it because older accessibility tools had problems?
“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.” (W3C)
This seems to imply to me that I can use tables for layout even though:
“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media”
MAY is the operative word here - the usage of suchs systems is minute and only the oldest systems don’t work anyway.
“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”
Thats just rubbish. Of course it MAY, if you don’t pay attention. But I’d rather have that problem than end up with overlapping columns and other oddities that you get commonly with div/css based layouts.
When I want to lay something out in a rectangular layout, tables will probably always be the best option. When I want linear layouts I’ll use divs. In both cases I make suitable use of CSS.
J.
PS: zoom in on the parent of this page to see typical overlapping elements that result from div\css problems. The sponsered links box has text that exceedes its boundaries - very common and it would not typically happen with tables (not that I would have used a table there anyway as it happens).
J.
1. CSS is as solid for web page layout as tables once you learn how to use it properly.
2. CSS is more flexible than tables because tables force everything into a grid structure while CSS allows for fluid placement. For one task I was able to replicate a 103×5 table using only 50 divs to produce an identical layout.
3. Those using web readers, handleld devices, etc that can’t display the table properly or at all can still handle a CSS version (in fact you can write different CSS versions for different media).
4. Using CSS separates the content from the presentation and makes for faster loading web pages that are easier to make template changes to at a later date.
5. It is possible to install a user Javascript into your web browser to provide nice alternate row colour coding for tables. If you install such a script then real tables containing tabular type data will be much easier to read and those sites using tables for layout will look really weird.
I’m sorry but experience with CSS/DIV layouts shows clearly that they are not as robust in any browser currently available no matter what you do.
However, I am NOT saying that CSS/DIV layouts are better in many situations. I DO use them where they are appropriate but I DONT think they are always appropriate when you want to do a grid layout.
In many cases, people are using fixed sized layouts to overcome div/css limitations and that rarely (IMO) results in the best (most flexible) solution.
3. Really? Do you have specifics? I don’t know of any current generation browsers that do not support tables? CSS support generally seems worse.
4. Separating CSS from HTML does NOT make the page load faster. Good practices in writing HTML and CSS makes the page load faster. Seperation of CSS from HTML CAN be useful for maintenance, especially on large sites and with multiple people working on the site. Once again though, this has NOTHING to do with using tables for layout. I still use CSS for formatting tables, divs, etc. I use the table to apply a structure to the display - exactly what you are doing with nested divs, etc. There is no difference.
5. I can install all sorts of client side JS to make other peoples sites look weird!! What kind of argument is that? I can also install client side CSS or JS that will make div layouts unreadable - so what? If you want to make someone elses web page look “better”, you need to know what you are doing not simply overwrite everything.
Regards, Jules.
I would love to use CSS & div tags for layout rather than tables but, as many people here have pointed out, CSS layouts are all too easy to break. I’ve used that layouts that are recommended in the books & CSS websites, but it takes me all of several seconds to break any one of them; sometimes with the mere addition of long sections of text. And as a designer, I don’t always have the luxury of dictating how my designs are going to be implemented.
So, until the bugs are worked out and cross-browser compatibility issues are resolved, I have to go with tables if I’m designing a professional site.
I’ve been trying a number of the css/div layouts I’ve found again recently for my own site redesign. Most of the examples use a lot of horrible css hacks and nested divs in order to get close to a robust design - but you can still break them very easily and the most successful (if you can call it that) seem to stick to fixed width columns and so loose a lot of flexibilty for the viewer.
Tables work - for all but 1 in a million cases. Just how many disabled users with old screen readers are there anyway? Does anyone have ANY hard evidence for this anecdode? I’d be happy to hear from anyone.
Jules.
“3. Really? Do you have specifics? I don’t know of any current generation browsers that do not support tables? CSS support generally seems worse.”
What Stephen was referring to is PalmPilots, PDA’s, cell phones, BlackBerry’s, and the like. Do the research - most of them can display a customized CSS (designed specifically for them, in addition to one designed for traditional desktops and laptops) than they can tables.
Bottom line is this - who is the site’s target audience? If you’re designing for a company that exists in a country where the best browser available is IE 4.0 or the site users are older and use 640 screen resolutions (so you can specify as easily using tables) then fine. Use tables all you like.
However when you’re desiging for the 21st century, and for sites which will be viewed in modernized countries with ever-changing browsers and standards, then it’d be “hip” NOT to be square.
I design using CSS because I want my sites to be stable 5 or 10 years from now when all the browsers out there have gotten with it and are concerning themselves with the developers AND the end users equally. As it stands, I’m on a crusade to convince everyone I know to use Firefox, because it’s the only browser I know that doesn’t make ANY sites go wonky. If something better comes along, or FF suddenly falls apart, then I know that the sites I’ve designed will still maintain their standard of excellence.
Call it snobbery, call it a “silk purse”, I really don’t care. I call it being prepared for what might come along as opposed to sitting in the stone age of design simply because of a lack of desire to learn how to use the new tool properly.
One more thing - name ONE blogging system that uses tables successfully. We all know that blogging is going to take over the world someday, and if you can’t (or won’t) design for CSS, you’re going to swiftly find yourself out of a job.
Adaptation is key in this business. If you can’t go with the times, you’re going to find yourself with nothing to do.
Are you on GLUE? Tables are not for layout, they’re for tabular data. Using them for layout is a piece of trickery dreamed up in the early days before there was a better, cleaner, smarter way to style text. And if your designs are just too hard to execute in CSS, then maybe you need to rethink your designs so that they suit the medium you’re working in, or put on a pot of coffee and learn a technology from THIS century.
I like tables, and CSS both. Which I use sort of depends on what website I am working on.
According to site statistics, some of my sites have higher proportions of visitors using older Windows versions, and even older browsers. For them, tables make more sense — they were more stable and consistent way back when.
As for the comment about using CSS to be stable for the next 5 to 10 years, luck to you. My prediction is that new business models and new technologies will continue to be introduced. That the new tech will be influenced by how existing and older technologies are used. That we cannot count on ‘emerging’ technologies being adopted more widely, or persisting in their current form. What was the foundation yesterday (remember the tag?) may be ‘deprecated’ tomorrow. Ruby, rails, CSS, AJAX, each will evolve from where they are today, some will gain in popularity. Some will actually maintain backward compatibility to keep what works today still working tomorrow. I recall the PC’s sold for being easy to upgrade — with replaceable daughter cards for CPU, for memory. And they didn’t last a year on the market.
Tables are relatively stable, for almost all segments of the online community. CSS is relatively stable, this year, for segments using current generation Windows XP and current browser generations. But that doesn’t help when you target blacksmiths, muzzleloader re-enactors, or small farm and horse owners.
Even today, at the end of 2006, we trap the browser version to provide alternate style sheets. Seems like we are still looking for a common, useful, stable means of designing and implementing web sites. And I have to wonder what the best choice will be in one or two years.
I get a little tired of the rah rah CSS rah camp. CSS is a great idea… if it worked properly. As others have pointed out it’s not a fluff and fold situation thanks to various browsers, platforms, etc., I’ve never seen a table format get hosed across a wide variety of testing but I’ve seen CSS go to hell in a hurry.
Another huge web design contingent the CSS crowd turns their nose up to, but they’re there, so deal with them, is the smaller time designer who use WYSIWYG design programs, none of which adequately do CSS beyond text and some rudimentary handling. Yeah yeah “real designers don’t use WYSIWYG editors” would only show some rampant ignorance, but that’s often the case with the shrill CSS crowd.
Until CSS gets better supported there’ll always be tables, deal with it and stop being so righteous with CSS elitism. Find a way to make CSS easy for everyone than maybe they’ll get traction, until then, tables will be used, so just deal with it.
C.F.: You said that some people feel that real designers don’t use WYSIWYG editors, but in my experience the line is actually drawn between “coders” and “designers”. Coders don’t usually use WYSIWYG editors, or if they do, they use tools like Dreamweaver which incorporate both good code editors and good WSYIWYG editors. While designers don’t use anything but WYSIWYG editors (or again tools like DW).
The problem, as I see it, is that a) CSS is hard to learn and b) browsers are a very hostile environment to design in and for.
I don’t know who you’re speaking to when you refer to “CSS Fascism” and people being “righteous”, but if you’d read many articles on my site you’d see that I believe that CSS is a valuable tool, just like tables are. I also advocate the use of Frames where necessary - not a popular position, let me tell you.
Perhaps next time, before you get angry and begin throwing around terms like “fascism” and “righteousness” you take a step back and look at why you’re so upset. I’m happy to entertain diverse viewpoints on this site, but name calling is not appropriate.
Just after and durring school I learned something very interesting. I learned that knowing how to use a PC and a Macintosh for graphic design was a huge boon to my future. The reason behind this is because I can work for more than one type of person. If I need to work with a Macintosh, I have it down, and the PC is well covered with my background.
I feel that tables are the same in this aspect. Knowing how to use Tables and CSS is a huge boon to making what you need to get done quickly, done. Several people have been standing on one side or the other on this question, but only a few of them have said that both are good. Which is very true. Those of us who grew up in the HTML world love tables because we know all about them. Those of us who grew up with CSS are in love with IT because of the power that it brings to the table.
I get to be right in the middle. Before school I hadn’t even heard of XHTML, when I was done I could (can) write any piece of code that is needed to get the job done. I have found that Tables and CSS can work together very well to make simple and neat code that doesn’t need to be complicated.
CSS is great because it can direct everything to where it is going. Tables are great because while they are repedative with their tags, they can make it simple to put everything together without much hassle.
Here is a suggestion for you all.
* Those of you who love Tables, go and learn how the DIV tag works with CSS for tabular layout.
* Those of you who despise tables, go and make a good page layout and try to use only tables.
My site was done 100% with table layout with only using CSS to make it look the way I want it to. It’s an easy page that uses elements from both that I needed at the time and nothing more. I think it’s a great page.
First of, I’d like to point out to the FireFox advocate that FireFox is STILL one of the easiest browsers to crash. I did use it, once upon a time, until a lovely friend of mine demonstrated just how easy it was to crash them.
Second, I’ll admit, I’m not a big fan of tables OR CSS; I prefer frames for layout [even if things can get real messy real fast]. Iframes are a lot more useful than most things. To be honest, the only thing I see CSS doing correctly still after a year [since this is from 2006] is for the vast multitude of social-networking sites [facebook, myspace, gamerbio, etc]. Most of the pages that I look at that have pleasant layouts are still done in tables. As the other guy said, CSS is all well and good, but the problem lies in that it’s still not consistent enough across browsers. Added to that is the fact that CSS is still easy to jack up, and multi-browser support in it is still a pain; whereas tables, on the other hand, generally do more or less what you want them to do. I would also like to add that it is unlikely for tables to ever be completely fazed out, and that if they are, it will NOT be until all the bugs in CSS are ironed out [which judging by its pitiful process so far, is going to take awhile]. The only problems I ever seem to have with tables on the other hand are typically the same problems I occasionally face with frames–stupidity on my own part.
The bugs are not in CSS, the bugs are in browsers… Until the majority of people will use ie6 for browsing, it will be hard times for CSS. Nevertheless, I switched from tables (well, i still use them for tabular data) to divs and I don’t regret it…
One of the best things about FF are the web developer tools…
BRITTANY:
The big issue with frames is that content within frames cannot be parsed by search engines, so if you’re using frames, toss your SEO out the window, because Google and the like won’t even see it.
CSS was initially created to give designers a way to adjust the layout of a website separately from the content with an easy to learn and use language. As it happened, CSS actually became more complex than intended (though I think a far cry from difficult), but also much more capable and robust, as well. It accomplished, dead-on, the capability of editing the design of a site without the alteration of site content.
Can any of the experts out here shed some more light into this debate, from a perspective of what people term as ” Progressive Layouts” . This was main reason (IMO) for the switch from Table to CSS layouts.