[**中文教學**](/c/tutorials-tw/%2Fs%2Fhow-to-create-table-tw)

{%hackmd rJ_1SdPkxx %}

# How to create table with Markdown <i class="fa fa-table"></i>

## Shortcut in the toolbar

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.


## Markdown table syntax

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:

|Name |Quantity|
|-----|--------|
|Apple|3       |
|Egg  |12      |

The above markdown creates a 2 by 3 table:

| Name | Quantity |
| ----- | -------- |
| Apple | 3 |
| Egg | 12 |

&nbsp;

# 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 <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.
2. If you move your cursor into an existing table, you will also see your editing tool bar changes.

&nbsp;

# 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 <i class="fa fa-wrench fa-fw"></i> from the status bar below the editing area.


### Basic keyboard shortcut

#### <kbd>Tab</kbd> Move focus to the next cell.


#### <kbd>Shift</kbd> + <kbd>Tab</kbd> Move focus to the previous cell.


#### <kbd>Enter</kbd> Move focus to the next row (<kbd>Return</kbd> in macOS).


#### <kbd>Ctrl</kbd> + <kbd>Enter</kbd> Exit table editing mode(<kbd>Command</kbd> + <kbd>Return</kbd> in macOS)


#### <kbd>Ctrl</kbd> + <kbd>Arrow keys</kbd> Move focus of table cell (<kbd>Command</kbd> + <kbd>Arrow keys</kbd> in macOS)


>[!Important] **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 <i class="fa fa-wrench fa-fw"></i> from the status bar. The markdown table now displays correctly in editor.
>
>
>
>

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