6 ms·

Now I can use CSS like I was using tables 15 years ago.

by meehow 10y ago

kagamine 10y ago
Now I can use flex-box like I was using flex-box 3 years ago including on IE8. It's almost like living now but if now was then.
- jordanlev 10y ago
  And if "then" your flex-box usage actually worked for people not on Internet Explorer.
andybak 10y ago
To be fair you've been able to do that with display: table-cell etc. I do love seeing <div class="table"> around the place. Sigh.
- spaceribs 10y ago
  Not exactly, you couldn't get colspans or rowspans with that.
  - andybak 10y ago
    I hadn't thought of that.
  - naasking 10y ago
    Yeah, they really dropped the ball on that. Being able to specify vertical and horizontal layouts this way would have solved a lot of problems that now require flex and soon CSS grids.
- TeMPOraL 10y ago
  Better that way than the standard practice of littering your code with semantically meaningless divs that are there just as hooks for CSS rules.
- pweissbrod 10y ago
  As someone who does minimal front-end work I rely on bootstrap when I need quick UIs and try to read HN to understand the trends. This comment made me laugh. From an outsider perspective it looks like div is the new table. The latest fashion in style
- ZeroGravitas 10y ago
  Just as an fyi, I count 17 uses of display: table-cell and it's siblings in the Bootstrap 3 less code (possibly more once compiled to CSS). They didn't use it for their grid implementation though, and since they have found and documented a lot of very obscure browser compatibility bugs as part of their work, I'd guess they had a good reason for choosing what they did.
crispyambulance 10y ago
Yup, it would appear that "tables are back" in a sense. Layout should be intuitive and easy. the table metaphor clearly works... maybe we should just accept it ! Reminds me of this comic strip from 12 years ago: http://okcancel.com/comic/98.html http://okcancel.com/comic/98.html
- mikegioia 10y ago
  I don't think "tables are back" here, per se. Tables, like any HTML element, are to be used semantically, like for displaying tabular data. They bring a lot of extra, unneeded markup and they're not a good layout mechanism for different size screens. I do think Flex-box takes the good elements of tables and turns them into something great :D
SippinLean 10y ago
I use bootstrap mixins + Sass for all my layout. If you're coupling it with your markup that's your fault.
zackmorris 10y ago
This strikes a chord with me, as I never really saw what was so "bad" about tables. As I am more of a back end developer, I've written several interfaces using display:table and then the front end developers cleaned it up into "proper" css. This actually worked out as a good separation of duties and sped up development overall. The programmer in me then asks why this human step is needed if the output is equivalent.. I'm thinking that css is largely about encoding semantic data into layouts, because as far as I can tell it takes tremendously longer to do anything in css today than it did with tables in the 90s. And doing things in tables took tremendously longer than using a GUI like Adobe PageMaker in the 80s. We keep going backwards in productivity but there must be some value in the minimalism of how data is described and organized today.
- jordanlev 10y ago
  Your front end devs in this case were suffering from a bit of cargo culting (not truly understanding the difference between HTML and CSS). There is absolutely nothing wrong with using the display:table css properties (as long as its layout quirks around the way it decides to space things don't mess things up visually). What is wrong to do is use actual HTML <table>/<tr>/<td> tags for layout, because those impart semantic meaning about the structure of the content and should only be used for tabular data.
  - tangue 10y ago
    Open an inspector on your HN comment.
    - devopsproject 10y ago
      eg: the only valid use of tables is my valid use of tables
    - astine 10y ago
      Just because HN happens to use the simplest thing that could possibly work doesn't mean that the objections to tables being used for layout aren't valid.
headcanon 10y ago
Yeah, thats a good thing :) tables are intuitive - Except now you can do a lot more stuff too!
jherdman 10y ago
I don't think that's quite true unless you had your tables dynamically laying themselves out by viewport size too. E.g. using SuitCSS Grid: <div class="Grid"> <div class="Grid-cell u-size1of3 u-sm-sizeFull">

