【Markdown笔记】表格

在Markdown中使用表格。

基本使用

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

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

<table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>单元格信息</td> <td>单元格信息</td> <td>单元格信息</td> </tr> <tr> <td>单元格信息</td> <td>单元格信息</td> <td>单元格信息</td> </tr> <tr> <td>单元格信息</td> <td>单元格信息</td> <td>单元格信息</td> </tr> </tbody> </table>nn 写法如下：

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

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

<table> <thead> <tr> <th>表头1</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td>单元格信息</td> <td>单元格信息</td> </tr> <tr> <td>单元格信息</td> <td>单元格信息</td> </tr> <tr> <td>单元格信息</td> <td>单元格信息</td> </tr> <tr> <td>单元格信息</td> <td>单元格信息</td> </tr> </tbody> </table>nn 写法如下：

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

对齐方式

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

左对齐:-

右对齐-:

居中对齐:-:

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

例如示例效果：

<table> <thead> <tr> <th align="left">左对齐</th> <th align="right">右对齐</th> <th align="center">居中对齐</th> </tr> </thead> <tbody> <tr> <td align="left">左对齐单元格</td> <td align="right">右对齐单元格</td> <td align="center">居中对齐单元格</td> </tr> <tr> <td align="left">左对齐单元格</td> <td align="right">右对齐单元格</td> <td align="center">居中对齐单元格</td> </tr> </tbody> </table>nn 写法如下：

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

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

HTML拓展功能

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

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

HTML表格

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

例如实现如下效果：

<table> <tbody> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>单元格信息1</td> <td>单元格信息2</td> </tr> </tbody> </table>nn 实现该效果的写法如下：

<table><tr>  <th>表头1</th>  <th>表头2</th></tr><tr>  <td>单元格信息1</td>  <td>单元格信息2</td></tr></table>nn```
 
 
### 跨行的单元格
 
 
例如我们要实现如下横跨两行单元格效果：
 
 <table>  <tbody>   <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>  </tbody> </table>nn 
可以看到单元格信息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>nn```

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

跨列的单元格

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

<table> <tbody> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> <tr> <td>单元格信息1</td> <td colspan="2">单元格信息2</td> </tr> </tbody> </table>nn 可以看到单元格信息2横跨了两列单元格。

写法如下：

<table><tr>  <th>表头1</th>  <th>表头2</th>  <th>表头3</th></tr><tr>  <td>单元格信息1</td>  <td colspan="2">单元格信息2</td></tr></table>nn```
 
 
在HTML中使用<td>标签的colspan属性来实现单元格的跨列操作，例如将上述示例中的colspan="2"修改为colspan="3"就能跨3列。
 
 
### 单元格中换行
 
 
我们有时候需要在单元格中进行换行，这个时候可以使用
，这个标签可以在Markdown格式的表格中使用。
 
 
例如实现如下效果：
 
 <table>  <thead>   <tr>   <th>表头1</th>   <th>表头2</th>   </tr>  </thead>  <tbody>   <tr>   <td>信息1
信息2
信息3</td>   <td>单元格</td>   </tr>  </tbody> </table>nn 
可以看到左侧的单元格实现了换行。
 
 
写法如下：
 
 

 
 
或者使用HTML的表格中进行换行，效果如下：
 
 <table>  <tbody>   <tr>   <th>表头1</th>   <th>表头2</th>   </tr>   <tr>   <td>信息1
信息2
信息3</td>   <td>单元格</td>   </tr>  </tbody> </table>nn 
写法如下：
 
 

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

修改对齐方式

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

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

左对齐left

右对齐right

居中对齐center

例如实现如下效果：

<table> <tbody> <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> </tbody> </table>nn 实现的写法如下：

```

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

<hr>

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

原文地址：https://blog.csdn.net/u012028275/article/details/119849927?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905672416800213067636%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905672416800213067636&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-29-119849927-null-null.142^v88^control_2,239^v2^insert_chatgpt&utm_term=markdown