CSS-Tricks: Building the Frankenstein Table with CSS Grid
Exploring the concept of stitching an HTML table back together with CSS Grid to leverage modern layout properties while weighing semantic pros and cons.
Stock photo for illustration only, not from the actual event
- Experimenting with combining HTML table structures with CSS Grid to utilize positioning properties.
- Traditional HTML tables still offer crucial semantics and accessibility for assistive technologies.
- Mixing concerns between markup and presentation can look unconventional while preserving structural roles.
- An insightful piece from CSS-Tricks questioning the boundaries of styling HTML elements with CSS.
Fascination with web technology often begins with naive expectations. When Flexbox and CSS Grid first emerged, developers might have hoped that positioning properties like align-self or justify-content would become universally available across all block and inline elements, including tables, lists, and fixed items, sharing identical syntax and expected outcomes.
Although that universal integration did not happen natively, it sparks an intriguing question: what if we built something along those lines ourselves? For instance, taking the soul of an HTML table and stitching it back together using CSS Grid allows it to read like a standard table while acting entirely like a grid.
Stock photo for illustration only, not from the actual event
This hybrid approach enables developers to harness powerful grid properties on tabular data. In fact, some variations of this technique were even utilized in the past to help make tables responsive before modern media queries took over.
The Frankenstein table concept highlights the continuous drive of web developers to bridge semantic data structures with modern layout flexibility. While hijacking table elements purely for grid styling pushes against strict separation of concerns principles, it brilliantly challenges our understanding of how browsers interpret HTML roles and CSS presentation rules.
Before completely dismantling traditional tables, however, it is essential to recognize their inherent advantages. Straight-up HTML tables provide a clean semantic layout that browsers and assistive technologies perfectly understand. They even include dedicated elements like <caption> for added context.
On the styling front, CSS Grid remains an indispensable layout tool due to its intrinsic responsiveness and source order independence. The best practice continues to be letting HTML tables display raw tabular data while employing CSS Grid for overall page layouts.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment