4 ms·

> Take float – it’s a property to make text flow around an object. It wasn’t designed to create columns on a webpage. And there’s no CSS property that creates c

by retube 16y ago

> Take float – it’s a property to make text flow around an object. It wasn’t designed to create columns on a webpage. And there’s no CSS property that creates columns, or a header. Yeah. How much time have I spent mucking about trying to achieve a stable cross-browser column layout. More often than not I just use a table. I know in design land this is an absolute no-no, but at the end of the day 1) it works 2) it's simple 3) it's x-browser 4) it's reliable.

btipling 16y ago
Well I meant to downvote and accidentally upvoted but anyway if you're using a table then you are probably not expecting to do anything dynamic via JavaScript on it since it's not a collection of block elements, but table-cells. There's a lot you can not do with table-cells. Also, it's semantically incorrect and really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. Also attempting to control dynamic table cell widths is far more painful than anything you might ever want to accomplish with CSS. Finally, yes sometimes you have to reread the guide when you want to do it again. So 1) It doesn't work (with JavaScript and fluid, dynamic cell widths) 2) It's actually not that simple. 3) It's only cross-browser if you have a lot of reset CSS and do nothing fancy. 4) It's reliably problematic.
- zeteo 16y ago
  "There's a lot you can not do with table-cells." Could you give a few examples? "it's semantically incorrect" So is "float".
  - lwhi 16y ago
    "So is "float"." No, 'float' is a property - '<table>' or '<td>' are elements. Float has nothing to do with semantics, it's purely presentational. By marking up content semantically - it's possible to do interesting things with your marked-up content. For instance, content can be scraped more easily and a screen-reader can use elements to make inferences about the make-up of a page's contents. xHTML can be translated to other forms of XML using XSLT - and HTML content can be shared between desktop and mobile devices with just a stylesheet change. Liquid layouts can be utilised and JS can be used to move content dynamically. There are a huge number of reasons for marking content semantically. Using a table is a bad solution for anything other than tabular data.
    - evanrmurphy 16y ago
      > HTML content can be shared between desktop and mobile devices with just a stylesheet change. Have you been able to pull this off in most cases? In my experience, the mobile version of a site requires changes to the HTML, such as turning links into buttons and removing content.
      - lwhi 16y ago
        It depends how complex your markup is. I've found that a site that's been developed for the desktop can usually be made much more accessible by offering a different stylesheet. I.e. it's better than the alternative of doing nothing ;) But I agree - it's not always as straightforward as you might hope would be. Sometimes it makes sense to serve different markup.
  - btipling 16y ago
    You can't resize them easily with JavaScript, you can't move them, you can't hide them and then show them again. You can maybe change the contents and add or remove a class, but because there's so little you can do to tablecells, good luck doing something other than changing background color. Since you're using a table cell for your overall design, heh. Not good.
- DanI-S 16y ago
  > [it] really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. This is the crucial point! CSS isn't remotely difficult.
  - evanrmurphy 16y ago
    Please demonstrate it then. I hear many more people saying CSS isn't difficult than showing it. To be sure, I'm talking about CSS for layout here, not styling. I find CSS for styling to be relatively straightforward.
- evanrmurphy 16y ago
  > takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. Sorry but I'm skeptical. If you could prove this by sharing a paragraph or two (should be all it takes, right?) teaching how to use CSS to build reliable layouts I would be grateful.
  - akkartik 16y ago
    Me too. I suspect what he meant was that you can come up with a simple layout with 10 minutes of reading, but that's a strawman. The real problem is that it's extremely easy to rapidly make a once-simple layout a nightmare to maintain or debug. With bitter experience I've realized I need to be extremely disciplined when I use the CSS directives margin, padding, and float. Everything else is relatively straightforward, with localized implications. But anytime you mess with the box model itself you really need to think about the big picture of your page's layout.
  - jws 16y ago
    Step one is to abandon your initial requirements and rewrite ones that are compatible with robustly portable CSS. After that I think the quoted statement works.
    - evanrmurphy 16y ago
      Can you gives some examples of requirements that must be abandoned?
  - flyosity 16y ago
    There are many CSS books that give concrete examples of various layout types that work in all browsers. Dan Cederholm wrote one of the best: http://simplebits.com/publications/bulletproof/ http://simplebits.com/publications/bulletproof/
    - evanrmurphy 16y ago
      Thank you, this look like a good resource. :) However, a book is a very different investment from "maybe ten minutes of reading a how to guide".
- rjprins 16y ago
  "Semantically incorrect" A "table" is an abstract concept with certain properties. If a layout shares those properties, it might as well be a table. If it quacks like a duck..
