6 ms·

I hope I'm not the only one who has nostalgia for tables and frames. There was only one way to center content and it always worked. Now there's a hundred and no

by dre85 5y ago

I hope I'm not the only one who has nostalgia for tables and frames. There was only one way to center content and it always worked. Now there's a hundred and none ever work without a bunch of Googling and troubleshooting.

neovive 5y ago
Definitely! For all the knocks against tables for layout, we're only beginning to approach the simplicity of that approach after many years. (It's even a stretch to call CSS Grid and Flexbox simple.) You could get so far with a few tables and spacer gifs -- if you looked past the semantics.
lwhi 5y ago
I haven't had to reply to someone who feels tables are 'the way' for a good 15 years. .. nicely triggered for a moment!
- veltas 5y ago
  Not a web dev so I'm curious to know what the problem is.
  - laumars 5y ago
    i know I’ll get downvoted for saying this because there are a lot of front end developers on here who fail to question the sanity of their tools but the current mess with <table> (and most of front end development) is an acute suffering from not invented here syndrome. Why have a construct purposely for tabulated data when you can reinvent the wheel with a nightmarish array of divs and complex CSS. /s (honestly though, before anyone does mod this post down, pause for a moment and ask yourself this question. If you have a good answer then I’d love to hear it). The problem is web development went too far down the CSS “all the things” route and instead of using it for styling, developers use it for near enough the entirety of web layout. Which makes no sense when you have data that needs to be structured in specific ways (namely tabulated data). In those scenarios the layout is as much a part of the content as the data itself. Thus CSS there should be used to make the tables attractive rather than using CSS to construct the tables themselves. I’m not saying <table> doesn’t have its warts but really what should have happened was those warts fixed rather than creating a whole new set of warts and complexity with divs. Again, before anyone votes me down, pause and try to answer this question yourself. Obviously divs do have their benefits elsewhere in web design; I don’t miss using tables for general purpose layouts. But for tabulated data tables are absolutely the right tool… or at least that should have been the case if sensible people were left to define pragmatic web standards.
    - LocalPCGuy 5y ago
      I'm not saying there aren't some devs who fit in the box you describe, but semantic HTML is an important part of web dev and many front end devs still ascribe to it. As you said, tags have meanings and we should use the appropriate one for the appropriate thing. And there are most definitely ways to use even the table tag responsibly (and responsively, although that is harder). And that is absolutely the standard. Just because people ignore it doesn't mean the standards don't exist. Random blog posts do not change that.
    - lwhi 5y ago
      You're mistaken. Frontend developers use tables for tabular data. I really don't understand what you're trying to say.
      - laumars 5y ago
        You’ve posted the same comment twice so I’ll post my same reply twice: There’s plenty of comments in this discussion from developers saying they specifically don’t use <table> even for tabulated data.
        lwhi 5y ago
        The article we are commenting on was specifically written around 2006 to discourage tables from being used for layout, which was a common approach at the time. Some people can construct tables from P tags for all I care. It doesn't mean it's common amongst professional developers and it doesn't mean it's correct.
        laumars 5y ago
        I know what the article is about. I’m not commenting on the article though. I’m commenting on the more extreme opinions in this thread. If you don’t care what those other developers do then why bother replying to me in the first place?
        5y ago
  - lwhi 5y ago
    Up until CSS was a viable thing, people built websites in a very different way to our modern approach. In order to get things to line up, everything was put in a table with invisible borders. If there was a gap, a transparent spacer.gif image was used to plug it. A lot of people liked this way because it was easy to understand, and they were used to it .. but we were effectively hacking the main semantic purpose of a table element to use it for layout ... .. also there was no separation between the presentation and content layers. CSS Zen Gardens signalled a turning point, and was designed to help show the power provided by CSS.
    - laumars 5y ago
      That doesn’t answer the question though. I doubt many developers would be in favour of using tables for layout over divs. however the same doesn’t apply for why one must use divs for tables (ie actual tabulated data) instead of tables.
      - lwhi 5y ago
        I think you're confused. We use tables for tabulated data. CSS gardens was created specifically to stop people from using tables for layout.
        laumars 5y ago
        There’s plenty of comments in this discussion from developers saying they specifically don’t use <table> even for tabulated data.
        lwhi 5y ago
        I've never met a professional frontend developer who does that. CSS Zen Gardens is from around 2006.
        laumars 5y ago
        Yet there are comments here advocating that. I’m not saying it’s typical, I’m just saying why it’s dumb. I know when Zen Gardens was released. That fuck all to do with the discussion though. And can you please limit your replies to one thread rather than spamming the same comments on multiple threads.
