You can add a clean vertical divider to your email signature design without using images by applying a background-color to a table cell.
This approach ensures better compatibility across email clients and keeps your design lightweight and consistent.
Example
Below is an example of a 2px orange vertical line that automatically adjusts to the height of your content:
How it works
The vertical line is created by adding a narrow table cell with a fixed width and a background color. Because it is part of the table structure, it automatically scales with the height of the surrounding content.
HTML Example
Use the following structure in your signature template:
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td style="width: 378px;">Text<br />
Text<br />
Text</td>
<td style="width: 10px;"> </td>
<td style="width: 2px; background-color: rgb(247, 121, 16);"> </td>
<td style="width: 10px;"> </td>
<td style="width: 100px;">Logo</td>
</tr>
</tbody>
</table>Best Practice
- Use table-based layouts for maximum email client compatibility
- Keep the divider width small (e.g., 1–2px)
- Add spacing columns ( ) on each side for better visual balance
- Avoid using images for simple design elements like lines
