Comment by westurner | Hacker News Reader

Comment by westurner | Hacker News Reader

Parent Full thread

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...

Reply on news.ycombinator.com