# Rows & Columns

> Multi-column layouts that render as tables — the only layout email clients reliably support.

**Site index:** [https://email.2plot.dev/llms.txt](https://email.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://email.2plot.dev/sitemap.xml  


---



### Table-based layout

Flexbox and CSS grid don't survive most email clients. `EmailRow` and
`EmailColumn` render as an HTML `<table>` / `<td>` pair so multi-column
layouts hold together everywhere — set column widths with percentage styles.


Source code:


```python
# File: docs/rows-columns/rows_columns.py

import dash_email as de

CELL = {"padding": "12px", "verticalAlign": "top"}

component = de.Email([
    de.EmailBody(
        style={"backgroundColor": "#f6f9fc", "padding": "32px 0"},
        children=[
            de.EmailContainer([
                de.EmailSection(
                    style={
                        "backgroundColor": "#ffffff",
                        "borderRadius": "8px",
                        "padding": "24px",
                    },
                    children=[
                        de.EmailHeading("Two columns", as_="h3"),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "50%", **CELL},
                                children=[
                                    de.EmailText(
                                        "Left column — rows and columns render "
                                        "as real HTML tables, the only layout "
                                        "primitive every email client supports."
                                    )
                                ],
                            ),
                            de.EmailColumn(
                                style={"width": "50%", **CELL},
                                children=[
                                    de.EmailText(
                                        "Right column — set widths with "
                                        "percentage styles on each column."
                                    )
                                ],
                            ),
                        ]),
                        de.EmailDivider(style={"margin": "16px 0"}),
                        de.EmailHeading("70 / 30 split", as_="h3"),
                        de.EmailRow([
                            de.EmailColumn(
                                style={"width": "70%", **CELL},
                                children=[de.EmailText("Product name")],
                            ),
                            de.EmailColumn(
                                style={"width": "30%", "textAlign": "right", **CELL},
                                children=[de.EmailText("$99.00")],
                            ),
                        ]),
                    ],
                )
            ])
        ],
    )
])
```


---

### EmailRow


**EmailRow**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The children of this component (typically EmailColumn components). |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

### EmailColumn


**EmailColumn**

| Name | Type | Description |
| --- | --- | --- |
| children | a list of or a singular dash component, string or number; optional | The children of this component. |
| id | string; optional | The ID used to identify this component in Dash callbacks. |


---

*Source: /components/rows-columns*