Let’s give some love to HTML tables

I’ve been seeing quite a few articles lately that are devoted to HTML tables.

But why? HTML tables are nothing new. They’ve been inherent to content creation since the early days of the web.

Actually, it’s a rather timely topic. HTML tables have been misappropriated for well over a decade by web designers. They’ve been used for content layout in ways far removed from their originally intended purpose.

The good news: today, we have powerful content layout capabilities that now obviate the need for HTML tables.

The bad news: web designers and developers have abandoned HTML tables en masse, and now there’s this perception that they bring little redeeming value for content creation.

That is just blatantly wrong, and a clear indication that this essential feature is poorly understood by many.

What are HTML tables for, precisely?

HTML tables allow presentation of structured, tabular-organized information in rows and columns.

North American source options for sushi
Seafood Origin Sustainability rating
Skipjack tuna US Good
King & snow crab Alaska Best
Lionfish US Best
Spiny lobster Mexico Best
Halibut Atlantic Avoid
Albacore tuna US Good
Source: Seafood Watch

It’s basically the web equivalent of creating tables in Word docs, Excel spreadsheets, and InDesign layouts. Tables can contain text, data, or even visual elements such as icons. You create an table in HTML for essentially the same reasons you would want to have tables elsewhere.

The possibilities for tables in web content run the gamut from very simple designs, to enormous complexity with tabular data in multiple subdivisions. You can style them practically any way you want.

A longtime hack for weak design tools

The web wasn’t initially designed for elaborate layout creations in two dimensions. The original envisioning was just blocks of text alternating with images, from top to bottom on a page.

Being able to place objects with precision in two dimensions has long been a pain. So a variety of hacks and workarounds were created, one of them being the use of HTML tabular formatting.

Today, with the recent availability of CSS Flexbox and CSS Grid, this is no longer necessary. The only possible exception is with HTML-formatted emails, due to the limited web rendering capabilities built into many email clients.

Many, if not most of the HTML emails you view today are still created with tables. But thankfully, that’s changing.

So… the overarching takeaway from all this? There’s an elementary but awesome tool for presenting tabular structured data, and it works darn well.

Let’s begin to appreciate it again for what it is.

(Curious to learn more? Here’s a great intro article to get you started.)