Bullet lists in HTML Emails
The safest way to use ordered and unordered lists in HTML Email is to use a table with two columns.
Avoid using < ul > and < ol > tags since they do not render consistently across platforms.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>•</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 1</td>
</tr>
<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>•</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 2</td>
</tr>
<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>•</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 3</td>
</tr>
<tr>
<td style="padding-bottom:5px; line-height:20px;" valign="top"
width="15"><strong>•</strong>
</td>
<td align="left" style="padding-bottom:5px; line-height:20px;">
Lorem Ipsum 4</td>
</tr>
</table>
Final result:
• | Lorem Ipsum 1 |
• | Lorem Ipsum 2 |
• | Lorem Ipsum 3 |
• | Lorem Ipsum 4 |
Leave a Reply
Want to join the discussion?Feel free to contribute!