andybak 16y ago
I enjoy luring people in to discussions about tables vs pure CSS layouts. You get a lot of hand-waving about theoretical benefits related to accessibility and the semantic web. Just press them for specifics and ask for examples of a simple three-column layout table causing an actual problem for any extant user-agent.
- blauwbilgorgel 16y ago
  Though I too enjoy boring people with the "Tables are bad for anything"-pedantry it would be easy to give a few reasons where a simple three-column layout can turn into a problem. 1) You colspan the header image. Since the table "encapsulates" the columns, for user-agents with a browser width smaller than the header image, content will be less accessible. 2) Screenreaders will have trouble reading the content inside the layout in its intended order. You are presenting the screenreader with a table, so its expects tabular data. You can't content stack your page elements (and place the most relevant important information at the top). 3) No progressive page loading. It will not always take longer to render tables, over divs, but the loading will be a lot clunkier. Internet Explorer might wait till it has the entire table contents, before it renders the table, giving the user a blank screen. These are some actual user (agent) specific problems, on top of many other problems with using tables for layout, maintenance being a particular excruciating one.
  - Travis 16y ago
    All very valid points. But compared to using CSS for layouts, where the downside is that I get so frustrated I have to stop working, these "downsides" aren't that bad. I value my sanity most. And, 1) in some minute percentage of my users, there's a chance my content won't show up fine. Whatever. I care about getting products launched faster, not about catering to 99% rather than 95% of my audience (premature optimization, really) 2) I have to suspect screen readers are somewhat smart about tables. For the past 15 years, most websites have been table based. Hell, Apple's store was totally table based when I last checked (1-2 years ago). 3) This is an optimization. I find it interesting, in a startup community that values pareto principle, low hanging fruit, etc., that there is such a strong contingent of supporters who cry "CSS is simple!" I consider myself a very strong programmer, and CSS has caused me more problems than it has solved (again, only WRT layout, not styling). In short, I use tables because I can accomplish my goals faster, and with less frustration, than CSS layouts. It prevents premature optimization, and it keeps me happier. Like anything, YMMV, but I really am sick of people who insist "CSS is so simple, take 10 minutes and you'll be fine". It's just not.
jpr 16y ago
> I know in design land this is an absolute no-no, but at the end of the day 1) it works 2) it's simple 3) it's x-browser 4) it's reliable. The conclusion I would make from that data is that designers are... ahem... idiots (for not using a working, simple and reliable cross-browser solution)?

by retube 16y ago

btipling 16y ago

Well I meant to downvote and accidentally upvoted but anyway if you're using a table then you are probably not expecting to do anything dynamic via JavaScript on it since it's not a collection of block elements, but table-cells. There's a lot you can not do with table-cells. Also, it's semantically incorrect and really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. Also attempting to control dynamic table cell widths is far more painful than anything you might ever want to accomplish with CSS. Finally, yes sometimes you have to reread the guide when you want to do it again. So 1) It doesn't work (with JavaScript and fluid, dynamic cell widths) 2) It's actually not that simple. 3) It's only cross-browser if you have a lot of reset CSS and do nothing fancy. 4) It's reliably problematic.

zeteo 16y ago
"There's a lot you can not do with table-cells." Could you give a few examples? "it's semantically incorrect" So is "float".
- lwhi 16y ago
  "So is "float"." No, 'float' is a property - '<table>' or '<td>' are elements. Float has nothing to do with semantics, it's purely presentational. By marking up content semantically - it's possible to do interesting things with your marked-up content. For instance, content can be scraped more easily and a screen-reader can use elements to make inferences about the make-up of a page's contents. xHTML can be translated to other forms of XML using XSLT - and HTML content can be shared between desktop and mobile devices with just a stylesheet change. Liquid layouts can be utilised and JS can be used to move content dynamically. There are a huge number of reasons for marking content semantically. Using a table is a bad solution for anything other than tabular data.
  - evanrmurphy 16y ago
    > HTML content can be shared between desktop and mobile devices with just a stylesheet change. Have you been able to pull this off in most cases? In my experience, the mobile version of a site requires changes to the HTML, such as turning links into buttons and removing content.
    - lwhi 16y ago
      It depends how complex your markup is. I've found that a site that's been developed for the desktop can usually be made much more accessible by offering a different stylesheet. I.e. it's better than the alternative of doing nothing ;) But I agree - it's not always as straightforward as you might hope would be. Sometimes it makes sense to serve different markup.
