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>