Lay It on the Table

HTML Tables Used for Layout? Pepperidge Farm Remembers

I’m looking for a bubblegum patch for tables displayed in narrow viewports. So, I thought about display: block, max-width: 100%, and overflow-x: auto. Take a look at the examples: Example 1 shows the problem of the overflowing content of the table and Example 2 shows the quick solution.

[codepen_embed height=”621″ theme_id=”1820″ slug_hash=”Kobqa” default_tab=”result”]See the Pen Lay It on the Table by Brian Dys Sahagun (@BrianSahagun) on CodePen.[/codepen_embed]

A quick Google brought me to MDN’s table page (while intently avoiding W3Schools).

And this reminder brings me back so much fun memories with “the original layout grid”.

A friendly reminder about <table> from MDN.

…the <table> element should not be used for layout purposes.

Crap, right? My initial reaction was “who are they to tell me what I should or should not do”?

Gmail does it. It uses table to layout its Spam Box.

Gmail Spam Box Uses Table for Layout Purposes

And certainly HTML emails do it!

HTML Emails Use Table for Layout

Don’t get me wrong – I’m not a big fan of table for layout. I even started front-end design using position for layout. But I couldn’t deny the real power of table – percentages and vertical alignment.

But too bad, table, you were killed, too, by the internet police. Just like they did W3Schools.

Table vs CSS


Leave a Reply

Your email address will not be published. Required fields are marked *