Do you know that there is an HTML tables API?

Posted by begoon 2 days ago

Do you know that there is an HTML tables API?(christianheilmann.com)

250 points | 198 commentspage 3

bane 1 day ago|

This is a great reminder that the Eternal September still exists and perhaps mercifully appears to be affecting those with at least some technical exposure.

https://en.wikipedia.org/wiki/Eternal_September

joquarky 1 day ago|

And the release of the iPhone created another, larger wave.

Mystery-Machine 2 days ago||

The variable naming convention used here could be improved for clarity. I prefer appending `El` to variables that hold DOM elements, as it makes identifiers like `tableEl` clearer and helps avoid ambiguity between variables such as `table` and `row`. Also, the variable named `table` does _not_ actually represent a table element; it would be more accurate to name it `data` or `tableData` to better reflect its purpose.

embedding-shape 2 days ago|

Probably because I first learned programming with JavaScript and very early started using jQuery, but I've always used prefixed `$` to indicate "This is a DOM element" (started doing this once jQuery stopped being so popular). So the example would be something like this for me:

  let table = [
    ['one','two','three'],
    ['four','five','six']
  ];
  let $body = document.body;
  let $table = document.createElement('table');
  $body.appendChild($table);

Always felt it worked out short and sweet, and as long as you're not refactoring a jQuery codebase, seems to work out well in practice.

BobbyTables2 1 day ago||

The author didn’t know the <TABLE> tag existed ???

dtagames 2 days ago|

Tables died (thankfully) to make room for flex and grid. I can't see any use case for them at all anymore.

embedding-shape 2 days ago||

How about displaying data in rows and columns in a accessible and easily styled way, without having to rely on JS and your own CSS to replicate a table? How exactly would you do that with HTML and CSS without using tables? Using flex and grid for those purposes don't make much sense unless you care about design above all else.

<table> just gives you so many good defaults (semantic structure, accessibility, column styling, column alignment, keyboard navigation) for free compared to using CSS to create your own table, that I'm not sure why you wouldn't use <table> for tabular data.

Of course, if you need masonry, card grids and so on it makes sense, do actual layouting with layouting tools. But thankfully <table> hasn't died just yet, it's still better than CSS for many use cases.

dtagames 1 day ago||

Nothing about flex or grids requires JS. That's entirely CSS.

begoon 2 days ago|||

I personally disagree. When data is semantically a table, not just a “table-looking” layout, I would rather use the table tag.

the__alchemist 2 days ago||

I think this is the gist of it. Tables were abused as general spaced 1D, and 2D styling components. Introducing proper general spacial styling components means we don't need to extend tables beyond their original purpose, but doesn't mean we shouldn't use them for that purpose!

zetanor 2 days ago|||

The use case for a table is to present data.

andai 2 days ago|||

This implies that you were considering -- for a split second -- making a 90s style table based website layout, using the Tables API? ;) I might have to try that now...

SahAssar 2 days ago|||

Tabular data? Tables have a purpose, it's just that people misused them for layout purposes.

loloquwowndueo 2 days ago||

To be fair, we did that when there wasn’t much choice for laying out web pages other than using tables. I was there!

cogman10 2 days ago|||

Especially in ways that worked cross browser.

Young folk don't understand just how wildly different IE5 was to the Netscape or the Mozilla browser. Or just how bad Javascript was when it started to be used on the internet.

I've lived through and seen the evolution. For all the shit the JS community takes for constantly revving frameworks, it's 1000x easier to make a website that looks the same regardless of browser due to a lot of these frameworks and browsers themselves evolving.

dvratil 2 days ago|||

It's not that long ago that tables were the only reliable layout tool for HTML emails (mostly due to Outlook supporting only very limited subset of CSS).

theandrewbailey 2 days ago|||

How about displaying data in rows and columns, like records in a database? Or have you forgotten SQL, because you retrieve JSON from your 1000 NoSQL microservices?

dtagames 1 day ago||

Rows and columns are exactly what grid was added to CSS for.

theandrewbailey 1 day ago|||

Using only CSS for tabular row and column data is just as wrong as using tables for layout. There are legit reasons for using <table> today that can't be replicated by CSS. Namely, CSS doesn't confer the same semantic meaning into markup that <table> does.

Compare https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/...

with https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

joquarky 1 day ago|||

I'd hate to hear that on a screen reader.

pikuseru 2 days ago|||

They’re probably still quite useful for displaying tabular data - there’s also semantics involved, it’s not primarily just a layout mechanism.

nophunphil 2 days ago||

I agree with many other replies here, specifically about accessibility. Once I learned how to use a screen reader, it was eye-opening. So many web applications are utterly broken for users with assistive technologies.

Tables built with flex and grid absolutely can be made accessible with WAI-ARIA, but native table elements are harder to mess up.