# email/transformations/transformemailfiguretotable

module

<a id="constants">

## Constants

<a id="constant-transformEmailFigureToTable">

### `transformEmailFigureToTable: ExportInlineStylesTransformation`

Transforms a `<figure>` element into an email-compatible structure by replacing it with a table-based layout. The exact output depends on the figure's styles and children:

**Float — single inner `<table>`** (figure is just a float wrapper): The inner table is promoted in place; figure styles are merged into it and `float` is converted to an `align` attribute.

```
<figure style="float: left;"><table>…</table></figure>
→
<table align="left" style="…">…</table>
```

**Float — mixed content** (figure wraps multiple children alongside float): All children are moved into a single-cell presentation table that carries the float as an `align` attribute.

```
<figure style="float: right;"><img><figcaption>…</figcaption></figure>
→
<table align="right" style="…"><tbody><tr><td><img><figcaption>…</figcaption></td></tr></tbody></table>
```

**Margin-based alignment — single inner `<table>`** (figure is a `display:table` alignment wrapper): The inner table is promoted in place; figure styles (minus `display`, layout props) are merged into it. Alignment and width are already encoded in the surrounding fallback tables added by `wrapWithFallbackTables`.

```
<figure style="display: table; margin: auto; width: 600px;"><table>…</table></figure>
→
<table width="100%"><tbody><tr><td align="center">
  <table width="600"><tbody><tr><td>
    <table style="…">…</table>
  </td></tr></tbody></table>
</td></tr></tbody></table>
```

**Margin-based alignment — mixed content** (figure wraps an image, caption, etc.): The figure is replaced with a `<div>` that inherits its attributes, and the whole thing is wrapped in one or two fallback tables for alignment and width.

```
<figure style="margin: auto; width: 600px;"><img><figcaption>…</figcaption></figure>
→
<table width="100%"><tbody><tr><td align="center">
  <table width="600"><tbody><tr><td>
    <div style="…"><img><figcaption>…</figcaption></div>
  </td></tr></tbody></table>
</td></tr></tbody></table>
```

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)
