6 ms·

A well written and compelling argument. Way above the average CSS/Table rant for sure.

by moe 18y ago

markup 18y ago
May I suggest reading "Everything you know about CSS is wrong" by Rachel Andrew and Kevin Yank? It teaches to produce table-like grid layouts using CSS.
- axod 18y ago
  Please paste a simple solution then using CSS, which behaves exactly like a table layout, and works in all browsers. I'm all ears...
  - markup 18y ago
    links does't support CSS, therefore "in all browsers" is a condition that can never be met.
    - axod 18y ago
      OTOH, links supports tables pretty well. Regardless, a solution that works in IE6,7,8 Fx2,3 Op/Saf/Chr would be sufficient these days I think.
      - markup 18y ago
        As the book states one cannot provide such a solution for all of them. I get your (and other people in the favour of the table argument) POV, but I simply do not agree. I suggest people to read http://www.alistapart.com/articles/understandingprogressiveenhancement http://www.alistapart.com/articles/understandingprogressivee... and the other (most recent) ALA articles on the same subject from Aaron Gustafson.
        axod 18y ago
        "I get your (and other people in the favour of the table argument) POV, but I simply do not agree." Don't get me wrong, I'm not against CSS. I use css for styling. Not for layout. CSS just can't do sane layout unless you're positioning and sizing things in terms of simple pixel values. If you want for example div C to be the same height as div A, then css is a failure. Either you use tables, or you use javascript and resize things on the fly which is pretty ugly+slow. All it'd take is to be able to do some simple arithmetic in css, and reference other elements... eg width: ((100% - leftCol.width)/5); height: max(leftCol.height, rightCol.height); I guess there's something to be said for IE css expressions... except allowing any js there is a bit overkill for most things and makes for a pretty slow UI.
        pj 18y ago
        So what you are suggesting here is not: "Do away with CSS" but rather, "Add some stuff to CSS" This isn't new. Computer Science is called computer science because it can change. Algorithms can be shown to be less efficient than another algorithm. Ideas can be shown to be incomplete, meaning, they can't solve 100% of problems. This is true in other areas as well. We still teach and use Newton's Laws to describe many concepts in kinematics, even though they don't do a perfect job. My point is that the solution isn't to scrap CSS, but to add things like you suggest, which would be awesome. The problem however is that the browsers aren't going to support those new formulas, so what do you do for all the browsers out there that don't support your math, but you still want the site to be accessible? Here comes in the problem with competition -- some vendors can't keep up, some customers can't keep up. IE is way way behind. Microsoft should just scrap the browser effort and focus on the operating system. FireFox is great, but it's buggy. Opera behaves strangely and the developer tools aren't as good. The point is that each of these browsers doing things differently is part of the problem. They are vendors of the tool we use to display our pages. We are the ones inconvenienced by their lackadaisacal attitude toward standards compliance -- and they are slacking too. The Standards bodies are slacking because there is no standard video format. There is no video tag. Oh wait, there is a video tag: http://www.w3schools.com/tags/html5_video.asp http://www.w3schools.com/tags/html5_video.asp But who supports it? Opera does. Not much else as of a year ago: http://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.html http://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.ht... Oh wait, no one uses Opera. You want to know the solution? Eliminate competition in the browser market. Oh your capitalist ears are burning aren't they? Why do we need IE, FireFox, Safari, Opera, Chrome, and on and on? We don't. They are slowing us down. Standardize the browser. Make it open source. Make it work on all devices. Make it follow the standards. Make it follow the standards by a specific date. Release a new version and auto update everyone so we are always all using the latest standards compliant browser. You argue it's against the american way. It's socialist. It's big government. No it isn't. It's not America, it's The Internet. The companies should comply willingly. Take all the best browser people from Microsoft, Apple, Opera, Mozilla, and Google and make a new body funded by domain name registrations and credit card transactions on the web. Yes a tax. A tax. It is a tiny one penny tax and it will more than pay for itself in the time saved to develop new information systems that will model the vision of the web. I argue that the web is a public good. It is an international public good. It's a public good as much as roads, electricity, train tracks, bridges, and automobiles. In the brick and mortar world that surrounds us, vehicles transport people, wires transport electrons. Those electrons today carry more information than a person, yet we continue to build infrastructure to transport physical bodies and neglect the information. If we want to progress as a human civilication with powers beyond current imagination, the first thing we need to be able to do is collaborate effectively. To do that we need better, more accessible information systems, and to do that we need a stronger more capable infrastructure. The connection between that infrastructure and the human who will participate is the browser and that should not be controlled by a company with justifiably selfish motives. We want corporations to compete and fight, but we want the world to collaborate. Corporations aren't always the best organizations to trust to enable collaboration. Sometimes collaboration isn't best insured by corporations. So the question then is, are we going to let the corporations continue to slow us down? Are we going to form a one world browser? Are we going to pay for it with taxes? Are we going to pay for it with volunteer labor? How is it going to get done? How are we going to continue to move forward supporting the laggards who don't want to upgrade from IE5 or IE6 or just do away with IE all together? At some point you have to make a choice to embrace technology and move forward, or be left behind.
