# The Frankenstein Table: Merging CSS Grid with HTML Tables

Exploring the unconventional use of table markup for layout through CSS grid properties.

- **Source:** [CSS-Tricks (feeds.feedburner.com)](https://css-tricks.com)
- **Published:** 2026-10-29
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://css-tricks.com/the-frankenstein-table/>
- **On Brifing:** https://brifing.si/s/51b525bc-656f-40ad-a7e5-ada2df3164f1

## The Desire for Grid Tables

Developers often wish for the alignment power of CSS Grid within standard HTML tables. While Flexbox and Grid offer robust positioning like justify-content, they do not natively apply to traditional table elements. This creates a desire to strip the default table behavior while retaining the underlying semantic structure for better layout control.

## Semantic Value of Tables

HTML tables provide a clean, semantic layout that browsers and assistive technologies interpret effectively. Elements like caption and the relationship between th and td offer a structured hierarchy that generic div containers lack. This pseudo-semantic connection remains highly useful for organizing data, even when the visual presentation deviates from standard tabular grids.

## The Frankenstein Approach

The proposed method involves applying display: grid to a table element to bypass standard table-row and table-cell behaviors. By setting tbody to display: contents and forcing tr elements to display as block, developers can leverage grid properties. This creates a hybrid structure that functions as a grid while maintaining table-like markup.

## Code Implementation Strategy

To implement this, you replace generic div structures with table, tr, th, and td tags. The CSS then overrides the default browser styles by using grid-template-columns and gap properties. This technique effectively strips the soul of the table, allowing it to act as a grid container while keeping the original HTML semantics.

## Readability and Scanning

Using pseudo-semantic tables can make complex markup easier to scan compared to a nested pile of generic div elements. The th and td tags provide immediate context for the data they contain. This approach balances the need for readable source code with the flexibility required for modern, responsive web design layouts today.

## Browser and Accessibility Impact

Current browser implementations do not reject this Frankenstein creation, allowing it to render as intended. VoiceOver and keyboard navigation tools continue to interpret the structure as a table, preserving essential accessibility features. This suggests that the browser's understanding of the element's role remains intact despite the radical CSS-driven layout modifications applied.

## Separation of Concerns

This method challenges the traditional separation of content and presentation. While it technically maintains the table's role, it pushes the boundaries of how HTML elements should be styled. It raises questions about whether CSS should be allowed to override the fundamental display properties of semantic elements like tables in such an aggressive manner.

## Future of Layout Techniques

While effective for specific use cases, this approach remains unconventional and against the grain of standard development practices. Developers must weigh the benefits of pseudo-semantics against the potential for confusing future maintainers. Ultimately, it serves as a creative experiment in pushing CSS capabilities to their limits within existing HTML structural constraints.

## Sources covering this story

- https://css-tricks.com/the-frankenstein-table/ — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._