📝 This Week in Web Design and Development

View this newsletter on the web.

🔥 A small rant about tables

[Robin]: I’ve been interviewing a lot of folks lately for front-end roles at Gusto (where I work) and I’ve been noticing something peculiar about the interview process. In these interviews, I test a front-end engineer’s basic HTML and CSS skills with the following mockup that I ask them to build:

All I ask them to do is replicate that design in the browser with the help of CodePen (and without the need for them to do anything with interactivity or JavaScript). Anyway, I really like this exercise because the design makes things deceptively tricky. How will they organize the calendar? Will they use Grid or Flexbox? Will they stick to a regular old table? Will they care about accessibility? Do they know about ARIA roles? Do they care about different browsers and responsive design? How do they structure their code? And most importantly of all: are they focused? Do they tackle one problem at a time before moving onto the next? Those last questions are perhaps more important than any technical skill in this humble blogger’s opinion.

However! One point of anxiety I hear from a lot of folks in these exercises is whether they should use a table to markup that calendar. I’ve heard it perhaps a dozen times this year, where the interviewee mentions that they’ve heard that the table element is not good practice. And that they should never, ever use it.

Which is odd, because there’s nothing wrong with it! This calendar is the perfect use case for a table — any time you’re marking up tabular data then a table is just fine. The only problem comes in when you start using that element specifically for doing layouts. Like, say you want a grid of elements on a page – but that data is not tabular – then that’s not a great idea!

Anyway, I just thought I’d mention that because it’s mighty interesting to see this common concern leak out into our industry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s