- spurgu 5y ago
  Tables are the way. For tables.
southerntofu 5y ago
I do have this nostalgia remembering my first tr/td spaghetti codes. However, it was never really usable for visually-impaired people, and flex/grid give me proper responsiveness now that 4:3 displays aren't the only way to browse content.
wildrhythms 5y ago
I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such. With that said, centering is not difficult. The difficulty comes in not realizing that flex layout is essentially the same rows and columns you used before, but with better controls for wrapping elements (tables can't do that easily). Edit: Some more nostalgia: Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :)
- blondin 5y ago
  wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.
  - trs8080 5y ago
    ??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
  - eyelidlessness 5y ago
    Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
    - 5y ago
thunderbong 5y ago
Totally agree! Have you done a 'View Source' on the HN page?
gentleman11 5y ago
Css grid is pretty flexible for zen garden like layouts
dmje 5y ago
Bugs me when people use divs to do tabular data display when there’s a perfectly excellent <table> tag. Copy pasting div based tabular data from a web page into a spreadsheet or document is made nightmarish. For layouts, sure, use flex or whatever, but not for data!
- innocenat 5y ago
  It's hard to make responsive table with <table> tag though (except if you only want horizontal scrolling)
FloNeu 5y ago
You aware that you can just define a container as display: table-cell and then center stuff in it the old way - at least i remember doing this 10years back or so to solve centering issue I just couldn't get right... (Pardon if above isn't valid css)
playpause 5y ago
I don’t mean to be rude, but if you can’t center content without googling and getting frustrated, you might just need to slow down and take 5 minutes to actually learn how to do it, and let it sink in once and for all. It’s been very straightforward for several years now. The idea that it’s difficult is just an old meme at this point.

by dre85 5y ago

neovive 5y ago

Definitely! For all the knocks against tables for layout, we're only beginning to approach the simplicity of that approach after many years. (It's even a stretch to call CSS Grid and Flexbox simple.) You could get so far with a few tables and spacer gifs -- if you looked past the semantics.

lwhi 5y ago

I haven't had to reply to someone who feels tables are 'the way' for a good 15 years. .. nicely triggered for a moment!

veltas 5y ago
Not a web dev so I'm curious to know what the problem is.
- laumars 5y ago
  i know I’ll get downvoted for saying this because there are a lot of front end developers on here who fail to question the sanity of their tools but the current mess with <table> (and most of front end development) is an acute suffering from not invented here syndrome. Why have a construct purposely for tabulated data when you can reinvent the wheel with a nightmarish array of divs and complex CSS. /s (honestly though, before anyone does mod this post down, pause for a moment and ask yourself this question. If you have a good answer then I’d love to hear it). The problem is web development went too far down the CSS “all the things” route and instead of using it for styling, developers use it for near enough the entirety of web layout. Which makes no sense when you have data that needs to be structured in specific ways (namely tabulated data). In those scenarios the layout is as much a part of the content as the data itself. Thus CSS there should be used to make the tables attractive rather than using CSS to construct the tables themselves. I’m not saying <table> doesn’t have its warts but really what should have happened was those warts fixed rather than creating a whole new set of warts and complexity with divs. Again, before anyone votes me down, pause and try to answer this question yourself. Obviously divs do have their benefits elsewhere in web design; I don’t miss using tables for general purpose layouts. But for tabulated data tables are absolutely the right tool… or at least that should have been the case if sensible people were left to define pragmatic web standards.
  - LocalPCGuy 5y ago
    I'm not saying there aren't some devs who fit in the box you describe, but semantic HTML is an important part of web dev and many front end devs still ascribe to it. As you said, tags have meanings and we should use the appropriate one for the appropriate thing. And there are most definitely ways to use even the table tag responsibly (and responsively, although that is harder). And that is absolutely the standard. Just because people ignore it doesn't mean the standards don't exist. Random blog posts do not change that.
  - lwhi 5y ago
    You're mistaken. Frontend developers use tables for tabular data. I really don't understand what you're trying to say.
    - laumars 5y ago
      You’ve posted the same comment twice so I’ll post my same reply twice: There’s plenty of comments in this discussion from developers saying they specifically don’t use <table> even for tabulated data.
      - lwhi 5y ago
        The article we are commenting on was specifically written around 2006 to discourage tables from being used for layout, which was a common approach at the time. Some people can construct tables from P tags for all I care. It doesn't mean it's common amongst professional developers and it doesn't mean it's correct.
        laumars 5y ago
        I know what the article is about. I’m not commenting on the article though. I’m commenting on the more extreme opinions in this thread. If you don’t care what those other developers do then why bother replying to me in the first place?
        5y ago
