More Tips on HTML Tables, Creating Nested Tables

Mike D'AgrumaMost email clients lack support for recent HTML and CSS technologies, which is why tables are the best way to build entire HTML emails. Tables may seem dated, but they’re bulletproof. Every Web browser and email client can read them.
In a previous post introducing HTML tables, I looked at their most basic construction. This time, I’ll go over an example of a slightly more complicated table that makes use of a number of HTML elements:


What it will look like in an email and on the web:

Last time, I discussed the importance of working from the outside in when coding more complicated HTML tables. In the above example, I incorporated a nested table – a table built inside another table – to illustrate this point. During this build, I made sure to build the skeleton of the outside table first:

The second step was to build out everything that should go inside this outer table:

Next, I built the table that holds the bulleted list, being sure to follow the first step of constructing the skeleton before populating it with content:

The primary reason for this style of building is to increase code base organization and reduce the amount of time spent troubleshooting. Remember, all open tags must be closed at some point in the code base. It only takes one missed tag to break an entire table. Keep in mind that a complicated build may have multiple nested tables constructed over enough lines of code that it becomes borderline impossible to keep track of which tags need to be closed when. Working outside in is a simple way to make sure that doesn’t happen.

What?! No lists?!

There is a reason why the bulleted list is built into its own table: Ordered and unordered lists will not render in most email clients. That means designers can’t rely on the easy-to-use ol, ul and li tags. Each text bullet point needs its own data cell and each corresponding text item needs its own data cell.

A forced non-reliance on usually standard HTML and CSS elements is the main challenge designers face when building emails. It’s why table design needs to be covered in the first place.

On Wednesday, I’ll take a look at a list of commonly used HTML elements at the table and cell level. Stay tuned!

2 Trackbacks/Pingbacks

  1. […] The Lunch Pail « More Tips on HTML Tables, Creating Nested Tables […]

  2. […] with HTML in emails. Check out the full collection of tips below: An Introduction to HTML Tables Creating Nested Tables How to Control the Elements of an HTML Table More on HTML […]

%d bloggers like this: