mjml-table

mjml-atable

Usage no npm install needed!

<script type="module">
  import mjmlTable from 'https://cdn.skypack.dev/mjml-table';
</script>

README

mj-table

This tag allows you to display table and filled it with data. It only accepts plain HTML.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-table>
          <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
            <th style="padding: 0 15px 0 0;">Year</th>
            <th style="padding: 0 15px;">Language</th>
            <th style="padding: 0 0 0 15px;">Inspired from</th>
          </tr>
          <tr>
            <td style="padding: 0 15px 0 0;">1995</td>
            <td style="padding: 0 15px;">PHP</td>
            <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
          </tr>
          <tr>
            <td style="padding: 0 15px 0 0;">1995</td>
            <td style="padding: 0 15px;">JavaScript</td>
            <td style="padding: 0 0 0 15px;">Scheme, Self</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

try it live

attribute unit description default value
align left/right/center self horizontal alignment left
border border table external border none
cellpadding pixels space between cells n/a
cellspacing pixels space between cell and border n/a
color color text header & footer color #000000
container-background-color color inner element background color n/a
css-class string class name, added to the root HTML element created n/a
font-family string font name Ubuntu, Helvetica, Arial, sans-serif
font-size px font size 13px
line-height percent/px space between lines 22px
padding percent/px supports up to 4 parameters 10px 25px
padding-bottom percent/px bottom offset n/a
padding-left percent/px left offset n/a
padding-right percent/px right offset n/a
padding-top percent/px top offset n/a
role none/presentation specify the role attribute n/a
table-layout auto/fixed/initial/inherit sets the table layout. auto
width percent/px table width 100%