Hacker News Reader

Comment by 7bit | Hacker News Reader

As for the vertical centering, trying this 20 years ago, it was a pain in the ass. These and layouting in general got massively simplified in the past 20 years. Remember that back then, everything was cramped into tables? I do. So if someone tells me, "DOM, HTML and CSS is becoming more and more difficult" just tells me to ignore their amateurish and unfounded opinion... Hah!

View on HN

Even if using { display: grid }, or a combination of flex rules, hardly seems like an ideal solution, considering there does exist { text-align: center } (which, incidentally, doesn’t only align the text!), I do agree with the general point. Today it is reasonably easy to make quite complex grid-driven layouts; not easy—often, if not always, making a complex thing easy requires also making it restrictive and opinionated—but perhaps easy enough considering the end result.

20 years ago it was much easier, you could ethically use tables for layouts which semantically did not make much sense, but in terms of code structure it was very simple: this table is the full size of the page, this cell is the header with this height, this cell is the sidebar with this width, this cell occupies the rest of the space with content positioned in the middle, all expressible without any styling at all.

This sounds crazy to me, the flex system is exactly this but also semantically correct. You can’t possibly be telling me that table hacks of yore are easier than this, a clearly designed system for the actual problem you want to solve https://css-tricks.com/wp-content/uploads/2022/02/css-flexbo...

I’m not at all a frontend person, I just think flex is one of the best systems I have ever used. It usually gets the job done in a way that I expected to work (and that bar is pretty low lol)

Flex is great but tables are also a natural solution for anything grid-based, which of course layouts almost always are. The whole internet used to do stuff like this before the structural flow of content became important:

    <table width="100%" height="100%">
      <tr>
        <td colspan="2" height="50">  header  </td>
      </tr>
      <tr>
        <td width="200" valign="top">  sidebar  </td>
        <td valign="middle">  content  </td>
      </tr>
    </table>

Bring back the 90's. ;) The memories of spacer gifs...

I still find myself missing Macromedia Fireworks on occasion!

GP is also wrong anyway, CSS Flex is the wrong thing for creating layouts like this. We now have CSS Grid, which is the actual replacement for table-based layouts (which were used more recently than people like to admit because of Flex not working for two-dimensional layouts).

Sorry, I often conflate flex and grid, they occupy the same spot in my mind as “1 dimensional” and “2 dimensional” versions of the same underlying thing. I am wrong.

No, tables are the right solution: nonoverlapping elements arranged in a sane way that is easy to reason about. The arguments about semantics so everything can be a div are hilarious -- it really doesn't matter.

You can still do this if you want, table element still exists and works the same way.

Well yeah but no self-respecting developer has done this for 15 - 20 years... it's kind of a red flag these days!

I really wish this was true. Sadly the caniemail website - https://www.caniemail.com/ - says that Gmail still doesn't support CSS grid or flex, which leaves nested tables for layout as the only viable solution for HTML emails (which, however many times you plead with your marketing colleagues, is still their preferred way for contacting/stalking customers).

people say this about inline styles too but Notion built a 100 million user business with them ¯\_(ツ)_/¯

Not 20 years ago and not now because it makes no sense to blind people using screen readers.

And ~15 years ago a consensus formed that making separate sites for phones and other devices was not the way forward and tables are ill suited for responsiveness.

We've had CSS Grid for 7-8 years and Flexbox for longer, tables can be left for what they're good at, tabular data, not layout.

Reply on news.ycombinator.com