“Code Like It’s 1995.”

This is a phrase that is so often echoed when it comes to email development. Just look up any article on how to develop for email and you will almost certainly come across this phrase, often in the first paragraph.

So how do you code like it’s 1995? If you’re on the younger side like me, you were probably still wetting your diaper in 1995. Even if you’re older, most of today’s web developers have not been making websites long enough to remember what it was like over twenty years ago. Luckily, coding websites and emails like it’s 1995 can be boiled down into a single word: tables.

Tables are one of the oldest and most widely used methods for coding the wireframe of a web page. They are still an integral part of every web developer’s toolkit, as every one of us had to learn them when we were starting out and have almost certainly used them many times in our careers, even if many of us don’t normally use them for wireframing.

If you ask high-level web developers who really know what they’re doing, you may be surprised at how many are still using tables as their go-to wireframing tool. The use of tables is remarkably good for wireframes because you can precisely place elements without the nightmares that often come as side-effects of using CSS tools like “position,” negative margins, or any of the more hacky solutions that you’ll come across.

Another interesting reason to use tables is vertical centering within elements. This is a challenge that really shouldn’t be difficult in the world of 2019, but here we are, still trying to wrestle our div contents into a vertically centered alignment and usually resorting to nasty little CSS hacks to make it happen. We have “text-align: center” for horizontal centering, so why don’t we have a simple “vertical-align: center” yet? While I don’t have the answer to that question, tables do have this feature. The correct syntax in a table would be “vertical-align: middle” and would be used as a prop within whatever <td> element contains the content that you want vertically centered. 

If you wireframe with tables, vertical centering is as easy as that one little property slapped on your <td>. If you don’t wireframe with tables, your options are to get hacky with CSS or to add in a small table for the element and use the “vertical-align: middle” property. The latter method is widely recommended as it consistently and responsively works, unlike most of the CSS hacks used for vertical centering. If you have to resort to making a table as the most consistent way to vertically center something, why not just use tables right from the get-go?

While tables are a fantastic and robust wireframing tool, there is a downside that should be mentioned. Tables are like most other older coding practices in that they are certainly robust, but often come with a lot of ugly, repeating code. For tables, this is in the form of nested tables. Even a fairly simple layout will result in tables within tables within tables within…While this may seem very clunky to work with, it is surprisingly neat and easy to read as long as you follow basic best practices for developing. With a solid design wireframe to base your code on, plenty of comments to indicate where sections of your page begin and end, and proper code indentation, the craziness of nested tables becomes fairly easy to manage.

Along with tables, the only other major points with email development are:

Therefore, all you need to do to code emails is to learn the basics of html tables, keep your styling basic, and make all styling in-line. For a quick refresher on using tables, . If you need more info on developing emails in general,  offers a robust how-to guide for developing responsive emails. 

Overall, if you want to learn to code emails, a little practice with using tables to wireframe is pretty much all that you need. However, even if you don’t think you’ll ever code a single email, you should still consider learning to wireframe with tables. You may find that it is worth having lots of nested tables if it means that positioning elements is completely free from hacks and headaches.