9、Markdown 表格

---

表格

1、绘制表格

• Markdown 制作表格使用|来分隔不同的单元格，使用-来分隔表头和其他行。

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

• 显示效果如下：
  

2、对齐方式

• 我们可以设置表格的对齐方式：

-: 设置内容和标题栏居右对齐。
:- 设置内容和标题栏居左对齐。
:-: 设置内容和标题栏居中对齐。

• 举例如下：

| 左对齐 | 右对齐 | 居中对齐 |
| :-----| ----: | :----: |
| 单元格 | 单元格 | 单元格 |
| 单元格 | 单元格 | 单元格 |

• 显示结果如下：
  

3、合并单元格

• Markdown 并没有单元格合并语法，但是 Markdown 是兼容 HTML 的，因此，我们可以通过 HTML 的方式实现单元格合并
• 举例如下

<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th><th>表头</th>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
        <td>行1列4</td>
    </tr>
    <tr>
        <td rowspan="2">合并两列</td>
        <td>行2列2</td>
        <td>行2列3</td>
        <td rowspan="2">合并两列</td>
    </tr>
    <tr>
        <td>行3列2</td>
        <td>行3列3</td>
    </tr>
</table>

<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th><th>表头</th>
    <tr>
    <tr>
        <td>行1列1</td>
        <td>行1列2</td>
        <td>行1列3</td>
        <td>行1列4</td>
    </tr>
    <tr>
        <td>行2列1</td>
        <td colspan="2">合并两行</td>
        <td>行2列4</td>
    </tr>
    <tr>
        <td>行3列1</td>
        <td colspan="2">合并两行</td>
        <td>行3列4</td>
    </tr>
</table>

• 显示结果如下
  
• 请注意，这里面没有将表格居中，含有表格居中的 HTML 是这样的

<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th><th>表头</th>
    <tr>
        <td style="text-align:center">行1列1</td>
        <td style="text-align:center">行1列2</td>
        <td style="text-align:center">行1列3</td>
        <td style="text-align:center">行1列4</td>
    </tr>
    <tr>
        <td rowspan="2" style="text-align:center">合并两列</td>
        <td style="text-align:center">行2列2</td>
        <td style="text-align:center">行2列3</td>
        <td rowspan="2" style="text-align:center">合并两列</td>
    </tr>
    <tr>
        <td style="text-align:center">行3列2</td>
        <td style="text-align:center">行3列3</td>
    </tr>
</table>

<table>
<tbody>
    <tr>
        <th>表头</th><th>表头</th><th>表头</th><th>表头</th>
    <tr>
    <tr>
        <td style="text-align:center">行1列1</td>
        <td style="text-align:center">行1列2</td>
        <td style="text-align:center">行1列3</td>
        <td style="text-align:center">行1列4</td>
    </tr>
    <tr>
        <td style="text-align:center">行2列1</td>
        <td colspan="2" style="text-align:center">合并两行</td>
        <td style="text-align:center">行2列4</td>
    </tr>
    <tr>
        <td style="text-align:center">行3列1</td>
        <td colspan="2" style="text-align:center">合并两行</td>
        <td style="text-align:center"> 行3列4</td>
    </tr>
</table>

• 显示结果如下：
  

---