> ## Documentation Index
> Fetch the complete documentation index at: https://www.lettercamp.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Table component

> Write simple Markdown tables or rich Lettercamp tables with column widths, row heights, merged cells, text alignment, and individual cell colors.

Use `Table` to control a table's layout while keeping its contents editable in the visual editor. Wrap a Markdown table for simple content, or use `TableRow` and `TableCell` when you need merged cells or individual styling.

```mdx theme={null}
<Table width="wide" columnWidths={[40, 60]}>

| Feature | Description |
| --- | --- |
| Visual editor | Edit your article with block controls. |
| Source editor | Write Markdown and components directly. |

</Table>
```

## Table properties

| Property | Type | Default | Description |
| - | - | - | - |
| `width` | `"regular"`, `"wide"`, or `"full"` | `"regular"` | Layout width. |
| `columnWidths` | Array of positive numbers | Equal columns | Relative column widths. Supply one value per column. `[40, 60]` produces 40% and 60%; `[1, 2]` produces one-third and two-thirds. |
| `rowHeight` | Positive number | Automatic | Default row height in pixels. A row's own `height` takes precedence. |
| Children | Markdown table or `TableRow` elements | Required | Use one content format per table. |

## Rich tables

```mdx theme={null}
<Table width="wide" columnWidths={[35, 65]}>
  <TableRow>
    <TableCell header>Stage</TableCell>
    <TableCell header>Next action</TableCell>
  </TableRow>
  <TableRow height={56}>
    <TableCell rowSpan={2} background="#fafafa">Draft</TableCell>
    <TableCell>Review the **main argument**.</TableCell>
  </TableRow>
  <TableRow height={56}>
    <TableCell>Check links and image descriptions.</TableCell>
  </TableRow>
</Table>
```

### TableRow

| Property | Type | Default | Description |
| - | - | - | - |
| `height` | Positive number | Table's `rowHeight`, otherwise automatic | Row height in pixels. |
| Children | `TableCell` elements | Required | Cells in left-to-right order. |

### TableCell

| Property | Type | Default | Description |
| - | - | - | - |
| `header` | Boolean | `false` | Renders a header cell. |
| `colSpan` | Positive integer | `1` | Number of columns occupied by the cell. |
| `rowSpan` | Positive integer | `1` | Number of rows occupied by the cell. |
| `align` | `"left"`, `"center"`, or `"right"` | Left | Horizontal text alignment. |
| `color` | CSS color string | Inherited | Text color, such as `"#123456"`. |
| `background` | CSS color string | None | Cell background, such as `"#fafafa"`. |
| Children | Inline Markdown | Empty | Text, bold, italic, inline code, and links. |

Use `TableRow` only inside `Table`, and `TableCell` only inside `TableRow`. Omit cells covered by a preceding cell's `rowSpan` or `colSpan`. The first row of a Markdown table becomes header cells automatically; rich tables use the explicit `header` property.

## Use the visual editor

The table retains its existing cell editor, row and column menus, column resizing, merge and split actions, alignment, and colors. The source writer uses `TableRow` and `TableCell` so these settings survive saving and reloading. Ordinary Markdown tables and supported legacy table HTML remain readable.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.