- lwhi 5y ago
  Up until CSS was a viable thing, people built websites in a very different way to our modern approach. In order to get things to line up, everything was put in a table with invisible borders. If there was a gap, a transparent spacer.gif image was used to plug it. A lot of people liked this way because it was easy to understand, and they were used to it .. but we were effectively hacking the main semantic purpose of a table element to use it for layout ... .. also there was no separation between the presentation and content layers. CSS Zen Gardens signalled a turning point, and was designed to help show the power provided by CSS.
  - laumars 5y ago
    That doesn’t answer the question though. I doubt many developers would be in favour of using tables for layout over divs. however the same doesn’t apply for why one must use divs for tables (ie actual tabulated data) instead of tables.
    - lwhi 5y ago
      I think you're confused. We use tables for tabulated data. CSS gardens was created specifically to stop people from using tables for layout.
      - laumars 5y ago
        There’s plenty of comments in this discussion from developers saying they specifically don’t use <table> even for tabulated data.
        lwhi 5y ago
        I've never met a professional frontend developer who does that. CSS Zen Gardens is from around 2006.
        laumars 5y ago
        Yet there are comments here advocating that. I’m not saying it’s typical, I’m just saying why it’s dumb. I know when Zen Gardens was released. That fuck all to do with the discussion though. And can you please limit your replies to one thread rather than spamming the same comments on multiple threads.
spurgu 5y ago
Tables are the way. For tables.

southerntofu 5y ago

I do have this nostalgia remembering my first tr/td spaghetti codes. However, it was never really usable for visually-impaired people, and flex/grid give me proper responsiveness now that 4:3 displays aren't the only way to browse content.

wildrhythms 5y ago

I started learning web development back in the day of IE6 and table-based layouts. It's actually incredible how many modern designs I see today that are portraying a table, but have recreated the <table> element (and its associated <tr> and <td> elements) in a soup of flex layout divs and such. With that said, centering is not difficult. The difficulty comes in not realizing that flex layout is essentially the same rows and columns you used before, but with better controls for wrapping elements (tables can't do that easily). Edit: Some more nostalgia: Cutting out rounded corners and shadows in Photoshop with the slice tool because there was no border-radius or box-shadow at the time :)

blondin 5y ago
wait. flex-based layout has not fixed centering. nothing which has been done since table-based layout has an intuitive and cross-browser way for doing vertical and horizontal centering. that's what i think GP meant. i do not want to see tables back but i do admit that they did exactly, and intuitively, what you would expect of them.
- trs8080 5y ago
  ??? .box { display: flex; align-items: center; justify-content: center; width: 500px; height: 500px; } .box div { width: 100px; height: 100px; } <div class="box"> <div>this is centered vertically and horizontally</div> </div> also, using tables for layout isn't semantically correct. it's like using `map` as a for loop. also, consider folks with disabilities who rely on screen readers.
- eyelidlessness 5y ago
  Centering has been an easily solved problem with both flex and grid for years. If you’re having trouble with conflicting styles, you can revert them with, well, revert. You can even revert all of them with revert: all. But I don’t recommend that. If you’re still having trouble centering things I’d recommend getting familiar with the cascade and removing styles that conflict with what you’re centering.
  - 5y ago

thunderbong 5y ago

Totally agree! Have you done a 'View Source' on the HN page?

gentleman11 5y ago

Css grid is pretty flexible for zen garden like layouts

dmje 5y ago

Bugs me when people use divs to do tabular data display when there’s a perfectly excellent <table> tag. Copy pasting div based tabular data from a web page into a spreadsheet or document is made nightmarish. For layouts, sure, use flex or whatever, but not for data!

innocenat 5y ago
It's hard to make responsive table with <table> tag though (except if you only want horizontal scrolling)

FloNeu 5y ago

You aware that you can just define a container as display: table-cell and then center stuff in it the old way - at least i remember doing this 10years back or so to solve centering issue I just couldn't get right... (Pardon if above isn't valid css)

playpause 5y ago

I don’t mean to be rude, but if you can’t center content without googling and getting frustrated, you might just need to slow down and take 5 minutes to actually learn how to do it, and let it sink in once and for all. It’s been very straightforward for several years now. The idea that it’s difficult is just an old meme at this point.