Now I can use CSS like I was using tables 15 years ago.

by meehow 10y ago

Now I can use CSS like I was using tables 15 years ago.

Now I can use flex-box like I was using flex-box 3 years ago including on IE8. It's almost like living now but if now was then.

jordanlev 10y ago
And if "then" your flex-box usage actually worked for people not on Internet Explorer.

andybak 10y ago

To be fair you've been able to do that with display: table-cell etc. I do love seeing <div class="table"> around the place. Sigh.

spaceribs 10y ago
Not exactly, you couldn't get colspans or rowspans with that.
- andybak 10y ago
  I hadn't thought of that.
- naasking 10y ago
  Yeah, they really dropped the ball on that. Being able to specify vertical and horizontal layouts this way would have solved a lot of problems that now require flex and soon CSS grids.
TeMPOraL 10y ago
Better that way than the standard practice of littering your code with semantically meaningless divs that are there just as hooks for CSS rules.
pweissbrod 10y ago
As someone who does minimal front-end work I rely on bootstrap when I need quick UIs and try to read HN to understand the trends. This comment made me laugh. From an outsider perspective it looks like div is the new table. The latest fashion in style
ZeroGravitas 10y ago
Just as an fyi, I count 17 uses of display: table-cell and it's siblings in the Bootstrap 3 less code (possibly more once compiled to CSS). They didn't use it for their grid implementation though, and since they have found and documented a lot of very obscure browser compatibility bugs as part of their work, I'd guess they had a good reason for choosing what they did.

crispyambulance 10y ago

Yup, it would appear that "tables are back" in a sense. Layout should be intuitive and easy. the table metaphor clearly works... maybe we should just accept it ! Reminds me of this comic strip from 12 years ago: http://okcancel.com/comic/98.html http://okcancel.com/comic/98.html

mikegioia 10y ago
I don't think "tables are back" here, per se. Tables, like any HTML element, are to be used semantically, like for displaying tabular data. They bring a lot of extra, unneeded markup and they're not a good layout mechanism for different size screens. I do think Flex-box takes the good elements of tables and turns them into something great :D

SippinLean 10y ago

I use bootstrap mixins + Sass for all my layout. If you're coupling it with your markup that's your fault.

zackmorris 10y ago

This strikes a chord with me, as I never really saw what was so "bad" about tables. As I am more of a back end developer, I've written several interfaces using display:table and then the front end developers cleaned it up into "proper" css. This actually worked out as a good separation of duties and sped up development overall. The programmer in me then asks why this human step is needed if the output is equivalent.. I'm thinking that css is largely about encoding semantic data into layouts, because as far as I can tell it takes tremendously longer to do anything in css today than it did with tables in the 90s. And doing things in tables took tremendously longer than using a GUI like Adobe PageMaker in the 80s. We keep going backwards in productivity but there must be some value in the minimalism of how data is described and organized today.

jordanlev 10y ago
Your front end devs in this case were suffering from a bit of cargo culting (not truly understanding the difference between HTML and CSS). There is absolutely nothing wrong with using the display:table css properties (as long as its layout quirks around the way it decides to space things don't mess things up visually). What is wrong to do is use actual HTML <table>/<tr>/<td> tags for layout, because those impart semantic meaning about the structure of the content and should only be used for tabular data.
- tangue 10y ago
  Open an inspector on your HN comment.
  - devopsproject 10y ago
    eg: the only valid use of tables is my valid use of tables
  - astine 10y ago
    Just because HN happens to use the simplest thing that could possibly work doesn't mean that the objections to tables being used for layout aren't valid.

headcanon 10y ago

Yeah, thats a good thing :) tables are intuitive - Except now you can do a lot more stuff too!

jherdman 10y ago

I don't think that's quite true unless you had your tables dynamically laying themselves out by viewport size too. E.g. using SuitCSS Grid: <div class="Grid"> <div class="Grid-cell u-size1of3 u-sm-sizeFull">