Frontend Post #7153 · source on Telegram
Nested HTML Tables Inside Tables: The Frontend Developer's Nightmare
Description
A screenshot of a browser DevTools Elements panel showing deeply nested HTML structure: a table containing a tbody, containing a tr, containing a td, containing another table, containing another tbody, containing another tr, containing a td, containing a p element with collapsed content, followed by a closing /td. The 'Search HTML' bar is visible at the top. This represents the classic anti-pattern of using nested HTML tables for layout, a practice common in early web development and legacy email templates that makes modern frontend developers recoil in horror
More like this
More like this in Frontend →
Use J and K for navigation
Comments
31Comment deleted
This HTML structure has more nesting levels than a Russian doll factory. Somewhere a CSS Grid is weeping, knowing it was born 20 years too late to save this page
This is the kind of HTML that makes you appreciate modern CSS, because the only 'responsive design' here was how quickly you responded with 'I quit' when asked to add a new column
Remember: every time you complain about CSS Grid, a senior dev quietly flashes back to debugging 8-level table nests with 1-pixel GIF spacers in IE6
After 20 years in the industry, I still have developers who insist tbody is optional because 'the browser adds it anyway' - the same folks who wonder why their CSS nth-child selectors are off by one and their JavaScript table.rows collection behaves mysteriously
Ah yes, the classic Russian nesting doll approach to HTML tables - because why use CSS Grid when you can make your DOM tree deeper than your call stack during that one recursive function you wrote at 3 AM? This is the kind of markup that makes accessibility auditors weep and causes browser rendering engines to question their life choices. It's like someone took 'separation of concerns' as a personal challenge to violate as spectacularly as possible. Fun fact: archaeologists have discovered similar structures in codebases from the Geocities era, perfectly preserved in their original horror
Nothing screams “enterprise” like a layout that’s a recursive <table>; responsiveness handled with colspan and hope
When DevTools shows table > tbody > tr > td > table, the real redesign debate isn’t Flexbox vs Grid - it’s whether the strangler‑fig can outlive the CMS contract signed in 2004
Nested tables: the layout recursion that predates Tailwind - and still haunts your enterprise monolith
I had to work on a government system like this in 2023. CSS was barely used outside of some element styling Comment deleted
Email code yay Comment deleted
nah we didn't do tbody tags back then. it was table > tr > td > table > tr > td all the way down. Comment deleted
Where is your <thead> at?! 🙈🙉🙊 Comment deleted
Yeah but I've seen many old websites using tables to lay the sections out in the website instead of positioning them with CSS. So they used tables inside tables inside tables... And this is just what it looks like when you inspect the page on a browser Comment deleted
Tbody gets automatically added to the dom by modern browsers. Even if it doesn’t exist in the source Comment deleted
Someone's coding an Excel sheet of Excel sheets Comment deleted
well, we didn't use tbody\thead\tfoot tags until... I think chrome? When it became a thing in html code? Comment deleted
Who remembers making a box shadow with a 3x3 table? Comment deleted
And every custom-styled button is a 3x3 table with img-s of borders Comment deleted
custom-styled button now: Comment deleted
nine patches were ahead of its time if you knew how to use the photoshop slice tool Comment deleted
golden era of web Comment deleted
then what do you use for displaying tables? Comment deleted
canvas Comment deleted
Jesus Christ! You should blur the image to avoid mental disorders Comment deleted
Literally only solution if you want your stuff to work on LEGACY legacy stuff Comment deleted
In fact table is not yet obsolete. And if you want a table, just use table, not a fancy css. Comment deleted
sadly it has a few quirks with relative positioning and overflow that makes it unsuitable even for table data if you want more fancy stuff in the cells than just text Comment deleted
I used this at my first year Always hate it Comment deleted
that's nothing. if you want to laugh (cry violently), inspect element the twitch chat input box it's like 25 divs deep iirc :) whole site is finest react spaghetti Comment deleted
even in react you can have 10 nested components that render one div in the end, that's just skill issue Comment deleted
I know it's a skill issue Comment deleted