Multiline tables
Tables with support inside cells for more than just simple content. Example, lists, code snippets and other tables.
Syntax
- a table starts with
#|and ends with|#; - lines start and end with
||; - the cells are separated by a symbol
|.
Headers of table
Multiline tables do not contain headers, but they can be done by applying formatting to the content of the cells of the first row. For example, highlighting them in bold.
You can also use the header-rows table attribute for semantic header rows. See the Header rows section for details.
#|
|| **Header1** | **Header2** ||
|| Text | Text ||
|#
Result
|
Header1 |
Header2 |
|
Text |
Text |
Multiline content
Any multiline content can be placed in a table cell. For example, lists.
#|
||Text
on two lines
|
- Potatoes
- Carrot
- Onion
- Cucumber||
|#
Result
|
Text |
|
or even other table:
#|
|| 1
|
Text before other table
#|
|| 5
| 6||
|| 7
| 8||
|#
Text after other table||
|| 3
| 4||
|#
Result
|
1 |
Text before other table
Text after other table |
||||
|
3 |
4 |
Table attributes
A table can have attributes at three levels: for the entire table, for an individual row, and for an individual cell.
| Level | Syntax | Where it goes |
|---|---|---|
| Table | |:{ ... } |
On a dedicated line between #| and the first || row |
| Row | ||:{ ... } |
On the same line as ||, immediately after it |
| Cell | ::{ ... } |
At the start of the cell content, right after | (or after ||:{ ... } for the first cell of a row) |
Attributes for the whole table are placed on a dedicated line between #| and the first || row:
#|
|:{header-rows="1"}
|| **Header1** | **Header2** ||
|| Text | Text ||
|#
Row attributes are placed right after the opening ||:
#|
||:{class="header"} **Header1** | **Header2** ||
|| Text | Text ||
|#
Cell attributes are placed at the start of the cell content. For the first cell of a row — right after || (or after row attributes, if any); for other cells — right after |:
#|
||::{align="center"} **Header1** | **Header2** ||
|| Text |::{align="top-right"} Text ||
|#
Formatting rules
- Each attribute block must be on the same line as its delimiter: a line break between
||/|and the attribute block disables it, and the text becomes part of the cell content. - No whitespace is allowed between
||and:{(row attributes). - No whitespace is allowed between
|and::{(cell attributes, except for the first cell of a row). - After
||:{...}, whitespace and tabs are allowed before::{...}of the first cell on the same line. - A table-attribute line (
|:{ ... }) may appear multiple times between#|and the first||row; when keys match, later values override earlier ones.
Header rows
To mark the first N rows of a table as header rows, use the table attribute header-rows="N". Header rows are rendered as <th scope="col"> instead of <td>.
The value N must be a positive integer.
#|
|:{header-rows="1"}
|| Header1 | Header2 | Header3 ||
|| Text | Text | Text ||
|| Text | Text | Text ||
|#
Result
|
Header1 |
Header2 |
Header3 |
|---|---|---|
|
Text |
Text |
Text |
|
Text |
Text |
Text |
Cell Merging
Cells can be merged vertically using the "^" symbol:
#|
|| Header1 | Header2 ||
|| Text spanning two rows | Another text ||
|| ^ | More text ||
|#
Result
|
Header1 |
Header2 |
|
Text spanning two rows |
Another text |
|
More text |
Horizontal merging is supported with the ">" symbol:
#|
|| Header1 | Header2 ||
|| Text spanning two columns | > ||
|| Another text | More text ||
|#
Result
|
Header1 |
Header2 |
|
Text spanning two columns |
|
|
Another text |
More text |
Merging symbols can be used together:
#|
|| Header1 | Header2 | Header3 ||
|| Text spanning two columns and two rows | > | Text ||
|| ^ | > | More text ||
|#
Result
|
Header1 |
Header2 |
Header3 |
|
Text spanning two columns and two rows |
Text |
|
|
More text |
||
Text Alignment in Cells
To control the alignment of content within a cell, use the cell attribute align:
#|
|| Header1 | Header2 | Header3 ||
||::{align="center"} Text spanning two columns and two rows | > | Text ||
|| ^ | > | More text ||
|#
Result
|
Header1 |
Header2 |
Header3 |
|
Text spanning two columns and two rows |
Text |
|
|
More text |
||
The following values are available:
top-lefttop-centertop-rightcenterbottom-leftbottom-centerbottom-right
Legacy syntax
Warning
Previously, alignment was set using the class syntax {.cell-align-*} inside the cell content. It still works for backward compatibility but is considered deprecated — use the ::{align="..."} attribute instead.
#|
|| Header1 | Header2 | Header3 ||
|| Text spanning two columns and two rows {.cell-align-center} | > | Text ||
|| ^ | > | More text ||
|#
Deprecated values:
cell-align-top-leftcell-align-top-centercell-align-top-rightcell-align-centercell-align-bottom-leftcell-align-bottom-centercell-align-bottom-right
Escaping Cell Merging Symbols
To include a merging symbol as plain text in a cell, use escaping with "",
i.e., "^" and ">".
#|
|| Header1 | Header2 | Header3 ||
|| Text in one cell | \> | Text ||
|| \^ | \> | More text ||
|#
Result
|
Header1 |
Header2 |
Header3 |
|
Text in one cell |
> |
Text |
|
^ |
> |
More text |
Adding "sticky header" to a table
For multi-line tables, just like for simple ones, you can add a "sticky header". To do this, you need to add the {sticky-header} attribute after the table.
#|
|| Header1 | Header2 | Header3 ||
|| Text in a single cell | \> | Text ||
|| \^ | \> | More text ||
|| Text in a single cell | \> | Text ||
...
|| \^ | \> | More text ||
|| Text in a single cell | \> | Text ||
|| \^ | \> | **More text** ||
|#
{sticky-header}
|
Header1 |
Header2. |
Header3 |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text. |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |
|
Text in a single cell |
> |
Text |
|
^ |
> |
More text |