• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

How to build a modern good looking table for email reports

20 May 2022 / Alec Kinnear / 2 Comments

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.

Name Points Years Exp.
Dom 6000 3
Melissa 5150 1.5
Martin 9800 14

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 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.

Categories: IT Tags: css, email, html, reports

Related Posts

  1. Hosting signup

    Hosting signup

  2. Shared.css Framework

    Shared.css Framework

Reader Interactions

Comments

  1. Oscar 25 August 2024 at 6:05 pm

    Thank you Alec for the code and explanation. I got around the nth-of-type error by assigning a variable based on the index of the foreach, like so (this is php code for laravel templates (blade):

                @foreach ($stockData as $productStockData)
                    @php
                        $rowBgColor = $loop->even === true ? '#faecd9' : 'transparent';
                    @endphp

    Then on every I use the variable with the bgColor:

                    <tr class="active-row" style="background-color:{{ $rowBgColor }};">
                  @endforeach
    Reply
    • Avatar photoAlec Kinnear 30 August 2024 at 2:11 am

      Thanks for the tip, Oscar. I’m glad my tables for email guide was useful to you! I should send some tables in my next email newsletter.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

Primary Sidebar

Categories

  • Business
  • Camera Reviews
  • Case Studies
  • Design
  • FV Player
  • Internet Marketing
  • IT
  • Life
  • SEO
  • Slovak
  • Video of the Week
  • WordPress

Footer

Our Plugins

  • FV WordPress Flowplayer
  • FV Thoughtful Comments
  • FV Simpler SEO
  • FV Antispam
  • FV Gravatar Cache
  • FV Testimonials

Free Tools

  • Pandoc Online
  • Article spinner
  • WordPress Password Finder
  • Delete LinkedIn Account
  • Responsive Design Calculator
Foliovision logo
All materials © 2025 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in .

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!