How to build a modern good looking table for email reports

We are trying to improve the look of some of our cron-generated email reports. I thought I’d just steal the table code from some of the great looking reports I receive from StatCounter, SerpStat, SERanking or Swiftype. Alas none of them looked very good and the ones that looked okay did not look simple. I did some digging and finally found a decent starting point at dov.to.

Here’s what it should look like, a simple attractive table, well-suited to be sent in an email report.

Just in case the code above should break, here’s an image.

Dom’s example is not pre-built which means quite a bit of copy-pasting. Here’s the clean code for my version:

<style>
/*Most of these are self explanatory but let's have a look at the main ones:
box-shadow to add a subtle transparent shadow around the table
border-collapse to ensure there is no space between the cell borders
 */
.styled-table {
    border-collapse: collapse;
    margin: 25px 50px;
    font-size: 0.9em;
    font-family: courier;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* 
Styling the header:
For the header, we can simply change the background color and apply some basic styles to the text:*/

.styled-table thead tr {
    background-color: darkred;
    color: #ffffff;
    text-align: left;
}
/*Moving onto the table cells. Let's space things out a bit: */
.styled-table th,
.styled-table td {
    padding: 12px 15px;
}
/* And the table rows...
For these, we want to do 3 things:

Add a bottom border to each row for separation
Add a lighter background to every second row to help readability
Add a dark border to the very last row to signify the end of the table */
.styled-table tbody tr {border-bottom: 1px solid #dddddd;}
.styled-table tbody tr:nth-of-type(even) {background-color: #f3f3f3;}
/* I don't think the dark border looks great with the drop shadow 
.styled-table tbody tr:last-of-type {border-bottom: 2px solid darkred;} */

/* Lastly, let's make the active row look different
For this, we're just going to make changes to the text: 
No use for this in email! commented out
.styled-table tbody tr.active-row {font-weight: bold; color: #009879;}*/
/* Failed attempt at right alignment for third column cell 
.styled-table .exper {align: right}*/
/* Some modern alignment code */
.styled-table tr td:nth-child(1), .styled-table tr th:nth-child(2) {text-align: left;}
.styled-table tr td:nth-child(2), .styled-table tr th:nth-child(2) {text-align: right;}
.styled-table tr td:nth-child(3), .styled-table tr th:nth-child(3) {text-align: center;}

</style>

<p>Here is a simple attractive table, well-suited to be sent in an email report.</p>

<table class="styled-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Points</th>
            <th>Years Exp.</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dom</td>
            <td>6000</td>
            <td class="exper">3</td>

        </tr>
        <tr class="active-row">
            <td>Melissa</td>
            <td>5150</td>
            <td class="exper">1.5</td>
        </tr>
                <tr class="active-row">
            <td>Martin</td>
            <td>9800</td>
            <td class="exper">14</td>
        </tr>
        <!-- and so on... -->
    </tbody>
</table>

The results are good. The real trick is with the nth alignment styles which make it very easy to build well-aligned columns. Keeping the code simple is key to make it easy to modify and reuse as a template. Here’s a CodePen version to play with.

Keep in mind that this table code for reports is not mean to be particularly mobile friendly. I don’t see a good reason for a publisher to try to work through a detailed audit report on a mobile phone, even if it’s an iPhone Extra Pro Maximus Emperor Tsar phone. If anyone has a quick tip to make report tables more mobile friendly (but still easily styled and copyable tables and not weird unreliable floats), let me know.

Additional notes 20220525

We ran into a few limitations with the table above in Gmail. The first one seems obvious to CSS designers but less so to programmers. Make sure to wrap your email with an HTML tag and wrap your style tag with a head tag! Here’s what Gmail offers as a good example email:

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>This text is blue.</p>
      <p>Jerry</p>
    </div>
  </body>
</html>

Next, some of the properties and selectors are not supported, not in Gmail, Outlook.com (just web version, not the actual email client) or Yahoo.com (technology from the dark ages, who cares).

• box-shadow is not supported
• worse, nth-of-type is not supported

There are workarounds for nth-of-type. They are fairly awful.

<style type="text/css">
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr, 
    tr + tr + tr, 
    tr 
    {background-color:red}
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr,
    tr + tr
    {background-color:transparent}
</style>

In the face of this kind of spaghetti code I hope Gmail adds support for nth-of-type. Here’s a list of what CSS properties and selectors Gmail supports.

We’re using the styling for reports, and the emails look great in Mailmate and other dedicated email clients so we will continue to use the code in the first part of the article.

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.