---
tags: tutorials
disqus: hackmd
---
{%hackmd KghC_AJ7Rui37eDW5PVl9Q %}
How to create table with Markdown <i class="fa fa-table"></i>
===
[**中文教學**](/c/tutorials-tw/%2Fs%2Fhow-to-create-table-tw)
![](https://i.imgur.com/4eWcmDr.gif)
## Markdown table syntax
The easiest way to create a table is to click on the table icon <i class="fa fa-table"></i> in the editing tool bar at the top of the editing area.
![](https://i.imgur.com/MXMPFfW.png)
You can also create table using keyboard like a pro. :star:
1. We use <kbd>|</kbd>, <kbd>-</kbd>, and <kbd>enter</kbd> to create table with Markdown.
2. The first row has to be the "header row", which determines the number of columns the table would have.
3. The second row must contain <kbd>-</kbd> separating pipes <kbd>|</kbd>.
4. The pipes <kbd>|</kbd> separate each column.
5. Newline character creates new row.
### Example:
```md
|Name |Quantity|
|-----|--------|
|Apple|3 |
|Egg |12 |
```
The above markdown creates a 2 by 3 table:
| Name | Quantity |
| ----- | -------- |
| Apple | 3 |
| Egg | 12 |
## Table Editing Mode
HackMD makes it fast and easy to edit table with the Table Editing Mode, which features the new table editing toolbar.
![](https://i.imgur.com/st7pcHS.png)
There are two ways to enter the Table Editing Mode:
1. Enter a pipe <kbd>|</kbd> on a new line to start creating a table (On your keyboard: <kbd>shift</kbd> + <kbd>\\</kbd>).
You will immediately see the editing tool bar at the top changes, which means you are now in the Table Editing Mode.
![](https://i.imgur.com/kB54zKm.png)
2. If you move your cursor into an existing table, you will also see your editing tool bar changes.
![](https://i.imgur.com/rUGwzeh.png)
## Table editing toolbar
Now that you're in the Table Editing Mode, let's see how to use the table editing toolbar.
![](https://i.imgur.com/GRMVsb4.png)
> Table editing toolbar cheat sheet
### Insert/Delete a row
![](https://i.imgur.com/IDhoFba.gif)
### Insert/Delete a column
![](https://i.imgur.com/dd6RwGS.gif)
### Move a Row/Column
![](https://i.imgur.com/y7Gy1Je.gif)
![](https://i.imgur.com/0FHdYdu.gif)
### Alignment
![](https://i.imgur.com/Ix4pegg.gif)
## Enable keyboard shortcuts for table editing
HackMD has keyboard shortcuts for those who wants to create markdown tables like a pro.
The keyboard shortcuts are disabled by default, however. You can turn it on in editor settings <i class="fa fa-wrench fa-fw"></i> from the status bar below the editing area.
![](https://i.imgur.com/L0CfJ7f.png)
### Basic keyboard shortcut
#### <kbd>Tab</kbd> Move focus to the next cell.
![](https://i.imgur.com/vor2vpz.gif)
#### <kbd>Shift</kbd> + <kbd>Tab</kbd> Move focus to the previous cell.
![](https://i.imgur.com/po5xXfD.gif)
#### <kbd>Enter</kbd> Move focus to the next row (<kbd>Return</kbd> in macOS).
![](https://i.imgur.com/ybUYqV1.gif)
#### <kbd>Ctrl</kbd> + <kbd>Enter</kbd> Exit table editing mode(<kbd>Command</kbd> + <kbd>Return</kbd> in macOS)
![](https://i.imgur.com/hPhFjVL.gif)
#### <kbd>Ctrl</kbd> + <kbd>Arrow keys</kbd> Move focus of table cell (<kbd>Command</kbd> + <kbd>Arrow keys</kbd> in macOS)
![](https://i.imgur.com/p4wreyQ.gif)
:::info
:bulb: **Hint:**
With the keyboard shortcut enabled, **cells would be automatically aligned**. As a result, **overflow** could happen when a cell content is too long for the editor area width:
![](https://i.imgur.com/hBeqqEa.png)
You can turn off Word Wrapping in editor settings <i class="fa fa-wrench fa-fw"></i> from the status bar. The markdown table now displays correctly in editor.
![](https://i.imgur.com/nQzhRIP.png)
![](https://i.imgur.com/vrmKl0I.gif)
:::
## Appendix: Complete commands
If you are using Mac, use <kbd>Command</kbd> instead of <kbd>Ctrl</kbd>, and <kbd>Return</kbd> in place of <kbd>Enter</kbd>.
### Basic commands
| Command | Description | Keymap |
| ------------- | ------------------------- | ---------- |
| Next Cell | Move to the next cell | Tab |
| Previous Cell | Move to the previous cell | Shift-Tab |
| Next Row | Move to the next row | Enter |
| Escape | Escape from the table | Ctrl-enter |
### Move focus
| Command | Description | Keymap |
| ---------- | ---------------- | ---------- |
| Move Left | Move focus left | Ctrl-Left |
| Move Right | Move focus right | Ctrl-Right |
| Move Up | Move focus up | Ctrl-Up |
| Move Down | Move focus down | Ctrl-Down |
### Alignment
| Command | Description | Keymap |
| ------------ | --------------------- | ---------------- |
| Align Left | Align a column left | Shift-Ctrl-Left |
| Align Right | Align a column right | Shift-Ctrl-Right |
| Align Center | Align a column center | Shift-Ctrl-Up |
| Align None | Unset alignment | Shift-Ctrl-Down |
### Row/column operations
| Command | Description | Keymap |
| ----------------- | ---------------------- | -------------------- |
| Insert Row | Insert an empty row | Ctrl-K Ctrl-I |
| Delete Row | Delete a row | Ctrl-L Ctrl-I |
| Insert Column | Insert an empty column | Ctrl-K Ctrl-J |
| Delete Column | Delete a column | Ctrl-L Ctrl-J |
| Move Row Up | Move a row up | Alt-Shift-Ctrl-Up |
| Move Row Down | Move a row down | Alt-Shift-Ctrl-Down |
| Move Column Left | Move a column left | Alt-Shift-Ctrl-Left |
| Move Column Right | Move a column right | Alt-Shift-Ctrl-Right |
## Credits
HackMD table editing feature was released in version [1.10](https://hackmd.io/s/release-notes#-EE-1100-2019-10-23-1400). Special thanks to the open source module [markdown-table-editor kernel][mte-kernel] created by [susisu][susisu], who has been essential to the implementation of this feature.
This feature was also released in [CodiMD][codimd] 1.4.0. See [hackmdio/codimd/#1300](https://github.com/hackmdio/codimd/pull/1300) for more details.
[susisu]: https://github.com/susisu
[mte-kernel]: https://github.com/susisu/mte-kernel
[codimd]: https://github.com/hackmdio/codimd