HTML Pro: How to a add a dynamic vertical line without an image

Modified on February 9, 2021 by Jesper Frier.

You can easily add a vertical line to your design without the use of an image by using background-colour.

Below you find an example with an orange 2px vertical line which automatically adjust to your table design:

Below you find the HTML source:

<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;">&nbsp;</td>
      <td style="width: 2px; background-color: rgb(247, 121, 16);">&nbsp;</td>
      <td style="width: 10px;">&nbsp;</td>
      <td style="width: 100px;">Logo</td>
    </tr>
  </tbody>
</table>