If you've ever used tables to design the layout of an xMatters email notification, you may have become frustrated with the padding, lines, and background colors that are automatically applied to each cell. This article discusses how to remove the default formatting so you can use tables to create rows and columns in your email design.
This technique involves using CSS specificity rules to create new styles that rank higher than the default xMatters styles. You can use this technique not only to override default table styles, but also other default styles that are applied to your email notifications.
The following image shows an email that uses tables to create two rows, where the bottom row is split into three columns. When this table is styled with the default table styles, you can see that padding and borders are applied to each cell (which might not be something you want in your design):
Using CSS specificity rules to override the default styling, you can style the table in the above message without padding or borders so it looks like this instead:
Where are the table styles defined?
The table styles are defined in a Cascading Style Sheet (CSS) that is applied to all of the email messages in your company. These styles are also used by the email message designer's WYSIWYG editor to format content. The table lines make it possible to see and work with tables in the WYSIWYG editor.
The examples in this article show you how to override the default xMatters table styles, however, if your company uses a customized stylesheet you may need to adjust some of the values.
Overriding the styles using CSS specificity rules
To override the default table styles, we create new table styles that have a higher specificity than the default table styles and apply the new table styles to our messages. Email readers then use the new styles to format the tables.
CSS specificity rules state that when there are several different styles defined for a particular element, the most specific style is applied. One CSS rule could be "text is red", but a more specific CSS rule would be "text within a table cell is blue". In this case, text within table cells would be styled blue because that rule is more specific and wins out over the "text is red" rule.
Determining the specificity of a style can be kind of complicated, because some HTML components are weighted higher than others. Fortunately, there are plenty of resources on the internet that can help you understand CSS specificity, such this article. The thing that you need to remember is to create a new style that has higher specificity than the default style, and then apply the new style to your element.
Why you MUST use higher specificity to override styles
You may be tempted to overwrite table styles (table, th, td) directly without using higher specificity as described in this example. This may initially appear to work when you view the message in the email message editor and some email readers. However, it creates an ambiguous situation where the email contains conflicting styles of equal importance and forces the email reader to choose which one to use.
When presented with two styles of equal importance, most email readers choose the latest style (the one you added to your email message), but other email readers choose the first style (the one that is in the default stylesheet).
It's important to preview your emails in a variety of email readers before you send it out to ensure that your styling doesn't rely on the quirks of a particular email reader (don't forget to test your email on Microsoft Outlook on Windows.)
Example
For this example we're going to keep it simple and override the table styles by creating new table styles that have slightly higher specificity than the default table styles.
To do this, we'll wrap the email message content in a <div> tag that is styled with the "plainTable" class. We'll then create new styles that apply to tables that are also located within an element styled with the "plainTable" class. Email message readers will apply our table styles instead of the default styles because they are more specific.
We'll work directly with the email's underlying HTML to create and apply these styles.
Step 1: Open the email in source view
Navigate to the communication plan and form that contains your email message, and open the email message editor. Toggle the Show Source button to view the email's underlying HTML in source view.
Tip: If you're working with an existing email message, the HTML in the source view might not be that easy to read if it doesn't contain whitespace. In this case, copy it into an HTML editor such as the one at http://codepen.io, format it, and paste it back in to the editor.
Step 2: Add a table to the email message content
If you're not already in the source view of the email message designer, click Show Source. You can then paste the following table into the source view. (You may want to return to the WYSYIWYG view to see how this email looks with the default styles.)
<center>
<div>
<table class="" id="table-5">
<tbody>
<tr>
<td tabindex="0">
<img src="http://placehold.it/600x300">
</td>
</tr>
<tr>
<td tabindex="0">
<table class="" id="table-6">
<tbody>
<tr>
<td tabindex="0">
<table class="" id="table-7">
<tbody>
<tr>
<td tabindex="0">
<img src="http://placehold.it/200">
</td>
</tr>
</tbody>
</table>
</td>
<td tabindex="0">
<table class="" id="table-8">
<tbody>
<tr>
<td tabindex="0">
<img src="http://placehold.it/200">
</td>
</tr>
</tbody>
</table>
</td>
<td tabindex="0">
<table class="" id="table-9">
<tbody>
<tr>
<td tabindex="0">
<img src="http://placehold.it/200">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<br>
</div>
</center>
The WYSIWYG view of the email message designer shows what this table looks like when styled with the default table styles.
Step 3: Create a new table style
Next, we'll create a new style that formats tables without padding, background colors, or borders. For this example we'll create a style for tables that are also in the "plainTable" class.
Paste the following code to the top of the email message in source view, and then toggle the Show Source button to verify that these styles are not yet applied to the table.
<style>
.plainTable table
{
border-spacing: 0px;
}
.plainTable table th
{
table th
{
background: white;
font-weight: normal;
}
}
.plainTable table th,
.plainTable table td
{
border: none;
padding: 0px;
margin: 0px;
}
.plainTable table
{
border: 0px;
margin: 0 0 0 0;
border-radius: 0px;
border-bottom:none;
text-align: center;
font-size: inherit;
}
</style>
Step 4: Apply the style to the table
The styles are not yet applied to the table because the table is not styled with the "plainTable" class. The easiest way to apply the "plainTable" class to the table is to apply it to the entire email message body.
To apply this class to the entire email message body, wrap the HTML content in the tag <div class="plainTable"></div>.
Step 5: Preview the message
You can now toggle the Show Source button to see that the new styles apply to the table.
Step 6: Test the message
Before you put your message into production, send a test notification and view it in a variety of email readers on various platforms, focusing on the ones that people in your company use the most. In particular, be sure to test your email on Microsoft Outlook for Windows and web clients such as the Gmail web client.
Be aware that advanced CSS features may not be supported by all email readers. For a overview of which features are supported on different browsers, see this article.
Download this example
If you'd rather just see the differences in action, or want to work directly with this example, you can download the communication plan attached to this article and import it into your xMatters instance.
Comments
0 commentsPlease sign in to leave a comment.