- btipling 16y ago
  You can't resize them easily with JavaScript, you can't move them, you can't hide them and then show them again. You can maybe change the contents and add or remove a class, but because there's so little you can do to tablecells, good luck doing something other than changing background color. Since you're using a table cell for your overall design, heh. Not good.
DanI-S 16y ago
> [it] really takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. This is the crucial point! CSS isn't remotely difficult.
- evanrmurphy 16y ago
  Please demonstrate it then. I hear many more people saying CSS isn't difficult than showing it. To be sure, I'm talking about CSS for layout here, not styling. I find CSS for styling to be relatively straightforward.
evanrmurphy 16y ago
> takes like maybe ten minutes of reading a how to guide as to how to figure out how to do it with real css. Sorry but I'm skeptical. If you could prove this by sharing a paragraph or two (should be all it takes, right?) teaching how to use CSS to build reliable layouts I would be grateful.
- akkartik 16y ago
  Me too. I suspect what he meant was that you can come up with a simple layout with 10 minutes of reading, but that's a strawman. The real problem is that it's extremely easy to rapidly make a once-simple layout a nightmare to maintain or debug. With bitter experience I've realized I need to be extremely disciplined when I use the CSS directives margin, padding, and float. Everything else is relatively straightforward, with localized implications. But anytime you mess with the box model itself you really need to think about the big picture of your page's layout.
- jws 16y ago
  Step one is to abandon your initial requirements and rewrite ones that are compatible with robustly portable CSS. After that I think the quoted statement works.
  - evanrmurphy 16y ago
    Can you gives some examples of requirements that must be abandoned?
- flyosity 16y ago
  There are many CSS books that give concrete examples of various layout types that work in all browsers. Dan Cederholm wrote one of the best: http://simplebits.com/publications/bulletproof/ http://simplebits.com/publications/bulletproof/
  - evanrmurphy 16y ago
    Thank you, this look like a good resource. :) However, a book is a very different investment from "maybe ten minutes of reading a how to guide".
rjprins 16y ago
"Semantically incorrect" A "table" is an abstract concept with certain properties. If a layout shares those properties, it might as well be a table. If it quacks like a duck..

andybak 16y ago

I enjoy luring people in to discussions about tables vs pure CSS layouts. You get a lot of hand-waving about theoretical benefits related to accessibility and the semantic web. Just press them for specifics and ask for examples of a simple three-column layout table causing an actual problem for any extant user-agent.

blauwbilgorgel 16y ago
Though I too enjoy boring people with the "Tables are bad for anything"-pedantry it would be easy to give a few reasons where a simple three-column layout can turn into a problem. 1) You colspan the header image. Since the table "encapsulates" the columns, for user-agents with a browser width smaller than the header image, content will be less accessible. 2) Screenreaders will have trouble reading the content inside the layout in its intended order. You are presenting the screenreader with a table, so its expects tabular data. You can't content stack your page elements (and place the most relevant important information at the top). 3) No progressive page loading. It will not always take longer to render tables, over divs, but the loading will be a lot clunkier. Internet Explorer might wait till it has the entire table contents, before it renders the table, giving the user a blank screen. These are some actual user (agent) specific problems, on top of many other problems with using tables for layout, maintenance being a particular excruciating one.
- Travis 16y ago
  All very valid points. But compared to using CSS for layouts, where the downside is that I get so frustrated I have to stop working, these "downsides" aren't that bad. I value my sanity most. And, 1) in some minute percentage of my users, there's a chance my content won't show up fine. Whatever. I care about getting products launched faster, not about catering to 99% rather than 95% of my audience (premature optimization, really) 2) I have to suspect screen readers are somewhat smart about tables. For the past 15 years, most websites have been table based. Hell, Apple's store was totally table based when I last checked (1-2 years ago). 3) This is an optimization. I find it interesting, in a startup community that values pareto principle, low hanging fruit, etc., that there is such a strong contingent of supporters who cry "CSS is simple!" I consider myself a very strong programmer, and CSS has caused me more problems than it has solved (again, only WRT layout, not styling). In short, I use tables because I can accomplish my goals faster, and with less frustration, than CSS layouts. It prevents premature optimization, and it keeps me happier. Like anything, YMMV, but I really am sick of people who insist "CSS is so simple, take 10 minutes and you'll be fine". It's just not.

jpr 16y ago

> I know in design land this is an absolute no-no, but at the end of the day 1) it works 2) it's simple 3) it's x-browser 4) it's reliable. The conclusion I would make from that data is that designers are... ahem... idiots (for not using a working, simple and reliable cross-browser solution)?