April 4, 2016 The CSS Display-Table property is cool!

Let’s travel back in time to the end of the 90s, which was about the time when I started writing HTML & CSS. Back then, just like you might have seen in the recent Steve Jobs film, computers were a tab primitive, and web-browsers behaved even more so. This was a real pain when you wanted to build one of the image-heavy designs that were oddly popular at the time when your average connection speed was slower than 3G in Pembrokeshire! Web developers learnt pretty quickly, that in order to build these designs the most reliable tool HTML & CSS had to offer was the <TABLE> element, which at the time seemed to be purpose built for the job, as it perfectly divided the page up into easily controllable little squares, that behaved themselves almost perfectly.

This was perfectly O.K. until people started talking about SEO and Accessibility and they correctly, although somewhat annoyingly, told us that tables should only be used for tabular data as that was the semantically correct thing to do – otherwise using them otherwise would break the internet!

To be honest, things were getting silly, and as tables were being nested within one another to the point of insanity, developers forgot to use their imagination and look for alternative techniques. It was at this point (…and literally overnight) that the word “Table” became web developments biggest ever taboo and the era of <DIV> hell began.

This went on for years, and it wasn’t until recently when I started building and designing responsive websites that I was encouraged to look for new solutions. In my search for an alternative technique to building rows of three equal width and flexible height boxes (…without one falling off the end, or having to fix the dimensions) I came across this fantastic article promoting the use of the CSS display-table property by some guy called Colin, which is full of useful examples.

Anyway, I found out pretty quickly that this technique works incredibly well. Here’s a snippet below, and read Colin’s full article if you want to learn more – PS, I used the span element to make the code easier to scan 🙂

Three col display-table example

See the Pen GZOjJX by Garry Richardson (@garryrichardson) on CodePen.