中文教學

How to create table with Markdown

Shortcut in the toolbar

The easiest way to create a table is to click on the table icon in the editing tool bar at the top of the editing area.

Markdown table syntax

You can also create table using keyboard like a pro.

1. We use |, -, and enter 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 - separating pipes |.
4. The pipes | separate each column.
5. Newline character creates new row.

Example:

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

There are two ways to enter the Table Editing Mode:

1. Enter a pipe | on a new line to start creating a table (On your keyboard: shift + \).
   You will immediately see the editing tool bar at the top changes, which means you are now in the Table Editing Mode.
2. If you move your cursor into an existing table, you will also see your editing tool bar changes.

 

Table editing toolbar

Now that you're in the Table Editing Mode, let's see how to use the table editing toolbar.

Table editing toolbar cheat sheet

Insert/Delete a row

Insert/Delete a column

Move a Row/Column

Alignment

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 from the status bar below the editing area.

Basic keyboard shortcut

Tab Move focus to the next cell.

Shift + Tab Move focus to the previous cell.

Enter Move focus to the next row (Return in macOS).

Ctrl + Enter Exit table editing mode(Command + Return in macOS)

Ctrl + Arrow keys Move focus of table cell (Command + Arrow keys in macOS)

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:

You can turn off Word Wrapping in editor settings from the status bar. The markdown table now displays correctly in editor.

Appendix: Complete commands

If you are using Mac, use Command instead of Ctrl, and Return in place of Enter.

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. Special thanks to the open source module markdown-table-editor kernel created by susisu, who has been essential to the implementation of this feature.

This feature was also released in CodiMD 1.4.0. See hackmdio/codimd/#1300 for more details.