Try   HackMD

如何建立表格

工具列的表格快捷鍵

建立一個 Markdown 表格最簡單的方式,就是按下編輯器工具列的表格圖示 :

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Markdown 表格表示法

Markdown 的表格由以下方式表示:

  1. 我們用 |- 來繪製 Markdown 表格
  2. 第一列為標題列,Markdown 表格用標題列的欄數決定這個表格的欄數
  3. 第二列的欄位需要包含 -,並用 | 分隔
  4. | 分隔每欄
  5. 用換行來建立新的一列

範例

| 名稱  | 數量 |
| ----- | -------- |
| 蘋果 | 3        |
| 雞蛋 | 12       |

以上 Markdown 語法會產出一個兩欄三列的表格:

名稱 數量
蘋果 3
雞蛋 12

 

進入表格編輯模式

HackMD 讓編輯 Markdown 表格更方便好用,為此我們設計了全新的表格工具列:

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

我們可以用兩種方法進入表格編輯模式:

  1. 輸入 | 建立新表格 (鍵盤按下 shift + \)
  2. 或是遊標選取現有的表格

 

表格工具列

現在您已經進入表格編輯模式了,讓我們介紹表格工具列的使用方法。

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

表格工具列功能速查表

新增/刪除列

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

新增/刪除欄

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

移動列/欄

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

對齊方式

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

啟用表格鍵盤快速鍵

若覺得點選工具列太過麻煩,我們也可以用鍵盤快速鍵來建立表格。表格快速鍵功能預設為關閉,可以從狀態列的選單開啟它

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

基礎快速鍵

Tab 移動到下一個單元格

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Shift + Tab 移動到前一個單元格

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Enter 移動到下一列 (macOS 為鍵盤上的 Return)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Ctrl + Enter 跳出表格編輯模式 (macOS 為 Command + Return 鍵)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Ctrl + 方向鍵 移動單元格焦點 (macOS 為 Command 鍵)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

表格小技巧

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
啟用表格快速鍵後,將同時啟用「自動格式化表格」功能,當一個表格欄位長度過長時,可能會如下圖一樣「爆版」:

此時您可以將從狀態列的選單將「啟用自動換行」取消勾選,確保 Markdown 表格能漂亮的在編輯區顯示:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

附錄:完整快速鍵對應表

若作業系統為 macOS,記得將以下快速鍵表中的 Ctrl 鍵替換為 Command 鍵。

基本快速鍵

指令 描述 快速鍵
下一單元格 移動到下一個單元格 Tab
前一單元格 移動到前一個單元格 Shift-Tab
下一列 移動到下一列 Enter
跳出 從表格編輯模式中跳出 Ctrl-enter

移動焦點

指令 描述 快速鍵
向左移動 向左移動焦點 Ctrl-Left
向右移動 向右移動焦點 Ctrl-Right
向上移動 向上移動焦點 Ctrl-Up
向下移動 向下移動焦點 Ctrl-Down

對齊方式

指令 描述 快速鍵
靠左對齊 將該欄靠左對齊 Shift-Ctrl-Left
靠右對齊 將該欄靠右對齊 Shift-Ctrl-Right
置中對齊 將該欄置中對齊 Shift-Ctrl-Up
取消對齊 取消已經設定的對齊方式 Shift-Ctrl-Down

列/欄操作

指令 描述 快速鍵
插入列 插入一個空列 Ctrl-K Ctrl-I
刪除列 刪除目前所在的列 Ctrl-L Ctrl-I
插入欄 插入一個空欄 Ctrl-K Ctrl-J
刪除欄 刪除目前所在的欄 Ctrl-L Ctrl-J
上移列 上移目前所在的列 Alt-Shift-Ctrl-Up
下移列 下移目前所在的列 Alt-Shift-Ctrl-Down
左移欄 左移目前所在的欄 Alt-Shift-Ctrl-Left
右移欄 右移目前所在的欄 Alt-Shift-Ctrl-Right

感謝

HackMD 表格編輯功能在 1.10 版 釋出,特別感謝 susisu 開源的 markdown-table-editor kernel 套件,讓我們得以實作表格編輯器功能。

此表格編輯器功能也同時在 CodiMD 1.4.0 版本開源釋出,詳見 hackmdio/codimd/#1300 的實作。