bprater 18y ago
After many years of flailing from side-to-side of the css/table argument, I've found myself doing what the author talks about -- simple table for layout, css for everything else. Keep in mind: there is more than css and tables in this equation. There is normally a backend involved, too. If the programmer has made good decisions when creating the site structure, moving columns around should be fairly trivial. Sorry, but with a very imperfect spec like CSS, keeping everything in the designers hands is impossible. The folks behind the current CSS spec failed badly when it came to layouts. Even the newer specs aren't doing much better. It's a shame, especially when we've had years of design to draw from, both in the traditional design world but also programmatic layout managers.
- josefresco 18y ago
  Tables for layout, CSS for styling and PHP for includes is a winning formula for me, and has been for years now. I can design almost the entire page/site offline and do minimal browser testing because of it.
- olavk 18y ago
  > The folks behind the current CSS spec failed badly Its not the fault of the CSS spec that Microsoft decided not to implement it. Of course it doesnt change the reality - that cross-browser CSS currently is not powerful enough - but please blame IE, not CSS.
  - ambition 18y ago
    You seem to suggest that CSS is good enough to do what we would want, but necessary parts of it are unsupported on IE. However, the article describes a problem (content order matters in the presentation) that is due to the rules of the CSS spec and has nothing to do with IE incompatibility.
    - olavk 18y ago
      The CSS spec supports the same display model as HTML tables (using display:table|table-row|table-cell). So if tables work for you, CSS (when fully implemented) should work too. Regarding a display order independent of content order: Neither CSS 2.1 nor HTML-tables were designed to support this. Tables only support content-reordering using some ugly hacks with merged cells. CSS have much more powerfull suport - using absolute positioning you can place anything anywhere you want, regardless of document order. However this comes at the cost of flexibility. Some new CSS proposals suggest a layout model where visual placment of elements in a grid can be totally independant of document order. However, since IE have taken more than a decade to implement the relatively simple table display model from CSS, this will propably not become a reality for the foreseable future.
