Among web designer, the use of HTML tables is religiously prohibited for layout in favor of pure CSS. Sure CSS is great but concerning portability it’s often a pain to get proper results without a bit of tweaking.
The only way you can perform horizontal layout with CSS is through the use of floating elements and width properties. Even if I managed to make proper designs using floating elements, the stability of the result are often a bit… inpredictible, especially for Internet Explorer.
Web designers says: “HTML pages must only contains the semantic of the document and not it’s structure”. It’s nonsense. Float elements are not about layout, their primary use is for a block to float inside a text paragraph — like for images in a word processor document. It’s not really layout. Worse! it take a lot amount of computation for the browser to render the page.
I’m not saying to give up CSS, but use tables for what they are, don’t hesitate to use them for the global layout of your web site. As soon as you need proper horizontal alignement, tables are great, they give predictible and browser compatible results. After all, the original goal of HTML was actually to structure documents, semantic went later.
There is a good article on the topic on the Apple Developer Connection site, Web Page Development: Best Practices. Interesting and pragmatic.
Web standards are great but since they’re are not yet fully supported, HTML tables are still a valuable tool for web designers. And ask yourself, how many time will you “skin” your web site?
Never, I guess.
CTO at
Comments
There are more than just purist reasons for demanding separation of presentation and content layers. Accessibility demands that the markup remain purely semantic. The web is too littered with sites that use tables to hold together layouts that could be accomplished just fine with proper knowledge of CSS. The biggest obstacle to overcome is inconsistent rendering between browsers, which does take some tweaking but is worth the effort, in my opinion. I’ve skinned most of my sites several times in the last year, and I just overhauled my blog for fun, and I did it in half an hour. On the other hand, I struggled through setting up a design for a CRELoaded site that used an excess of tables and put 10 hours into making a terrible design that could have been prevented if the software put out semantic markup to begin with. The arguments for standards are pretty strong.
Tables should be relegated to holding tabular data. We need to learn to design without them. CSS Beauty, Zengarden, CSS-website and others contain plenty of proof that the web no longer needs table based designs to produce beautiful layouts.
Brett Terpstra17 August 06 at 12:56 am
Sorry, my address was submitted wrong on the last post… just in case you were going to follow it
.
Brett Terpstra17 August 06 at 12:56 am
There are more than just purist reasons for demanding separation of presentation and content layers. Accessibility demands that the markup remain purely semantic. The web is too littered with sites that use tables to hold together layouts that could be accomplished just fine with proper knowledge of CSS. The biggest obstacle to overcome is inconsistent rendering between browsers, which does take some tweaking but is worth the effort, in my opinion. I’ve skinned most of my sites several times in the last year, and I just overhauled my blog for fun, and I did it in half an hour. On the other hand, I struggled through setting up a design for a CRELoaded site that used an excess of tables and put 10 hours into making a terrible design that could have been prevented if the software put out semantic markup to begin with. The arguments for standards are pretty strong.
Tables should be relegated to holding tabular data. We need to learn to design without them. CSS Beauty, Zengarden, CSS-website and others contain plenty of proof that the web no longer needs table based designs to produce beautiful layouts.
Brett Terpstra16 August 06 at 6:56 pm
Sorry, my address was submitted wrong on the last post… just in case you were going to follow it
.
Brett Terpstra16 August 06 at 6:56 pm
I agree with Brett Completely –
Most arguements I see for tables simply come back to the fact that they are “easier.” However, as you learn the techniques and methods for using CSS layout you find that not only is it quicker and easier to develop sites in CSS (that render properly in all browsers), you can also achive several other very important results as well.
Try making a table based layout that can be switched between one and two collumn’s for easier reading and visibilty.
Try creating a site that has the content structured for screen reading/search engines in terms of code, but visually is arranged astheticly.
I have yet to run into a situation where I wanted to develop a design that I could do in tables but not in CSS. You simply need to learn the methods and techniques.
CSS-P Does work if you take the time to learn it, and it will only get more and more adopted. Those who have already been using it will have a significant advantage over those who will have to adapt when tables are finally, and absolutely put to rest.
Ross Johnson17 August 06 at 2:52 am
Horizontal alignment is easy in css, however vertical alignment is not. I use tables to handle vertical alignment. I’ve seen a couple of work arounds, but none that are very elegant.
Display tables in the css for non-IE browsers and playing with the padding/margins in IE.
Cyberlogi17 August 06 at 3:40 am
I agree with Brett Completely –
Most arguements I see for tables simply come back to the fact that they are “easier.” However, as you learn the techniques and methods for using CSS layout you find that not only is it quicker and easier to develop sites in CSS (that render properly in all browsers), you can also achive several other very important results as well.
Try making a table based layout that can be switched between one and two collumn’s for easier reading and visibilty.
Try creating a site that has the content structured for screen reading/search engines in terms of code, but visually is arranged astheticly.
I have yet to run into a situation where I wanted to develop a design that I could do in tables but not in CSS. You simply need to learn the methods and techniques.
CSS-P Does work if you take the time to learn it, and it will only get more and more adopted. Those who have already been using it will have a significant advantage over those who will have to adapt when tables are finally, and absolutely put to rest.
Ross Johnson16 August 06 at 8:52 pm
Horizontal alignment is easy in css, however vertical alignment is not. I use tables to handle vertical alignment. I’ve seen a couple of work arounds, but none that are very elegant.
Display tables in the css for non-IE browsers and playing with the padding/margins in IE.
Cyberlogi16 August 06 at 9:40 pm
For complex layouts that do not work well cross browser (like the dreaded three column layout), I see nothing at all wrong with a table to force the columns left and right.
I use CSS for everything else, including all layout within a page. But when I need to look up a painstakingly researched HACK to get a column layout working in CSS across multiple browsers, then it no longer becomes a solution… it’s part of the problem. Tables work in more browsers, are far easier to get working correctly without hacks, and do not need to be ‘researched’ prior to using.
I use CSS for all in-column formatting, because it does this well and without requiring hacks. But for column layout CSS is not yet mature enough to do this easily. It requires too many hoops for me to be comfortable with it. When CSS3 comes out, perhaps with better column layout features (and hopefully with better browser compatibility), I’ll look again.
Myrddin
Myrddin Emrys17 August 06 at 6:04 pm
For complex layouts that do not work well cross browser (like the dreaded three column layout), I see nothing at all wrong with a table to force the columns left and right.
I use CSS for everything else, including all layout within a page. But when I need to look up a painstakingly researched HACK to get a column layout working in CSS across multiple browsers, then it no longer becomes a solution… it’s part of the problem. Tables work in more browsers, are far easier to get working correctly without hacks, and do not need to be ‘researched’ prior to using.
I use CSS for all in-column formatting, because it does this well and without requiring hacks. But for column layout CSS is not yet mature enough to do this easily. It requires too many hoops for me to be comfortable with it. When CSS3 comes out, perhaps with better column layout features (and hopefully with better browser compatibility), I’ll look again.
Myrddin
Myrddin Emrys17 August 06 at 12:04 pm
I can only agreed Myrddin.
Frederic Brunel18 August 06 at 1:07 am
I can only agreed Myrddin.
Fred Brunel17 August 06 at 7:07 pm
Actually, it’s generally IE that’s not mature enough for CSS. Anyway, I certainly didn’t expect to convince Frederic to change his ways after one comment, nor did I expect him to agree with me. I will simply cite the dozens of coroporate sites that are having the good sense to switch over to pure CSS layouts (3 columns and all) as shining examples of good, clean web design. Personally, I don’t care if a site validates or not, I just like semantic markup, completely free of design elements.
Brett Terpstra18 August 06 at 12:15 pm
Actually, it’s generally IE that’s not mature enough for CSS. Anyway, I certainly didn’t expect to convince Frederic to change his ways after one comment, nor did I expect him to agree with me. I will simply cite the dozens of coroporate sites that are having the good sense to switch over to pure CSS layouts (3 columns and all) as shining examples of good, clean web design. Personally, I don’t care if a site validates or not, I just like semantic markup, completely free of design elements.
Brett Terpstra18 August 06 at 6:15 am
I think we’re at a stage where a growing percentage of designers will dismiss your work if they see tables used in the source code. Table proponents generally don’t care one way or another – if anything, they’re impressed by pure CSS layouts. So for the sake of job security, if nothing else, I recommend moving away from tables ASAP.
That said, I still use them (I’m not a designer, though)
YodaYid28 August 06 at 6:58 pm
I think we’re at a stage where a growing percentage of designers will dismiss your work if they see tables used in the source code. Table proponents generally don’t care one way or another – if anything, they’re impressed by pure CSS layouts. So for the sake of job security, if nothing else, I recommend moving away from tables ASAP.
That said, I still use them (I’m not a designer, though)
YodaYid28 August 06 at 12:58 pm
Job security? I’m not a designer either… And I don’t think using table is a sign of bad skills at all… I would tend to prefer hiring people working in a pragmatic way rather than people spending a lot of time in tuning a CSS.
Since most clients change their mind often in the early stage of a project — it’s very likely that the site will have to change drastically — I prefer to be pragmatic and reach my goal as fast as possible. After that, I agree to spend some time to rework on the site…
Actually, your view change quickly as soon as you have a business site in production… Better have to most pragmatic tools under your hands.
Frederic Brunel30 August 06 at 12:33 am
Job security? I’m not a designer either… And I don’t think using table is a sign of bad skills at all… I would tend to prefer hiring people working in a pragmatic way rather than people spending a lot of time in tuning a CSS.
Since most clients change their mind often in the early stage of a project — it’s very likely that the site will have to change drastically — I prefer to be pragmatic and reach my goal as fast as possible. After that, I agree to spend some time to rework on the site…
Actually, your view change quickly as soon as you have a business site in production… Better have to most pragmatic tools under your hands.
Fred Brunel29 August 06 at 6:33 pm
I didn’t say using tables was a sign of bad skills – simply that the trend is moving away from tables, and it could eventually be seen as a liability. I’m thinking of less of clients (who, in my experience, have no idea what’s going on behind the scenes anyway), and more of contractors who make the sites (and hire the designers).
YodaYid31 August 06 at 1:05 am
I didn’t say using tables was a sign of bad skills – simply that the trend is moving away from tables, and it could eventually be seen as a liability. I’m thinking of less of clients (who, in my experience, have no idea what’s going on behind the scenes anyway), and more of contractors who make the sites (and hire the designers).
YodaYid30 August 06 at 7:05 pm
>> will simply cite the dozens of coroporate sites that are having the good sense to switch over to pure CSS
So those people that don’t switch have poor sensibilities? Interesting. And here I thought struggling through hack after hack and conditional after conditional to get a 3 column layout working in CSS without having it cave in on itself under anything but pristine laboratory conditions didn’t make sense. Guess I need to start getting more sleep at night.
CSS – great for flexible application of style. Tables – great for dependable global framing. It’s hard to argue real-world results, no matter how hard the CSS Jihadists try.
Mike21 September 06 at 9:41 am
Also… it’s interesting to note that you have no reservations using Joomla, which utilizes tables at length to create predictable cross-browser interiors for the modules.
There must be a CMS out there that satisfies your lust for table-less layouts, even from what’s generated by the engine itself… no? I wonder why not.. hmmm…
Mike21 September 06 at 9:48 am
>> will simply cite the dozens of coroporate sites that are having the good sense to switch over to pure CSS
So those people that don’t switch have poor sensibilities? Interesting. And here I thought struggling through hack after hack and conditional after conditional to get a 3 column layout working in CSS without having it cave in on itself under anything but pristine laboratory conditions didn’t make sense. Guess I need to start getting more sleep at night.
CSS – great for flexible application of style. Tables – great for dependable global framing. It’s hard to argue real-world results, no matter how hard the CSS Jihadists try.
Mike21 September 06 at 3:41 am
Also… it’s interesting to note that you have no reservations using Joomla, which utilizes tables at length to create predictable cross-browser interiors for the modules.
There must be a CMS out there that satisfies your lust for table-less layouts, even from what’s generated by the engine itself… no? I wonder why not.. hmmm…
Mike21 September 06 at 3:48 am
Okay, so maybe I’m just being anecdotal, but I did a quick search and found a hell of a lot of sites using tables.
Amazon.com Ebay.com Linux.org Apple.com CNN.com NYTimes.com Google.com
Maybe we should boycott these companies for supporting such terrible web design standards.
Kudos to Fred for speaking up.
john5 October 06 at 6:43 pm
Most commercial web sites are using table because it’s easy to maintain coherency between browsers and because efforts and costs of development are low.
That’s what we call constraints. It tooks years for browsers vendor to stabilize tables rendering and it will take years to do the same for CSS. In the meantime, we can still make sites with standards in mind but with embracing production constraints.
Frederic Brunel5 October 06 at 7:35 pm
Okay, so maybe I’m just being anecdotal, but I did a quick search and found a hell of a lot of sites using tables.
Amazon.com
Ebay.com
Linux.org
Apple.com
CNN.com
NYTimes.com
Google.com
Maybe we should boycott these companies for supporting such terrible web design standards.
Kudos to Fred for speaking up.
john5 October 06 at 12:43 pm
Most commercial web sites are using table because it’s easy to maintain coherency between browsers and because efforts and costs of development are low.
That’s what we call constraints. It tooks years for browsers vendor to stabilize tables rendering and it will take years to do the same for CSS. In the meantime, we can still make sites with standards in mind but with embracing production constraints.
Fred Brunel5 October 06 at 1:35 pm
As someone who has just put a toe in the water of web design using tables and CSS in Dreamweaver (gulp), I must confess that I find the puritanical tone of the ultra CSS fundamentalists quite scary. So, it’s quite nice to find someone suggesting a little flexibility of attitude.
Charlie5 March 07 at 5:54 pm
As someone who has just put a toe in the water of web design using tables and CSS in Dreamweaver (gulp), I must confess that I find the puritanical tone of the ultra CSS fundamentalists quite scary. So, it’s quite nice to find someone suggesting a little flexibility of attitude.
Charlie5 March 07 at 10:54 am
boo! youre evil too!
Jeff19 December 08 at 12:00 am
[...] thought this war was over, and that pragmatics won. But it seems that web designers are still struggling to [...]
Tables vs CSS | Fred Brunel11 February 09 at 8:24 pm
well for me having a simply layout is great, specially google =), but if you visit my site you will see that it really has its own layout.
document management4 April 09 at 11:25 pm
“Float elements are not about layout, their primary use is for a block to float inside a text paragraph — like for images in a word processor document.”
There you hit the nail on the head.
Roland Pater30 June 09 at 8:07 am
“Float elements are not about layout, their primary use is for a block to float inside a text paragraph — like for images in a word processor document.”
There you hit the nail on the head.
Roland Pater30 June 09 at 12:07 pm