Using Tables

This page shows how to put a table on a page, format what is inside it, and choose how it looks. Each example shows what to type, followed by the table it makes.

Making a Table

Start the table with a header row, written with double bars || between the cells. Each row after it is written with single bars |:

|| Name || Role || Department ||
| Alice Johnson | Developer | Engineering |
| Bob Smith | Designer | UX |
| Carol Davis | Manager | Operations |

Every line of the table starts with a bar. The bar at the end of a row is optional, so this table is the same as the one above:

|| Name || Role || Department
| Alice Johnson | Developer | Engineering
| Bob Smith | Designer | UX

Leave a blank line above and below the table so it is not joined to the text around it.

The Markdown form

You can also write a table the Markdown way: a header row, then a line of dashes, then the rows. Both forms make the same table.

| Fruit | Colour |
|-------|--------|
| Apple | Red |
| Banana | Yellow |

Headers

The header row is the row written with ||. Its cells are shown in bold and set apart from the rows below. A table needs a header row to be sortable.

Keep each row to the same number of cells as the header, so the columns line up.

Formatting in Cells

A cell can hold the same text formatting as the rest of the page:

|| What || Type this || Shows as ||
| Bold | `__bold__` | __bold__ |
| Italic | `*italic*` | *italic* |
| Code | `` `code` `` | `code` |
| Strikethrough | `~~gone~~` | ~~gone~~ |
| Subscript | `H~2~O` | H~2~O |
| Two lines | `first\\second` | first\\second |

Type \\ inside a cell to start a new line within that cell. A cell cannot contain a | character of its own, because the bar always starts the next cell; the one exception is the bar inside a link, described next.

Links in Cells

Links work in a cell just as they do anywhere else on a page. The | inside a link's brackets belongs to the link, not to the table. See Using Links for every kind of link.

|| Topic || Where to read about it ||
| Links | [Using Links] |
| Page text | [how text is written|Markdown as we use it] |
| Outside site | [CommonMark|https://commonmark.org/] |

Numbering Rows

To number the rows of a table for you, put [{Table}] on the line above it and type # as a cell's whole content. Each row that has a # cell gets the next number, starting at 1:

[{Table}]
||# || Task ||
|# | Write the agenda |
|# | Send the invitations |
|# | Book the room |

A # in the header row stays as it is, so it works as the column's heading. When you add, remove or move a row, the numbers follow on their own.

Table Styles

A style changes how a table looks. Put the style's name after %% on the line above the table, and /% on the line below it.

table-fit

The table is only as wide as its content, instead of the full width of the page:

%%table-fit
|| Code || Country ||
| CA | Canada |
| MX | Mexico |
/%

table-bordered

Every cell has a border:

%%table-bordered
|| Service || Status ||
| Mail | Running |
| Backups | Running |
/%

table-striped

Every other row is shaded, which makes a long table easier to follow across:

%%table-striped
|| Product || Price ||
| Laptop | 1299 |
| Mouse | 45 |
| USB hub | 79 |
| Monitor | 399 |
/%

table-hover

The row under the mouse pointer is highlighted:

%%table-hover
|| Task || Due ||
| Review the draft | 2026-01-15 |
| Update the list | 2026-01-20 |
/%

sortable

Readers can sort the table by clicking a column heading. See Sortable Tables below.

%%sortable
|| Country || Population (millions) ||
| Germany | 83 |
| Japan | 126 |
| India | 1380 |
/%

Combining Styles

To use several styles on one table, list them all after a single %%, separated by spaces, and close with one /%:

%%table-fit table-bordered table-striped table-hover sortable
|| Book || Author || Year ||
| Pride and Prejudice | Jane Austen | 1813 |
| The Great Gatsby | F. Scott Fitzgerald | 1925 |
| Nineteen Eighty-Four | George Orwell | 1949 |
| To Kill a Mockingbird | Harper Lee | 1960 |
/%

Every %% needs its own /%. A missing /% leaves the style open, and it then spills onto the tables further down the page.

Sortable Tables

In a table with the sortable style, each column heading shows a small ⇅ mark. To sort:

• Click a column heading to sort the rows by that column: A to Z, smallest first, or earliest first. An ↑ shows which column is sorted.
• Click the same heading again to reverse the order. The mark turns to ↓.
• Click a different heading to sort by that column instead.

Sorting happens in your browser. It does not change the page, and the table goes back to its original order when the page is reloaded.

The table works out what kind of values each column holds:

• Numbers such as 83 or 4.5 sort by size.
• Dates such as 2026-01-15 sort from earliest to latest.
• Everything else sorts as text, with any numbers inside it taken in order, so Item 2 comes before Item 10.

To have a column sort by size, write its values as plain numbers. A currency sign or a thousands separator, as in $1,299, makes the column sort as text. Put the unit in the heading instead, as the Population column above does.

A striped table stays evenly striped after it is sorted.