Hacker News Reader

Comment by xnx | Hacker News Reader

It's taken decades for CSS to come up with anything as workable as putting content in a centered table. Yet during that same period, use of tables was shamed for layout.

View on HN

HTML Tables don't wrap on mobile displays. If you build your site with tables for layout, it will probably have horizontal scrollbar(s) and you'll need to rewrite it for mobile; so a CSS framework is usually a safer choice for less layout rework, unless it's a data table.

HTML Tables need at least `<th scope="row|column">` to be accessible: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...

"CSS grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... lists a few interactive resources for learning flexgrid:

- Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/

- CSS Grid Garden: https://cssgridgarden.com/

MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

Tables absolutely can wrap on smaller displays, that’s how we used to code responsive emails.

I can't tell if you're serious or not, but tables are an absolute mess to handle layout.

Email clients handle the CSS code to varying degree of support when wrapping responsively so even if you think your layout looks good with wrapping it's because CSS influenced the layout in whatever particular client you are using. If client doesn't support CSS or the CSS properties you've used: jank email. Email unfortunately requires you to code like 1999 in this regard.

Browsers having CSS as standard and relatively up to date is a very good thing. Tables that aren't representation of tabular data are a mess.

It's actually really simple to use tables to handle layout once you're used to it, like I said, it's what we had to do with email for a long time.

It does take some css, of course, but only width and max-width. That's basically it to turn a table responsive. Add the dir attribute and you can also control the stacking order of elements.

My point being, working in a constrained way (like with email) allows you to make the most of the properties available to you, and it turns out tables for layout (semantic issues aside) are easy to grok and work predictably and reliably.

> HTML Tables don't wrap on mobile displays

Sure they do. HN is, famously, rendered as tables.

word-wrap: break-word in one table row cell is not the same as 20% of a 240px landscape or a 1024px IE6 display.

shot-scraper supports --scale-factor, --width, --height, and --selector/-s '#elementid' with microsoft/playwright for the browser automation: https://shot-scraper.datasette.io/en/stable/screenshots.html...

> Yet during that same period, use of tables was shamed for layout.

Tables for non-table data are not semantic and break accessibility.

There is more to web development than where content lands on a page, which is only part of why good web development is hard.

And good web development is harder because still too often web design is done by designers who don't have enough understanding of web development.

My gawd, just earlier today I saw a help wanted that said "...PSD to pixel perfect..." I would have laughed if I wasn't already crying. "This is my life" and then the tears kicked in.

Tailwind is not semantic, but no one seems to mind that for some reason.

Tailwind is anti-semantic. It's a less verbose version of the style="..." attribute. It's like people just gave up on the idea of element classes altogether.

Because they don’t work, and you end up with some pseudo-semantic but actually not hell.

Ok but then tables must be ok for layout.

I never said that they weren’t. I think the semantic purists are nuts.

Haha yes I remember that.

Pros and cons of using DIVs and CSS:

+ hipster cred

- DIV soup

- CSS back then was wildly, W I L D L Y unsuitable for what people where trying to do (I think it boils down to it being designed to format documents, not web apps or on-screen layouts)

Pros of using TABLE:

+ Actually works

I never had to spend time in the old days debugging centering, I just used <center> and tables and it worked! Then I could spend the time saved by adding <font> tags everywhere and making images for my rounded corners.

I found using tables to be the most robust way at the time

Nostalgia. I remember those days, 2000+ lines long tables written by hand in notepad on Windows 98 and served with PWS. Those were the days.

Try ‘View Source’ on HN :)

No way!!!

Reply on news.ycombinator.com