HTML To Email-Compatible Table

DEMO: https://w99910.github.io/html-to-table/

It's zero dependency and light-weight.

I have been trying to send emails using html layout but there are lots of html elements and styles that email clients don't support.

So I am working on this library to convert almost html layout to email-compatible table layout.

Note: I don't guarantee that this library can convert any html element to your desired layout all the time. Feel free to tune the result as you want.

Installation

Choose one of the following methods.

• NPM

npm i html-to-table

• Github ESM Module

import HTML2Table from 'https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.js'

• Github CJS

const HTML2Table = require('https://github.com/w99910/html-to-table/blob/master/dist/html-to-table.cjs')

Usage

It is pretty straight-forward to use.

• Initialise the class

let html2table = new HTML2Table();

• (Optional) - You can filter the elements you don't want to include in the output using Regex Expression This checks the class name and id.

html2table.excludeElementByPattern('toolbar')

• Convert the element you want by calling convert and passing the element as parameter.

html2table.convert(document.querySelector('your-element-to-convert'));

Tips

• I suggest you target mobile device layout first so that the layout will work both on mobile and desktop.
• Base64 image data does not work. So host the image on cloud and use it.
• Don't use linear-gradient css function in inline css. Instead, create the gradient as an image and load it using url.

  style="background: url('link-to-your-image')"

• Use background-color as a fall-back background color if image would not be working in some email clients.
• Skip using height property if possible since it can prevent uninteneded padding or margin.

To-DO

• Converting rem doesn't render exactly as it is.
• even if only border-top is provided, all border is being rendered.
• Change the logic for v-align as it is giving unnecessary vertical space.

LICENSE

MIT License

Articles

• Medium Article
• Dev.to

CHANGELOG

• 0.1.4
  • Drop setting height css property for the parent.
  • Remove v-align in the output. Please tweak the output as you want.
  • Height property is converted to auto for child nodes unless you unexplictly set it as inlined css.
  • Append the bounding rect width as the width style when tranversing the child nodes.
  • Consider the styles of the embedding classes before get the window's computed styles.
• 0.1.2
  • Add bgcolor attribute for fall-back background css style.
  • align and valign of table now consider the css properties of parent element. if there is no parent element, default value will be used.
  • Deprecated feature that convert SVG to Base64 PNG.
• 0.1.1
  • Add alt and title to allowed attribute when it is cloned.
  • Fix width being 0 in some cases.
• 0.1.0 - Rewrite the logic by using bounding client rect to determine the layout