# mjml-table

> mjml-atable

Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-table
pnpm add mjml-table
yarn add mjml-table
bun add mjml-table
```

## Health

**Score 60/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 5.4.1 |
| Published | 2026-09-10 |
| First published | 2016-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18235 |
| Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap |

## Links

- npm: https://www.npmjs.com/package/mjml-table
- Repository: https://github.com/mjmlio/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/mjmlio/mjml/issues
- npm.io page: https://npm.io/package/mjml-table

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4

## Recent versions

- 5.4.1 (latest) — 2026-09-10
- 5.2.0-beta.1 (beta) — 2026-05-06
- 5.0.0-alpha.11 (experimental) — 2026-02-10
- 4.7.0-beta.2 (next) — 2020-08-28
- 5.4.0 — 2026-06-29
- 5.3.0 — 2026-05-27
- 5.2.2 — 2026-05-19
- 5.2.1 — 2026-05-12
- 5.2.0 — 2026-05-07
- 5.1.0 — 2026-04-24
- 5.1.0-beta.1 — 2026-04-24
- 5.0.1 — 2026-04-16
- 5.1.0-alpha.1 — 2026-04-16
- 5.0.0 — 2026-04-16
- 5.0.0-beta.2 — 2026-03-19
- … 134 more at https://npm.io/package/mjml-table/versions

## README

### mj-table

Display a data table. It only accepts plain HTML.

```xml
<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>
```

<div class="alert alert-note" role="alert">
  <p>Note</p>
  <p><code>mj-table</code> is an "ending tag", which means that it can contain HTML code but it cannot contain other MJML components. Therefore, it will accept any tag you would add inside an HTML table tag.</p>
  <p>More information about ending tags <a href="#ending-tags">in this section</a>.</p>
</div>

#### Attributes

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

<p class="cta-container"><a class="cta" href="https://mjml.io/try-it-live/components/table">Try it live</a></p>

---
_Source: https://npm.io/package/mjml-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._