• The Ultimate Guide to CSS

Displaying data in email templates is relatively straight forward by using <table> elements. To take it a step further, you can add some hover states and interactive effects.

One method to display interactive data tables in email templates uses CSS adjacent sibling combinators (+). This method works in Gmail webmail and Yahoo! Mail clients.

<style type="text/css">
  .row1:hover,
  .row1:hover + td,
  .row1:hover + td + td,
  .row1:hover + td + td + td {
    background-color: #fb7d7a !important;
  }
</style>

<table>
  <tr>
    <td class="row1">Row #1</td>
    <td>Monday, Feb 1</td>
    <td>Tuesday, Feb 2</td>
    <td>Monday, Feb 8</td>
  </tr>
</table>

To create this interactive effect in Outlook.com, add a class to the <tr> and target the individual <td> cell through that class. Using class:hover or id:hover does not work with this effect in Outlook.com.

.outlookRow1 td:hover {
  background-color: #fb7d7a !important;
}

<table>
  <tr class="outlookRow1">
    <td>Row #1</td>
    <td>Monday, Feb 1</td>
    <td>Tuesday, Feb 2</td>
    <td>Monday, Feb 8</td>
  </tr>
</table>

In order to create this interactive effect in devices using iOS Mail, add an empty anchor tag in each <td> cell. This will allow iOS users to "click" individual <td> cells and trigger the hover state effect.

<table>
  <tr>
    <td><a href="#">Row #1</a></td>
    <td><a href="#">Monday, Feb 1</a></td>
    <td><a href="#">Tuesday, Feb 2</a></td>
    <td><a href="#">Monday, Feb 8</a></td>
  </tr>
</table>