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

# Tables

> Standard Markdown tables and the extended table directive with 20+ styling attributes, captions, anchors, invisible borders, and images in cells.

## Standard Markdown tables

```markdown theme={null}
| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |
```

The separator row (`|---|---|`) marks the first row as a header. Without a separator, all rows are treated as data rows.

### Tables with inline formatting

Table cells support all inline formatting:

```markdown theme={null}
| Name | Description | Status |
|------|-------------|--------|
| **Project A** | Main project | *Active* |
| **Project B** | Secondary | ~~Cancelled~~ |
| **Project C** | See @[smith2023] | `pending` |
```

### Images in table cells

Embed images directly in table cells:

```markdown theme={null}
| Name | Logo |
|------|------|
| Company A | ![alt](logo-a.png){width=100 height=50} |
| Company B | ![alt](logo-b.png){width=100 height=50} |
```

Image attributes `width` and `height` are supported inside table cells.

***

## Table directive

For full styling control, wrap your table in a `:::table{attrs}` directive:

```markdown theme={null}
:::table{caption="Sales Data" headerBg="#f0f0f0" rowAltBg="#fafafa"}
| Product | Q1 | Q2 |
|---------|----|----|
| Widget  | 100| 150|
| Gadget  | 200| 250|
:::
```

### Invisible tables (layout tables)

Remove all borders and backgrounds to use tables for layout purposes:

```markdown theme={null}
:::table{invisible=true cellPadding=12}
| Logo | Company |
|------|---------|
| ![logo](a.png){width=50} | Company A |
:::
```

### Hidden headers

Hide the header row while keeping it for structure:

```markdown theme={null}
:::table{hideHeaders=true}
| Col 1 | Col 2 |
|-------|-------|
| Data  | Data  |
:::
```

### Table captions

Add a caption for automatic numbering in the List of Tables:

```markdown theme={null}
:::table{caption="Revenue by Quarter"}
| Quarter | Revenue |
|---------|---------|
| Q1 | €150,000 |
| Q2 | €180,000 |
:::
```

This renders as: *Table 1: Revenue by Quarter*

The caption prefix (e.g., `"Table"`, `"Tabelle"`) and styling (font, alignment, color) are configured in your document's [style settings](/getting-started/editor/sidebar-styles#table-captions).

### Anchors for cross-references

Add an `anchor` attribute to reference the table from elsewhere:

```markdown theme={null}
:::table{caption="Fee Schedule" anchor="tab-fees"}
| Service | Monthly | Annual |
|---------|---------|--------|
| Basic   | €10     | €100   |
| Pro     | €25     | €250   |
:::
```

Then reference it:

```markdown theme={null}
See [Table {num}](#tab-fees) for the full pricing breakdown.
```

<Tip>
  See [References & Anchors](/markup-reference/references) for all cross-reference options.
</Tip>

***

## Attribute reference

### General attributes

| Attribute     | Values          | Description                                 |
| ------------- | --------------- | ------------------------------------------- |
| `caption`     | String          | Table caption text (enables auto-numbering) |
| `anchor`      | String          | Anchor ID for cross-references              |
| `invisible`   | `true`, `false` | Hide all borders and backgrounds            |
| `hideHeaders` | `true`, `false` | Hide the header row                         |
| `cellPadding` | Number (pt)     | Uniform cell padding                        |

### Header styles

| Attribute          | Values                    | Description             |
| ------------------ | ------------------------- | ----------------------- |
| `headerBg`         | CSS color                 | Header background color |
| `headerColor`      | CSS color                 | Header text color       |
| `headerFontSize`   | Number (pt)               | Header font size        |
| `headerFontWeight` | `normal`, `bold`          | Header font weight      |
| `headerFontStyle`  | `normal`, `italic`        | Header font style       |
| `headerAlign`      | `left`, `center`, `right` | Header text alignment   |

### Row styles

| Attribute       | Values                    | Description                |
| --------------- | ------------------------- | -------------------------- |
| `rowBg`         | CSS color                 | Row background color       |
| `rowAltBg`      | CSS color                 | Alternating row background |
| `rowColor`      | CSS color                 | Row text color             |
| `rowFontSize`   | Number (pt)               | Row font size              |
| `rowFontWeight` | `normal`, `bold`          | Row font weight            |
| `rowFontStyle`  | `normal`, `italic`        | Row font style             |
| `rowAlign`      | `left`, `center`, `right` | Row text alignment         |

### Border styles

| Attribute     | Values                      | Description  |
| ------------- | --------------------------- | ------------ |
| `borderWidth` | Number (pt)                 | Border width |
| `borderColor` | CSS color                   | Border color |
| `borderStyle` | `solid`, `dashed`, `dotted` | Border style |

***

## Full example

```markdown theme={null}
:::table{caption="Team Overview" headerBg="#1e293b" headerColor="#ffffff" headerAlign=center rowAltBg="#f8fafc" borderWidth=1 borderColor="#e2e8f0" cellPadding=8}
| Name | Role | Status |
|------|------|--------|
| Alice | Engineering Lead | Active |
| Bob | Designer | Active |
| Carol | Product Manager | On Leave |
:::
```