An alternative to traditional HTML tables.

I’ve always hated the way HTML tables must be written. Here’s an alternative that I wrote tonight in a sort of code-writing jam session: https://jsfiddle.net/FirePrism/rLa584u7/73/

The benefit of this approach is that you can easily see where your column headers are, as they’re ensconced in a column element. The table behaves the same way you would expect a traditional HTML <table> element to behave. It stretches and fills exactly the same way, without all the messiness. This is because I’ve made use of the CSS grid property, which documentation can be found among other places, here. One caveat is that the now-defunct Internet Explorer does not support this property. But it’s time to usher that old Microsoft workhorse to the slaughterhouse and turn it into glue anyway.

The main argument against this form of course would be that using a standard for loop and going from left to right to fill the data might be difficult when associating it with a row id (like a primary key from a database entity). I’m still reasoning that bit out at the moment, and wouldn’t mind a suggestion.