The Frankenstein Desk | CSS-Methods

“One thing depraved this fashion comes.”

It was naivety, however after I first got here throughout Flexbox, after which CSS Grid, I had this sense all these positioning properties (align-self, justify-content…) can be out there to make use of on block and inline parts; issues like tables, lists, mounted parts, the whole lot. The workings is perhaps totally different beneath the hood, relying on the reference packing containers, however the syntax and anticipated outcomes can be identical: push to at least one edge, preserve on the heart, unfold round evenly, and many others.

Though that didn’t occur, what if I made one thing of that kind?

For instance, I might take out the soul of an HTML desk and sew it again along with CSS Grid. In different phrases, it reads like a desk, however acts like a grid, permitting me to make use of grid properties. Imagine it or not, some type of this was used prior to now to make tables responsive.

Earlier than I kill off a desk on this article although: there are plenty of benefits to straight-up tables. They supply a clear semantic format that browsers completely perceive and translate for assistive know-how when wanted. There’s even a

ingredient.

On the CSS aspect of issues, there are certainly circumstances the place CSS Grid is important for its intrinsic responsiveness, supply order independence, and positioning. That’s why it’s an indispensable device for layouts. Use that and let HTML tables to do the work of truly displaying tabular information!

However there’s the presentational good thing about desk we must always take into account. Technically,


 just isn't a presentational ingredient like a 
. It’s semantic: the browser and I share a standard that means for it. However whether or not the browser understands it as such or not, if I learn 
Regardless of there being semantic parts for titles, like  and , they don’t convey within the connection that 


 I consider it’s a heading adopted by information. Let’s say that’s pseudo-semantic to me, if presentation just isn't the appropriate time period.
That pseudo-semanticism remains to be helpful. It’s the distinction between me having to learn this:
Wall Calendar
…and this:
Wall Calendar

 and 
 have, and it’s higher to order 
 and 
 for textual structuring like glossaries quite than layouts.
So, is it okay if I exploit 

 this fashion? I imply, the desk itself merely used as pseudo-semantic markup pores and skin:
/* 🧟 */
desk {
  show: grid;
}
What if this HTML:

  
    CARD NUMBER
    1234 5678 9123 4567
  
  
    CROWN 
ATLANTIC 
BANK
  
  
    CARD HOLDER
    JANE DOE
  
  

…turns into this:

  
    CARD NUMBER
    1234 5678 9123 4567
  
  
    CROWN 
ATLANTIC 
BANK
  
  
    CARD HOLDER
    JANE DOE
  
  

Then, this CSS and its end result (for the primary markup):
.card {
  show: grid;
  grid-template-columns: auto auto 1fr;
  hole: 2lh;
}
CodePen Embed Fallback
…modifications to this (for the desk markup):
.card {
  show: grid;
  grid-template-columns: auto auto 1fr;
  hole: 2lh;

  /* Soul stripping */
  tbody { 
    /* Bypass tbody within the format */
    show: contents; 
  }
  tr, tr > * { 
    /* Keep away from table-row and table-cell kinds */
    show: block; 
  }
}
CodePen Embed Fallback
To me, the latter markup instance — a pseudo-semantic desk — is less complicated to scan than a handful of generic divs. I get the pseudo-semantics of desk, and the benefit of utilizing CSS Grid for the format. As for browsers, none of them have shunned this type of Frankenstein creation, at the very least but. The VoiceOver and keyboard navigation works as if it’s an actual desk.
However it’s comprehensible why it seems greater than a bit gross and in opposition to the grain of what we must always have the ability to. We’re inspired to keep up a separation of issues between content material and presentation and this does precisely that with out affecting the tables semantics, corresponding to its function. However possibly it ought to? There are many different HTML parts that CSS is able to busting.