7.9 HTML Tables: What You Can Learn from My Email Disaster.
Communicating with students about library resources and tutoring services has been a challenge for our department at the community college I work with. After surveying to see how they like to get their information we determined we needed to shift our focus to email marketing campaigns. Great, all I need to do is draft some graphics with the content and stick the image into the body of the email, right?
My first lesson: Emails are built with HTML! Maybe this is something you already know but I didn’t. My knowledge of HTML was its purpose as a language used to code websites. Sure, I get tons of marketing emails a day, but I never stopped to think about how those emails were created.
My Challenge: Create an email for students with graphics and content to share our student resources.
Lucky for me I have a pretty great boss who has been patient with my learning curve since we started this endeavor. She built the first email which I could use as a template since my HTML knowledge had only gone as far as small edits to our webpage which only required knowing header and paragraph tags. What could be so hard about an email? I am a quick learner and determined to get it right, so I jumped in. I was already familiar with Adobe Illustrator which made it easy to navigate the Dreamweaver coding software. I was glad to see that I could see the live code as I read the HTML. I opened the template to build our next email, confidently embedding my updated graphics into the lines replacing the old ones. Success! Things were going great until It was time to redesign. My overconfidence bias with recent image embedding success was quickly brought back down to earth.
The nightmare named <Table>
After watching Jen Kramers’ Linkedin Learning course on HTML: Tables I did some research on what I could write to share about web-based data tables, after a few pages I came across the HTML Email Design Reference from Mailchimp.com. In my effort with building that email, I familiarized myself with the tags and the <table> tag was turning into my worst nightmare. It seemed like there was table after table, and my mind was spinning into table inception. Where did one end and another begin? I added a table, I took one out which made the whole thing just go into an ugly and scattered mess. Why was nothing working?!
The expeption to the <table> “rule”
It turns out the basic format of an HTML table starts with the <table> tag inside the <body> which Mailchimp says, “unlike modern web design the <table> element isn’t used just for tabular data, it’s all there is for consistent structure.” They also explain that nesting tables inside tables gives you “finer control” over the email and should be at least two tables deep. That explained my table inception nightmare. Jen Kramer explains that tables were initially used to frame out webpages until 1996 when David Siegel, author of “Creating Killer Websites” suggested avoiding using tables for layout design because it didn’t fit in with the semantics of HTML, meaning the name didn’t fit the function.
On a webpage a table is used to present data, however, emails don’t fall under this accepted practice. Jason Rodriguez’s post on Litmus.com explains why in his article HTML Tables in Emails: What could possibly go wrong? saying, “email applications don’t adhere to the same standards as web browsers. Each email application has its own rendering engine which determines what code is supported and how emails are displayed.” His post enlightened me to a few more mistakes I could have avoided, starting with the nesting mishap. He says it’s best to keep it simple and only use 4 to 6 tables.
It wasn’t until weeks later that I began to see where the major issue with my email coding was: the missing tag. Rodriguez offered the reminder that HTML requires an opening and closing tag around each piece of content. This can get pretty confusing when there are tables inside of tables. Not to mention the <tr> or table row which denotes a row in the table and <td> table data tags which denotes data inside of the row. One last thing he mentions is including table attributes “override the default behavior of browsers and email applications to ensure tables display properly.” You’ll want to remember to add cell spacing, cell padding, width, align attributes, and set them to “0” there isn’t extra space around table cells.
The Takeaway
To review, emails are still working in the time of 1995 where to <table> was king of the layout. You can avoid mishaps by minimizing the number of tables nested within each other, creating the overall layout with all opening and closing tags before you add the content. With a little planning and practice, you can avoid the same email disaster.
This chapter is a revised version of a blog post titled, “HTML Table: What you can learn from my email disaster,” on Mau Does Web Publishing.
