【Markdown笔记】表格

【Markdown笔记】表格

在Markdown中使用表格。

基本使用

Markdown中使用表格的方式很简单，使用|来分隔单元格，使用-来分隔表头和单元格。

例如一个4行3列的表格：

表头1	表头2	表头3
单元格信息	单元格信息	单元格信息
单元格信息	单元格信息	单元格信息
单元格信息	单元格信息	单元格信息

写法如下：

| 表头1      | 表头2      | 表头3      |
| ---------- | ---------- | ---------- |
| 单元格信息 | 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 | 单元格信息 |

例如一个5行2列的表格：

表头1	表头2
单元格信息	单元格信息
单元格信息	单元格信息
单元格信息	单元格信息
单元格信息	单元格信息

写法如下：

| 表头1      | 表头2      |
| ---------- | ---------- |
| 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 |
| 单元格信息 | 单元格信息 |

对齐方式

要对表格内的单元格信息进行对齐，方式如下：

左对齐:-

右对齐-:

居中对齐:-:

Markdown中左对齐，右对齐，居中对齐的效果，是针对整列的单元格，不能设置单个单元格的对齐方式。如果想要对单个单元格定义对齐方式，需要使用HTML。

例如示例效果：

左对齐	右对齐	居中对齐
左对齐单元格	右对齐单元格	居中对齐单元格
左对齐单元格	右对齐单元格	居中对齐单元格

写法如下：

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

从上面的示例效果可以看出，设置对齐效果后，整列的单元格，包括表头信息也全部都对齐了。

HTML拓展功能

Markdown中本身支持的表格效果很少，如果要有更多的功能，需要使用HTML来拓展功能。

例如Markdown不支持跨行或跨列的单元格，或者说叫不支持合并单元格，我们可以使用HTML。

HTML表格

HTML表格由<table>标签来定义。每个表格由<tr>标签来定义行，由<td>标签定义每行分隔的单元格，由<th>标签定义表格的表头。

例如实现如下效果：

表头1	表头2
单元格信息1	单元格信息2

实现该效果的写法如下：

<table>
<tr>
  <th>表头1</th>
  <th>表头2</th>
</tr>
<tr>
  <td>单元格信息1</td>
  <td>单元格信息2</td>
</tr>
</table>

跨行的单元格

例如我们要实现如下横跨两行单元格效果：

表头1	表头2
单元格信息1	单元格信息2-1
	单元格信息2-2

可以看到单元格信息1横跨了两行单元格，或者可以说合并了2，3两行的单元格。

写法如下：

<table>
<tr>
  <th>表头1</th>
  <th>表头2</th>
</tr>
<tr>
  <td rowspan="2">单元格信息1</td>
  <td>单元格信息2-1</td>
</tr>
<tr>
  <td>单元格信息2-2</td>
</tr>
</table>

在HTML中使用<td>标签的rowspan属性来实现单元格的跨行操作，例如将上述示例中的rowspan="2"修改为rowspan="3"就能跨3行。

跨列的单元格

例如我们要实现如下横跨两列单元格效果：

表头1	表头2	表头3
单元格信息1	单元格信息2

可以看到单元格信息2横跨了两列单元格。

写法如下：

<table>
<tr>
  <th>表头1</th>
  <th>表头2</th>
  <th>表头3</th>
</tr>
<tr>
  <td>单元格信息1</td>
  <td colspan="2">单元格信息2</td>
</tr>
</table>

在HTML中使用<td>标签的colspan属性来实现单元格的跨列操作，例如将上述示例中的colspan="2"修改为colspan="3"就能跨3列。

单元格中换行

我们有时候需要在单元格中进行换行，这个时候可以使用<br>，这个标签可以在Markdown格式的表格中使用。

例如实现如下效果：

表头1	表头2
信息1 信息2 信息3	单元格

可以看到左侧的单元格实现了换行。

写法如下：

| 表头1               | 表头2 |
| ------------------- | ----- |
| 信息1<br>信息2<br>信息3 | 单元格 |

或者使用HTML的表格中进行换行，效果如下：

表头1	表头2
信息1 信息2 信息3	单元格

写法如下：

<table>
<tr>
  <th>表头1</th>
  <th>表头2</th>
</tr>
<tr>
  <td>信息1<br>信息2<br>信息3</td>
  <td>单元格</td>
</tr>
</table>

修改对齐方式

HTML中可以对任意行或者任意单元格进行对齐。

使用align属性来定义对齐方式：

左对齐left

右对齐right

居中对齐center

例如实现如下效果：

表头1	表头2	表头3
单元格信息1	单元格信息2	单元格信息3

实现的写法如下：

<table>
<tr  align="right">
  <th>表头1</th>
  <th>表头2</th>
  <th align="left">表头3</th>
</tr>
<tr>
  <td align="right">单元格信息1</td>
  <td align="center">单元格信息2</td>
  <td align="left">单元格信息3</td>
</tr>
</table>

---

本文链接：https://blog.csdn.net/u012028275/article/details/119849927