I know you're not entirely serious, but we really had it good and largely figured out with tables. It's probably because using tables for layouts was my native language, but I still sometimes have to mentally translate divs into a table in my mind to picture what is happening, and when default types are change (like block to inline, etc) it sometimes breaks my brain and I have to fallback to experimentation to get what I want. Slight disclaimer though: I'm a backend/infra guy so don't do frontend very often.
Tables aren't even deprecated. IMO you're better off keeping the tables than transforming it into <div> soup. 20 years ago you'd hear it shouted from the rooftops: "Tables for layout are not semantic!". Guess what? <div>s are never semantic. Just use tables if it suits you.
If you want to remove the semantics of table elements, you could set a role="presentation" attribute on all table-related tags. I'm wondering what HTML semantics enthusiasts will say about this. ;-)
You almost got me. After all why not? So I had to go read stuff, and think more about it than I would have. So thanks for this.
So: <table role="presentation"> is probably mostly fine, but not great, and not good practice.
The ARIA spec [1] says:
> 2. Notes on ARIA Use in HTML
> 2.1 First Rule of ARIA Use
> If you can use a native HTML element [HTML51] or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.
That's because simpler is easily more accessible. ARIA is last resort, when all else failed. ARIA is complex and not always well implemented, or implemented at all, and when it is implemented, interpretations can differ. Your content will be more accessible to more users / for more browsers if it doesn't rely on ARIA to be accessible. And more often than not, you can do more harm than good by using aria attributes, because it's easy to misuse them, which is worse than not using them at all. Now, ARIA is still very useful and should be used when it improves things over what HTML/CSS supports by itself, but table-based layouts have readily available HTML/CSS solutions.
My opinion is that there's no good reason today to use tables for presentation. One of the reasons is always the same: separation of concerns. Structure your content, in the simplest possible way, and then style it. Structured content, with a structure that's as simple as possible, is more easily accessible. Add divs if really necessary for styling (which don't really change the structure, since they don't have meaning - keeping in mind that they are a compromise).
It's funny how everyone seem convinced by the principle of separation of concerns, except for HTML/CSS/JS.
You could use divs with display:table(-row|-cell) for the same result. Although CSS flex or CSS grid would let you achieve the same thing with a simpler structure and will allow you to have a responsive design. Fat tables with side menus are unwieldy on small screens and your <table><tr><td>-based structure will make it more difficult to offer a usable design to them.
Table layout are also not great on text / terminal-based browsers. Letting the content flow from top to bottom will be way better. You have this for free if you don't use tables, because usually terminal browsers don't understand CSS.
I would then reverse the question: why use tables when you can use display:table, CSS Flexbox or CSS Grid? What are the benefits? Especially when they are simpler as soon as you learned once how to do your favorite layout using these "new" things. I won't be convinced by any answer that sounds like "I don't really want to learn this stuff" because if we are trying to answer "What is the most correct way to do this", we should seek to use the better version, not the one we are familiar with.
It seems to me "Why not use <table role=presentation>?" is a bit like "Why not use this carafe labeled 'this is a glass' as a glass?". Sure, why not, it will work, but if you have a glass now, even if you need to pour the water into the glass before you can drink it, isn't it better? (of course, maybe not the best analogy, I'm not good at analogies, but I hope it can help understand my perspective on <table role=presentation>).
I also believe role="presentation" or role="none" is a code smell. It has legitimate uses (I guess), but the use better be clearly justified.
one is a table the other pretends to be a table. There has to be a lot wrong for the table to forget what it is. try disabling style.
css also gets complicated much faster than html. I like to offload complexity to less complicated areas.
a practical example: i look at each row and set rowspan for duplicate values. a series of rows might have week 22 as their first cell and multiple with monday as their second.
How about "one pretends to be a layout, and the other is a layout"?
I don't understand well what you are saying, but:
> a practical example: i look at each row and set rowspan for duplicate values. a series of rows might have week 22 as their first cell and multiple with monday as their second.
This seems to be a case of using a table as a table, which is fine. You should use tables when you are trying to represent tabular data.
This seems to fall under the unconvincing "I don't really want to learn this stuff". This seems to be the only reason people are tables for layouts today.
People doing this are probably not interested in the rhetorical efficacy of the justification. In other words it probably doesn't matter whether you find it convincing.
Counterpoint: no semantics is better than wrong semantics. If a screenreader thinks your layout is a (data)table, it makes your visually impaired users sad.
I lost out on a front end job about 15 years ago because I marked up a business’s open and close hours in a table during a coding test. I was told that my skills were clearly out of date.
If you use tables for what they were intended for or you have no problem with them, keep on truckin. But they sucked when they were the only way to do things.
Table are used when tables are needed. Excel like overviews. No reason to not use tables.
For site layouts (multiple columns etc) you would better use divs in a flexbox or something.
Who needs Flexbox's inscrutable 1-dimension language when you can use ASCII diagrams in CSS Grid for clever 2D things easily? CSS Grid Kids are truly spoiled.
It is almost a shame modern browsers no longer support all the fun layout patterns of ol' FRAMESET. There was a layout tool to cut your teeth on (possibly literally the way it was made out of browser chrome).
Not that I necessarily advocate for frameset insanity, but you know what? That is a shame. My controversial (?) opinion is that browsers should literally never break anything that was once a part of the web platform unless there's simply no other choice. If the size of it is getting too big... first, stop adding more shit. (And then maybe, implement some old features in terms of some newer ones. Not really "web platform" but I am a huge proponent of what Ruffle is doing for the web.)
I’ll go a step farther: improved frames and datasource-aware tables and lists with a few very basic features found in almost any other UI kit out of the box would have given us 99% of the actually-beneficial stuff AJAX did, but better.
The Web is a ton worse because we decided to build apps on it but never built the tools to do it right, even though the building blocks were right there.
IMO the biggest problem with the way frames works is that it doesn't work well with navigation. I think unfortunately that this is just a design flaw with frames and it needed breaking changes to mitigate.
I think I would've rather seen it go that direction, but it's hard to say. Without a crystal ball, we can't really compare the outcomes, and it's hard to imagine what would've happened in this hypothetical. I mean, I don't think in 2004 I would've been able to guess (or stomach) what the web was going to become 20 years down the road.
I can't agree with this, because it creates a "barrier of entry" for people building new browsers. Old things should deprecate when new things do them better, and deprecated things should phase out.
Otherwise, we're stuck with Chrome Forever. I'd rather not.
Disagree. Deprecating things like <frameset> will not make it easier to build new browsers. Shadow DOM and WebComponents are significantly more complicated for browsers to implement than any old "deprecated" technologies. If you don't want Chrome forever, what you want is not removing old technologies, it's preventing more new technologies from becoming a part of the web platform.
We'll get better at building software. Even with huge engineering teams, we can only build the browsers that we have today due to improvements in large-scale software engineering.
Framesets still work as far as I know, they're just no longer recommended for a few reasons. Browsers already try very hard to never ever break anything, at least not anything that's been commonly supported for years or has made it into a standard. The main places browsers have broken compatibility with old content are related to plugins like Flash and Silverlight, which were always controlled by a single vendor instead of being open standards.
> at least not anything that's been commonly supported for years or has made it into a standard.
It's more: has made it into a standard and was commonly supported.
Sadly, the browsers aren't trying hard enough not to break anything. They are trying hard not to break anything standard, but the problem with that is that the standards can change, or that some things can be claimed to never have been standards all along. A bunch of IE/Netscape things have broken already such as BLINK and MARQUEE, despite being common enough to "feel" standard even though yes they were never actually standards. Also, as we've seen with the MathML battle in recent years, even standards aren't guaranteed to be kept in browsers if not "commonly supported".
The MDN deprecation warning on FRAMESET:
> Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
The browser support table says that every browser still currently supports FRAMESET with simple COLS and ROWS, but as I recall FRAMESET used to also support more complicated layout tools. My brain recalls it as being very similar to TABLE layout at one point in time that you could also have (limited) COLSPAN and ROWSPAN options. Such things may also have been IE/Netscape era "non-standards". If I had examples, they are probably lost to time. Similarly, with nearly no way to easily search in today's indexes for things specifically from the 1990s I can't think of a good way to find old examples either. It's also possibly my memory is just failing me on this and the crazy things I recall doing with framesets were just table layouts after all and maybe iframes, but I do recall doing some crazy things in the 90s that certainly aren't "standard" today and I know wouldn't work in today's framesets.
Yeah I don't really count Flash or Silverlight as parts of the "web platform" personally, though I will re-iterate that I am still very pleased with the Ruffle project nonetheless. From a practical standpoint, Ruffle does a lot of good even if Flash always was proprietary and not really a part of what the web platform really was at its core.
I hope <frameset> continues to work into the future. I'm sure eventually it will wind up on the chopping block, and personally I think that'll suck.
Although there is some degree of silliness to suggesting table layouts in 2024, it frankly really is not that bad. To me personally, the era of float: left and clearfix and 10 layers of wrapper divs was significantly more of a mess. "Oh look, I got my layout working on IE6! Oops, it's now broken in Opera..." Anyone remember using invalid CSS to write browser-dependent styles? How about using Microsoft's proprietary DirectX filters to make PNG transparency work? In the era of taking crummy PSDs full of graphics and chopping them up into images for an HTML template, these were the tools of the trade.
Not that tables were perfectly standardized or anything, because I do remember Netscape and IE not totally agreeing on how to handle column widths, but they sure were, well, simpler.
Yeah, but HN uses tables in a really dumb way. Each comment is in a separate table with the width of the first column set to provide the correct amount of indenting.
If the comments were properly nested you would just have a standard left margin and the tables would be completely unnecessary.
