The Frankenstein Desk | CSS-Methods

“One thing depraved this fashion comes.”

It was naivety, however once I first got here throughout Flexbox, after which CSS Grid, I had this sense all these positioning properties (align-self, justify-content…) could be obtainable to make use of on block and inline components; issues like tables, lists, fastened components, every part. The workings is perhaps totally different beneath the hood, relying on the reference containers, however the syntax and anticipated outcomes could be identical: push to at least one edge, hold on the middle, unfold round evenly, and so forth.

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

For instance, I may 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 previously to make tables responsive.

Earlier than I kill off a desk on this article although: there are loads 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 <caption> factor.

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 really displaying tabular knowledge!

However there’s the presentational good thing about desk we must always contemplate. Technically, <desk> will not be a presentational factor like a <div>. 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 <th> I consider it’s a heading adopted by knowledge. Let’s say that’s pseudo-semantic to me, if presentation will not be the appropriate time period.

That pseudo-semanticism remains to be helpful. It’s the distinction between me having to learn this:

<div class="product-title">Wall Calendar</div>

…and this:

<th>Wall Calendar</th>

Regardless of there being semantic components for titles, like <h1> and <sturdy>, they don’t carry within the connection that <th> and <td> have, and it’s higher to order <dt> and <dd> for textual structuring like glossaries slightly than layouts.

So, is it okay if I exploit <th> this fashion? I imply, the desk itself merely used as pseudo-semantic markup pores and skin:

/* 🧟 */
desk {
  show: grid;
}

What if this HTML:

<article class="card">
  <div class="card-number">
    <sturdy>CARD NUMBER</sturdy>
    <span>1234 5678 9123 4567</span>
  </div>
  <div class="card-bank">
    <sturdy>CROWN <br>ATLANTIC <br>BANK</sturdy>
  </div>
  <div class="card-name">
    <sturdy>CARD HOLDER</sturdy>
    <span>JANE DOE</span>
  </div>
  <!-- extra -->
</article>

…turns into this:

<desk class="card">
  <tr class="card-number">
    <th>CARD NUMBER</th>
    <td>1234 5678 9123 4567</td>
  </tr>
  <tr class="card-bank">
    <th>CROWN <br>ATLANTIC <br>BANK</th>
  </tr>
  <tr class="card-name">
    <th>CARD HOLDER</th>
    <td>JANE DOE</td>
  </tr>
  <!-- extra -->
</desk>

Then, this CSS and its end result (for the primary markup):

.card {
  show: grid;
  grid-template-columns: auto auto 1fr;
  hole: 2lh;
}

…adjustments 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 types */
    show: block; 
  }
}

To me, the latter markup instance — a pseudo-semantic desk — is simpler 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, no less than but. The VoiceOver and keyboard navigation works as if it’s an actual desk.

But it surely’s comprehensible why it appears to be like greater than a little bit gross and in opposition to the grain of what we must always be capable of. We’re inspired to take care of a separation of issues between content material and presentation and this does precisely that with out affecting the tables semantics, reminiscent of its position. However perhaps it ought to? There are many different HTML components that CSS is able to busting.