jessep 18y ago
Yeah, it made me think about a funny thing that happened to me a month ago: Last month I created the template for an HTML email on behalf of my brother. Based on the advice of MailChimp (http://www.mailchimp.com/resources/how_to_code_html_emails.phtml http://www.mailchimp.com/resources/how_to_code_html_emails.p...), I used tables for layout. It worked on my first try. I could NOT believe how easy it was. Due to the dirty feeling I get from using tables, I didn't let myself consider using tables more broadly for layouts. But now ... I feel like an alchoholic saying, "maybe just one little drink."
- swombat 18y ago
  When I put together the new email template for our site ( http://woobius-dev.posterous.com/enhancing-the-look-of-the-emai http://woobius-dev.posterous.com/enhancing-the-look-of-the-e... ) I went straight for tables. And, unsurprisingly, it worked great in all email clients right off the bat. I don't feel dirty from using tables now. I use floating divs whenever it makes sense, but if it takes too long to screw around with the divs, or if it feels like it will take too long, I switch to tables in a heartbeat. Otoh, there's something to be said for the various grid css layouts out there, like Blueprint and the like. They might be contrived, but they work pretty well on a wide variety of browsers. Where reasonable, I still favour using something like Blueprint rather than tables. Not sure why, though...
deleted 18y ago
[deleted]
olavk 18y ago
Above average, sure, but still misinformed and one-sided. It is correct that some layouts are easier created using tables rather than CSS. However, there is also many types of layouts which cannot be created with tables, but require CSS. A serious article (rather than a rant) would explain the limitations of both approaches, given the limitations of current browsers.
- ambition 18y ago
  I for one would be interested in an HN submission that fleshes out the suggestions you're making here.
  - olavk 18y ago
    I have an article which explains when to use tables: http://olav.dk/articles/tables.html http://olav.dk/articles/tables.html But now that the pendumlum seem to have swung from never use tables for layout to always use tables for layout, I suppose it should be extended with an explanation of when not to use tables :-)
  - KrisJordan 18y ago
    An HN submission that tries to be more even handed: http://news.ycombinator.com/item?id=464342 http://news.ycombinator.com/item?id=464342 http://www.newmediacampaigns.com/page/why-css-should-be-used-for-layout http://www.newmediacampaigns.com/page/why-css-should-be-used...
- mattmcknight 18y ago
  Obviously, neither option is ideal, or this discussion wouldn't keep happening. However, I think it's much easier to prove a purist wrong than to prove a pragmatist wrong. The pragmatists just change their position. Separating layout and content for purity's sake doesn't make sense, because the ordering of the divs in the html affects the layout. If you want to separate content and presentation, use XML and XSL. That should cure any ambitions along those lines. HTML is a presentation language, not a content definition language. I was on the tables side, but some of the new grid layout CSS things like Blueprint are almost as easy. However, Blueprint makes it easy by putting the presentation back into the HTML page- you don't have semantic markup, you have styles that define the height and width of your element. So, it gives us the simplest thing (mixed content and presentation) but in a way that looks like it complies with the "no tables for layout" dictum sent down from CSS heaven.

A well written and compelling argument. Way above the average CSS/Table rant for sure.

by moe 18y ago

A well written and compelling argument. Way above the average CSS/Table rant for sure.

May I suggest reading "Everything you know about CSS is wrong" by Rachel Andrew and Kevin Yank? It teaches to produce table-like grid layouts using CSS.

axod 18y ago
Please paste a simple solution then using CSS, which behaves exactly like a table layout, and works in all browsers. I'm all ears...
- markup 18y ago
  links does't support CSS, therefore "in all browsers" is a condition that can never be met.
  - axod 18y ago
    OTOH, links supports tables pretty well. Regardless, a solution that works in IE6,7,8 Fx2,3 Op/Saf/Chr would be sufficient these days I think.
    - markup 18y ago
      As the book states one cannot provide such a solution for all of them. I get your (and other people in the favour of the table argument) POV, but I simply do not agree. I suggest people to read http://www.alistapart.com/articles/understandingprogressiveenhancement http://www.alistapart.com/articles/understandingprogressivee... and the other (most recent) ALA articles on the same subject from Aaron Gustafson.
      - axod 18y ago
        "I get your (and other people in the favour of the table argument) POV, but I simply do not agree." Don't get me wrong, I'm not against CSS. I use css for styling. Not for layout. CSS just can't do sane layout unless you're positioning and sizing things in terms of simple pixel values. If you want for example div C to be the same height as div A, then css is a failure. Either you use tables, or you use javascript and resize things on the fly which is pretty ugly+slow. All it'd take is to be able to do some simple arithmetic in css, and reference other elements... eg width: ((100% - leftCol.width)/5); height: max(leftCol.height, rightCol.height); I guess there's something to be said for IE css expressions... except allowing any js there is a bit overkill for most things and makes for a pretty slow UI.
        pj 18y ago
        So what you are suggesting here is not: "Do away with CSS" but rather, "Add some stuff to CSS" This isn't new. Computer Science is called computer science because it can change. Algorithms can be shown to be less efficient than another algorithm. Ideas can be shown to be incomplete, meaning, they can't solve 100% of problems. This is true in other areas as well. We still teach and use Newton's Laws to describe many concepts in kinematics, even though they don't do a perfect job. My point is that the solution isn't to scrap CSS, but to add things like you suggest, which would be awesome. The problem however is that the browsers aren't going to support those new formulas, so what do you do for all the browsers out there that don't support your math, but you still want the site to be accessible? Here comes in the problem with competition -- some vendors can't keep up, some customers can't keep up. IE is way way behind. Microsoft should just scrap the browser effort and focus on the operating system. FireFox is great, but it's buggy. Opera behaves strangely and the developer tools aren't as good. The point is that each of these browsers doing things differently is part of the problem. They are vendors of the tool we use to display our pages. We are the ones inconvenienced by their lackadaisacal attitude toward standards compliance -- and they are slacking too. The Standards bodies are slacking because there is no standard video format. There is no video tag. Oh wait, there is a video tag: http://www.w3schools.com/tags/html5_video.asp http://www.w3schools.com/tags/html5_video.asp But who supports it? Opera does. Not much else as of a year ago: http://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.html http://blog.wired.com/monkeybites/2008/03/html-5-suppor-1.ht... Oh wait, no one uses Opera. You want to know the solution? Eliminate competition in the browser market. Oh your capitalist ears are burning aren't they? Why do we need IE, FireFox, Safari, Opera, Chrome, and on and on? We don't. They are slowing us down. Standardize the browser. Make it open source. Make it work on all devices. Make it follow the standards. Make it follow the standards by a specific date. Release a new version and auto update everyone so we are always all using the latest standards compliant browser. You argue it's against the american way. It's socialist. It's big government. No it isn't. It's not America, it's The Internet. The companies should comply willingly. Take all the best browser people from Microsoft, Apple, Opera, Mozilla, and Google and make a new body funded by domain name registrations and credit card transactions on the web. Yes a tax. A tax. It is a tiny one penny tax and it will more than pay for itself in the time saved to develop new information systems that will model the vision of the web. I argue that the web is a public good. It is an international public good. It's a public good as much as roads, electricity, train tracks, bridges, and automobiles. In the brick and mortar world that surrounds us, vehicles transport people, wires transport electrons. Those electrons today carry more information than a person, yet we continue to build infrastructure to transport physical bodies and neglect the information. If we want to progress as a human civilication with powers beyond current imagination, the first thing we need to be able to do is collaborate effectively. To do that we need better, more accessible information systems, and to do that we need a stronger more capable infrastructure. The connection between that infrastructure and the human who will participate is the browser and that should not be controlled by a company with justifiably selfish motives. We want corporations to compete and fight, but we want the world to collaborate. Corporations aren't always the best organizations to trust to enable collaboration. Sometimes collaboration isn't best insured by corporations. So the question then is, are we going to let the corporations continue to slow us down? Are we going to form a one world browser? Are we going to pay for it with taxes? Are we going to pay for it with volunteer labor? How is it going to get done? How are we going to continue to move forward supporting the laggards who don't want to upgrade from IE5 or IE6 or just do away with IE all together? At some point you have to make a choice to embrace technology and move forward, or be left behind.

bprater 18y ago

After many years of flailing from side-to-side of the css/table argument, I've found myself doing what the author talks about -- simple table for layout, css for everything else. Keep in mind: there is more than css and tables in this equation. There is normally a backend involved, too. If the programmer has made good decisions when creating the site structure, moving columns around should be fairly trivial. Sorry, but with a very imperfect spec like CSS, keeping everything in the designers hands is impossible. The folks behind the current CSS spec failed badly when it came to layouts. Even the newer specs aren't doing much better. It's a shame, especially when we've had years of design to draw from, both in the traditional design world but also programmatic layout managers.

josefresco 18y ago
Tables for layout, CSS for styling and PHP for includes is a winning formula for me, and has been for years now. I can design almost the entire page/site offline and do minimal browser testing because of it.
olavk 18y ago
> The folks behind the current CSS spec failed badly Its not the fault of the CSS spec that Microsoft decided not to implement it. Of course it doesnt change the reality - that cross-browser CSS currently is not powerful enough - but please blame IE, not CSS.
- ambition 18y ago
  You seem to suggest that CSS is good enough to do what we would want, but necessary parts of it are unsupported on IE. However, the article describes a problem (content order matters in the presentation) that is due to the rules of the CSS spec and has nothing to do with IE incompatibility.
  - olavk 18y ago
    The CSS spec supports the same display model as HTML tables (using display:table|table-row|table-cell). So if tables work for you, CSS (when fully implemented) should work too. Regarding a display order independent of content order: Neither CSS 2.1 nor HTML-tables were designed to support this. Tables only support content-reordering using some ugly hacks with merged cells. CSS have much more powerfull suport - using absolute positioning you can place anything anywhere you want, regardless of document order. However this comes at the cost of flexibility. Some new CSS proposals suggest a layout model where visual placment of elements in a grid can be totally independant of document order. However, since IE have taken more than a decade to implement the relatively simple table display model from CSS, this will propably not become a reality for the foreseable future.

jessep 18y ago

Yeah, it made me think about a funny thing that happened to me a month ago: Last month I created the template for an HTML email on behalf of my brother. Based on the advice of MailChimp (http://www.mailchimp.com/resources/how_to_code_html_emails.phtml http://www.mailchimp.com/resources/how_to_code_html_emails.p...), I used tables for layout. It worked on my first try. I could NOT believe how easy it was. Due to the dirty feeling I get from using tables, I didn't let myself consider using tables more broadly for layouts. But now ... I feel like an alchoholic saying, "maybe just one little drink."

swombat 18y ago
When I put together the new email template for our site ( http://woobius-dev.posterous.com/enhancing-the-look-of-the-emai http://woobius-dev.posterous.com/enhancing-the-look-of-the-e... ) I went straight for tables. And, unsurprisingly, it worked great in all email clients right off the bat. I don't feel dirty from using tables now. I use floating divs whenever it makes sense, but if it takes too long to screw around with the divs, or if it feels like it will take too long, I switch to tables in a heartbeat. Otoh, there's something to be said for the various grid css layouts out there, like Blueprint and the like. They might be contrived, but they work pretty well on a wide variety of browsers. Where reasonable, I still favour using something like Blueprint rather than tables. Not sure why, though...

deleted 18y ago

[deleted]

olavk 18y ago

Above average, sure, but still misinformed and one-sided. It is correct that some layouts are easier created using tables rather than CSS. However, there is also many types of layouts which cannot be created with tables, but require CSS. A serious article (rather than a rant) would explain the limitations of both approaches, given the limitations of current browsers.

ambition 18y ago
I for one would be interested in an HN submission that fleshes out the suggestions you're making here.
- olavk 18y ago
  I have an article which explains when to use tables: http://olav.dk/articles/tables.html http://olav.dk/articles/tables.html But now that the pendumlum seem to have swung from never use tables for layout to always use tables for layout, I suppose it should be extended with an explanation of when not to use tables :-)
- KrisJordan 18y ago
  An HN submission that tries to be more even handed: http://news.ycombinator.com/item?id=464342 http://news.ycombinator.com/item?id=464342 http://www.newmediacampaigns.com/page/why-css-should-be-used-for-layout http://www.newmediacampaigns.com/page/why-css-should-be-used...
mattmcknight 18y ago
Obviously, neither option is ideal, or this discussion wouldn't keep happening. However, I think it's much easier to prove a purist wrong than to prove a pragmatist wrong. The pragmatists just change their position. Separating layout and content for purity's sake doesn't make sense, because the ordering of the divs in the html affects the layout. If you want to separate content and presentation, use XML and XSL. That should cure any ambitions along those lines. HTML is a presentation language, not a content definition language. I was on the tables side, but some of the new grid layout CSS things like Blueprint are almost as easy. However, Blueprint makes it easy by putting the presentation back into the HTML page- you don't have semantic markup, you have styles that define the height and width of your element. So, it gives us the simplest thing (mixed content and presentation) but in a way that looks like it complies with the "no tables for layout" dictum sent down from CSS heaven.