Tables - Autype

Standard Markdown tables

| 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:

| 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:

| 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.

Form fields in table cells

A table cell can contain one form field instead of text or an image:

:::table{columnWidths="1fr,2fr"}
| Label | Value |
| --- | --- |
| Customer | ::field{name="customer" type=text} |
| Department | ::field{name="department" type=select options="Sales,Legal"} |
| Approval | ::field{name="approval" type=checkbox options="Approved"} |
:::

Use commas between select or checkbox options inside a table cell because the pipe character is the table column delimiter. See Form Fields for all field types and properties.

Table directive

For full styling control, captions, anchors, and column widths, wrap your table in a :::table{attrs} directive:

:::table{caption="Sales Data" columnWidths="4,1fr,1fr" headerBg="#f0f0f0" rowAltBg="#fafafa"}
| Product | Q1 | Q2 |
|---------|----|----|
| Widget  | 100| 150|
| Gadget  | 200| 250|
:::

Column widths

Use columnWidths to control table layout:

:::table{columnWidths="4,1fr,1fr"}
| Item | Description | Price |
|------|-------------|-------|
| A-100 | Long flexible description | €49 |
| B-200 | Another description | €79 |
:::

Widths are comma-separated and map from left to right:

Width value	Meaning
`4`	Fixed width in centimeters.
`30%`	Percentage of the available table width.
`1fr`, `2fr`	Flexible share of the remaining width.
`auto`	Automatic/flexible column.

Mixed layouts are supported. For example, columnWidths="4,1fr,2fr" keeps the first column fixed at 4cm; the remaining space is then split into one share for the second column and two shares for the third column.

If fewer widths than columns are provided, the remaining columns use auto. More widths than columns are rejected during validation.

Invisible tables (layout tables)

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

:::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:

:::table{hideHeaders=true}
| Col 1 | Col 2 |
|-------|-------|
| Data  | Data  |
:::

Table captions

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

:::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.

Anchors for cross-references

Add an anchor attribute to reference the table from elsewhere:

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

Then reference it:

See [Table {num}](#tab-fees) for the full pricing breakdown.

See References & Anchors for all cross-reference options.

Attribute reference

General attributes

Attribute	Values	Description
`caption`	String	Table caption text (enables auto-numbering)
`anchor`	String	Anchor ID for cross-references
`align`	`left`, `center`, `right`	Horizontal alignment of the complete table
`invisible`	`true`, `false`	Hide all borders and backgrounds
`hideHeaders`	`true`, `false`	Hide the header row
`columnWidths`	Comma-separated widths	Fixed cm (`4`), percent (`30%`), flexible (`1fr`), or `auto`
`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

:::table{caption="Team Overview" columnWidths="3,2fr,1fr" 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 |
:::

​Standard Markdown tables

​Tables with inline formatting

​Images in table cells

​Form fields in table cells

​Table directive

​Column widths

​Invisible tables (layout tables)

​Hidden headers

​Table captions

​Anchors for cross-references

​Attribute reference

​General attributes

​Header styles

​Row styles

​Border styles

​Full example

Standard Markdown tables

Tables with inline formatting

Images in table cells

Form fields in table cells

Table directive

Column widths

Invisible tables (layout tables)

Hidden headers

Table captions

Anchors for cross-references

Attribute reference

General attributes

Header styles

Row styles

Border styles

Full example