Using tables for responsive layout – CSS tables

I’m sure you’ll agree, tables are simply great for laying out simple responsive pages. They can provide robust solutions to common layout problems and are easy to implement. Before we get into more detail, be aware that the table layout can be achieved using HTML (HTML tables) or CSS (CSS tables).

Basic HTML table

Basic CSS table

The difference between these 2 approaches is quite straight forward. CSS tables don’t mix presentation and markup. This makes them great for layout purposes. Another thing that makes them useful for creating responsive websites is that CSS tables feature properties that can be added to HTML elements at one viewport size then removed at another.

HTML tables should only be used for displaying tabular data. This is because using them for layout purposes would break the “don’t mix presentation and markup” rule.

You’ve probably already encountered the CSS table when you were searching for a solution for vertically aligning items:

Markup wise is merely one element (acting as a table-cell) nested inside another (acting as a table):

You can use this vertical centering trick for fullscreen hero images which are pretty popular nowadays:

Using CSS tables makes creating a basic responsive layout that contains main content and sidebar sections – a piece of cake:

You can see in the CSS code snippet that we have a media query that applies the table properties only for screens with viewport larger than 480px. On smaller screens, the main content and sidebar sections stack up on top of each other.
Be sure to check out a live example here.

These are just a few simple use cases. You can pull off far more complex layouts using CSS tables but be careful and try to avoid overcomplicating things.

CSS tables are supported by all modern browsers. If you don’t need to support IE9, you should be aware that all the examples here could be made with Flexbox layouts.