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