表格語法
表格是 Markdown 擴展語法的重要組成部分，用於以結構化方式展示數據。
基本表格語法
簡單表格
使用管道符 | 分隔列，使用 - 創建表頭分隔行：
markdown
| 姓名 | 年齡 | 職業 |
|------|------|------|
| 張三 | 25 | 工程師 |
| 李四 | 30 | 設計師 |
| 王五 | 28 | 產品經理 |渲染效果：
| 姓名 | 年齡 | 職業 |
|---|---|---|
| 張三 | 25 | 工程師 |
| 李四 | 30 | 設計師 |
| 王五 | 28 | 產品經理 |
表格對齊
使用冒號 : 控制列的對齊方式：
markdown
| 左對齊 | 居中對齊 | 右對齊 |
|:-------|:--------:|-------:|
| 內容1 | 內容1 | 內容1 |
| 內容2 | 內容2 | 內容2 |
| 內容3 | 內容3 | 內容3 |渲染效果：
| 左對齊 | 居中對齊 | 右對齊 |
|---|---|---|
| 內容1 | 內容1 | 內容1 |
| 內容2 | 內容2 | 內容2 |
| 內容3 | 內容3 | 內容3 |
對齊方式詳解
對齊語法
| 語法 | 對齊方式 | 示例 |
|---|---|---|
--- | 左對齊（默認） | ` |
:--: | 居中對齊 | ` |
--: | 右對齊 | ` |
數字數據表格
適合用右對齊顯示數字：
markdown
| 產品 | 價格 | 銷量 | 收入 |
|:-----|-----:|-----:|-----:|
| 產品A | ¥99 | 1,250 | ¥123,750 |
| 產品B | ¥199 | 856 | ¥170,344 |
| 產品C | ¥299 | 432 | ¥129,168 |
| **總計** | | **2,538** | **¥423,262** |渲染效果：
| 產品 | 價格 | 銷量 | 收入 |
|---|---|---|---|
| 產品A | ¥99 | 1,250 | ¥123,750 |
| 產品B | ¥199 | 856 | ¥170,344 |
| 產品C | ¥299 | 432 | ¥129,168 |
| 總計 | 2,538 | ¥423,262 |
表格中的格式化
內聯格式
表格單元格支持 Markdown 內聯格式：
markdown
| 功能 | 狀態 | 描述 |
|------|------|------|
| **登錄** | ✅ 完成 | 用戶可以使用郵箱登錄 |
| *注冊* | 🚧 進行中 | 支持第三方注冊 |
| `重置密碼` | ❌ 待開發 | 通過郵件重置密碼 |
| [用戶中心](/) | ⏳ 計劃中 | 用戶信息管理 |渲染效果：
| 功能 | 狀態 | 描述 |
|---|---|---|
| 登錄 | ✅ 完成 | 用戶可以使用郵箱登錄 |
| 注冊 | 🚧 進行中 | 支持第三方注冊 |
重置密碼 | ❌ 待開發 | 通過郵件重置密碼 |
| 用戶中心 | ⏳ 計劃中 | 用戶信息管理 |
表格中的代碼
markdown
| 命令 | 功能 | 示例 |
|------|------|------|
| `ls` | 列出文件 | `ls -la` |
| `cd` | 切換目錄 | `cd /home/user` |
| `mkdir` | 創建目錄 | `mkdir new-folder` |
| `rm` | 刪除文件 | `rm -rf folder/` |渲染效果：
| 命令 | 功能 | 示例 |
|---|---|---|
ls | 列出文件 | ls -la |
cd | 切換目錄 | cd /home/user |
mkdir | 創建目錄 | mkdir new-folder |
rm | 刪除文件 | rm -rf folder/ |
復雜表格示例
技術對比表
markdown
| 特性 | React | Vue | Angular |
|:-----|:-----:|:---:|:-------:|
| **學習難度** | 中等 | 簡單 | 困難 |
| **性能** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **生態系統** | 豐富 | 良好 | 完整 |
| **企業支持** | Facebook | 獨立 | Google |
| **TypeScript** | ✅ | ✅ | ✅ 內置 |
| **社區活躍度** | 非常高 | 高 | 中等 |渲染效果：
| 特性 | React | Vue | Angular |
|---|---|---|---|
| 學習難度 | 中等 | 簡單 | 困難 |
| 性能 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| 生態系統 | 豐富 | 良好 | 完整 |
| 企業支持 | 獨立 | ||
| TypeScript | ✅ | ✅ | ✅ 內置 |
| 社區活躍度 | 非常高 | 高 | 中等 |
API 文檔表格
markdown
| 參數 | 類型 | 必需 | 默認值 | 描述 |
|------|------|:----:|--------|------|
| `id` | `number` | ✅ | - | 用戶唯一標識符 |
| `name` | `string` | ✅ | - | 用戶姓名 |
| `email` | `string` | ✅ | - | 用戶郵箱地址 |
| `age` | `number` | ❌ | `null` | 用戶年齡 |
| `avatar` | `string` | ❌ | `"/default.jpg"` | 頭像URL |
| `status` | `enum` | ❌ | `"active"` | 賬戶狀態：`active` \| `inactive` |渲染效果：
| 參數 | 類型 | 必需 | 默認值 | 描述 |
|---|---|---|---|---|
id | number | ✅ | - | 用戶唯一標識符 |
name | string | ✅ | - | 用戶姓名 |
email | string | ✅ | - | 用戶郵箱地址 |
age | number | ❌ | null | 用戶年齡 |
avatar | string | ❌ | "/default.jpg" | 頭像URL |
status | enum | ❌ | "active" | 賬戶狀態：active | inactive |
表格格式化技巧
使用表情符號
markdown
| 操作系統 | 支持狀態 | 備注 |
|----------|:--------:|------|
| Windows | ✅ | 完全支持 |
| macOS | ✅ | 完全支持 |
| Linux | ⚠️ | 部分支持 |
| iOS | ❌ | 不支持 |
| Android | 🚧 | 開發中 |渲染效果：
| 操作系統 | 支持狀態 | 備注 |
|---|---|---|
| Windows | ✅ | 完全支持 |
| macOS | ✅ | 完全支持 |
| Linux | ⚠️ | 部分支持 |
| iOS | ❌ | 不支持 |
| Android | 🚧 | 開發中 |
使用徽章
markdown
| 項目 | 狀態 | 版本 |
|------|------|------|
| React |  | `v18.2.0` |
| Vue |  | `v3.3.0` |
| Angular |  | `v16.0.0` |空單元格處理
空內容表示
markdown
| 項目 | Q1 | Q2 | Q3 | Q4 |
|------|:--:|:--:|:--:|:--:|
| 收入 | 100萬 | 120萬 | - | - |
| 支出 | 80萬 | 90萬 | 95萬 | - |
| 利潤 | 20萬 | 30萬 | | |渲染效果：
| 項目 | Q1 | Q2 | Q3 | Q4 |
|---|---|---|---|---|
| 收入 | 100萬 | 120萬 | - | - |
| 支出 | 80萬 | 90萬 | 95萬 | - |
| 利潤 | 20萬 | 30萬 |
常見錯誤和解決方案
1. 管道符不對齊
markdown
❌ 錯誤：
| 姓名 | 年齡|職業|
|------|-----|-----|
|張三|25|工程師|
✅ 正確：
| 姓名 | 年齡 | 職業 |
|------|------|------|
| 張三 | 25 | 工程師 |2. 缺少分隔行
markdown
❌ 錯誤：
| 姓名 | 年齡 | 職業 |
| 張三 | 25 | 工程師 |
✅ 正確：
| 姓名 | 年齡 | 職業 |
|------|------|------|
| 張三 | 25 | 工程師 |3. 列數不匹配
markdown
❌ 錯誤：
| 姓名 | 年齡 | 職業 |
|------|------|------|
| 張三 | 25 | ← 缺少第三列
✅ 正確：
| 姓名 | 年齡 | 職業 |
|------|------|------|
| 張三 | 25 | 工程師 |4. 特殊字符處理
markdown
❌ 問題：
| 價格 | 描述 |
|------|------|
| $100|含稅 | ← 管道符被誤用
✅ 解決：
| 價格 | 描述 |
|------|------|
| $100 | 含稅 |
| $200 | 價格\|含稅 | ← 轉義管道符高級表格功能
使用 HTML 增強
markdown
<table>
<tr>
<th colspan="2">合並列標題</th>
<th>普通列</th>
</tr>
<tr>
<td rowspan="2">合並行</td>
<td>數據1</td>
<td>數據2</td>
</tr>
<tr>
<td>數據3</td>
<td>數據4</td>
</tr>
</table>渲染效果：
| 合並列標題 | 普通列 | |
|---|---|---|
| 合並行 | 數據1 | 數據2 |
| 數據3 | 數據4 | |
表格樣式定制
markdown
<table style="width: 100%; border-collapse: collapse;">
<tr style="background-color: #f0f0f0;">
<th style="border: 1px solid #ddd; padding: 8px;">產品</th>
<th style="border: 1px solid #ddd; padding: 8px;">價格</th>
</tr>
<tr>
<td style="border: 1px solid #ddd; padding: 8px;">產品A</td>
<td style="border: 1px solid #ddd; padding: 8px; color: red;">¥99</td>
</tr>
</table>實際應用場景
1. 項目管理
markdown
## 任務進度表
| 任務 | 負責人 | 開始時間 | 截止時間 | 狀態 | 完成度 |
|------|--------|----------|----------|:----:|:------:|
| 需求分析 | 張三 | 2023-10-01 | 2023-10-07 | ✅ | 100% |
| UI設計 | 李四 | 2023-10-08 | 2023-10-15 | 🚧 | 75% |
| 前端開發 | 王五 | 2023-10-16 | 2023-10-30 | ⏳ | 0% |
| 後端開發 | 趙六 | 2023-10-16 | 2023-11-05 | ⏳ | 0% |
| 測試 | 孫七 | 2023-11-06 | 2023-11-12 | ⏳ | 0% |2. 產品對比
markdown
## 訂閱方案對比
| 功能 | 免費版 | 專業版 | 企業版 |
|------|:------:|:------:|:------:|
| **用戶數量** | 5人 | 50人 | 無限制 |
| **存儲空間** | 1GB | 100GB | 1TB |
| **API調用** | 1000/月 | 10萬/月 | 無限制 |
| **技術支持** | 社區 | 郵件 | 專屬客服 |
| **SLA保證** | - | 99.9% | 99.99% |
| **價格** | 免費 | ¥99/月 | ¥999/月 |
| | [選擇](/) | [選擇](/) | [聯系銷售](/) |3. 財務報表
markdown
## 月度財務報表
| 項目 | 1月 | 2月 | 3月 | 總計 |
|------|----:|----:|----:|-----:|
| **收入** | | | | |
| 產品銷售 | 50,000 | 55,000 | 60,000 | 165,000 |
| 服務收入 | 20,000 | 22,000 | 25,000 | 67,000 |
| 其他收入 | 2,000 | 1,500 | 3,000 | 6,500 |
| *小計* | *72,000* | *78,500* | *88,000* | *238,500* |
| **支出** | | | | |
| 員工工資 | 30,000 | 30,000 | 30,000 | 90,000 |
| 辦公租金 | 8,000 | 8,000 | 8,000 | 24,000 |
| 營銷費用 | 10,000 | 12,000 | 15,000 | 37,000 |
| *小計* | *48,000* | *50,000* | *53,000* | *151,000* |
| **淨利潤** | **24,000** | **28,500** | **35,000** | **87,500** |最佳實踐
1. 保持簡潔
markdown
✅ 推薦：簡潔明了
| 項目 | 狀態 |
|------|------|
| A | 完成 |
| B | 進行中 |
❌ 不推薦：信息過載
| 項目名稱 | 當前狀態 | 詳細描述信息 | 負責人姓名 | 開始時間 | 結束時間 | 備注說明 |2. 使用有意義的標題
markdown
✅ 推薦：描述性標題
| 編程語言 | 學習難度 | 應用領域 |
❌ 不推薦：模糊標題
| 項目1 | 項目2 | 項目3 |3. 適當使用對齊
markdown
✅ 推薦：數字右對齊
| 產品 | 價格 | 數量 |
|:-----|-----:|-----:|
| A | ¥100 | 50 |
✅ 推薦：文本左對齊
| 姓名 | 部門 | 職位 |
|:-----|:-----|:-----|
| 張三 | 技術部 | 工程師 |HTML 輸出
Markdown 表格轉換為 HTML：
markdown
| 姓名 | 年齡 |
|------|------|
| 張三 | 25 |轉換為：
html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
</tr>
</tbody>
</table>相關語法
練習
嘗試創建以下表格：
- 一個團隊成員介紹表格
- 一個產品價格對比表格
- 一個項目進度跟蹤表格
- 一個技術棧評估表格
工具推薦
表格生成器
- 在線工具：Tables Generator、Markdown Tables Generator
- 編輯器插件：VS Code Markdown Table、Typora表格編輯
- 轉換工具：Excel to Markdown、CSV to Markdown
表格美化
- CSS框架：Bootstrap、Tailwind CSS
- 表格庫：DataTables、AG Grid
- Markdown擴展：markdown-it-table、remark-gfm