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 |

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

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 |

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 |

What	Type this	Shows as
Bold	`__bold__`	bold
Italic	`italic`	italic
Code	`code`	`code`
Strikethrough	`~~gone~~`	~~gone~~
Subscript	`H~2~O`	H₂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/] |

Topic	Where to read about it
Links	Using Links
Page text	how text is written
Outside site	CommonMark

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 |

#	Task
1	Write the agenda
2	Send the invitations
3	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 |
/%

Code	Country
CA	Canada
MX	Mexico

table-bordered

Every cell has a border:

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

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 |
/%

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 |
/%

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 |
/%

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 |
/%

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.