表格

基础用法

使用Markdown语法来制作表格时，使用|来分隔不同的单元格，使用三个或多个-来分隔表头和其他行，如下所示

1
2
3
4
| 表头 | 表头 |
|------|------|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |

效果如下

表头 表头
第一行第一列 第一行第二列
第二行第一列 第二行第二列

对齐方式

通过在标题行中-左右侧添加:实现文本对齐

左对齐

1
2
3
4
| 表头 | 表头 |
|:------|:------|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |

效果如下

表头 表头
第一行第一列 第一行第二列
第二行第一列 第二行第二列

右对齐

1
2
3
4
| 表头 | 表头 |
|------:|------:|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |

效果如下

表头 表头
第一行第一列 第一行第二列
第二行第一列 第二行第二列

居中对齐

1
2
3
4
| 表头 | 表头 |
|:------:|:------:|
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |

效果如下

表头 表头
第一行第一列 第一行第二列
第二行第一列 第二行第二列

格式化

添加超链接

1
2
3
4
| 网页 | 网址 |
|------|------|
| 百度官网 | [https://www.baidu.com](https://www.baidu.com) |
| 博客首页 | [https://lucylcarus.github.io](https://lucylcarus.github.io) |

效果如下

网页 网址
百度官网 https://www.baidu.com
博客首页 https://lucylcarus.github.io

显示为代码

1
2
3
4
5
| 前端三大件 | 含义 |
|------|------|
| `HTML` | 全称HyperText Markup Language，超文本标记语言，是一种用于创建网页的标准标记语言 |
| `CSS` | 全称Cascading Style Sheets，层叠样式表，是一种用来为结构化文档添加样式的计算机语言 |
| `JS` | 全称JavaScript，是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言 |

效果如下

前端三大件 含义
HTML 全称HyperText Markup Language，超文本标记语言，是一种用于创建网页的标准标记语言
CSS 全称Cascading Style Sheets，层叠样式表，是一种用来为结构化文档添加样式的计算机语言
JS 全称JavaScript，是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言

单元格中显示|

1
2
3
| 运算符 | 含义 |
|------|------|
| || | 逻辑运算中的或 |

效果如下

运算符 含义
|| 逻辑运算中的或

文本样式

1
2
3
4
5
| 符号 | 含义 |
|------|------|
| `*` | *斜体* |
| `**` | **加粗** |
| `***` | ***加粗斜体*** |

效果如下

符号 含义
* 斜体
** 加粗
*** 加粗斜体

添加反引号防止符号*被渲染

单元格内换行

1
2
3
4
5
| HTML标签 | 含义 |
|------|------|
| `<br>`标签 | 换行<br>第二行 |
| `<a>`标签 | 超链接 |
| `<img>`标签 | 图像 |

效果如下

HTML标签 含义
<br>标签 换行
第二行
<a>标签 超链接
<img>标签 图像

添加反引号防止HTML标签被渲染

HTML中扩展

合并单元格

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
    </tr>
    <tr>
    	<td>行2列1</td> 
        <td>行2列2</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列1</td> 
        <td>行3列2</td> 
        <td>行3列3</td> 
    </tr>
</table>

效果如下

行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

每对<tr>标签之间为一行，每对<td>标签之间为一列

合并列

colspan规定单元格可纵跨的列数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
   </tr>
    <tr>
        <td colspan=2>合并两列</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td colspan=2>合并三列</td>
    </tr>
</table>

效果如下

行1列1 行1列2 行1列3
合并两列 行2列3
合并三列

合并行

rowspan规定单元格可横跨的行数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <td>行1列1</td> 
        <td rowspan=3>合并三行</td>
        <td>行1列3</td> 
   </tr>
    <tr>
        <td rowspan=2>合并两行</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列3</td> 
    </tr>
</table>

效果如下

行1列1 合并三行 行1列3
合并两行 行2列3
行3列3

添加表头

使用<th>标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
    </tr>
    <tr>
    	<td>行2列1</td> 
        <td>行2列2</td> 
        <td>行2列3</td> 
    </tr>
    <tr>
        <td>行3列1</td> 
        <td>行3列2</td> 
        <td>行3列3</td> 
    </tr>
</table>

效果如下

表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

表格颜色

使用bgcolor属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table bgcolor='yellow'>
    <tr>
        <th bgcolor='red'>表头1</th>
        <th bgcolor='blue'>表头2</th>
        <th bgcolor='green'>表头3</th>
    </tr>
    <tr bgcolor='purple'>
        <td>行1列1</td> 
        <td>行1列2</td> 
        <td>行1列3</td> 
    </tr>
    <tr>
    	<td bgcolor='pink'>行2列1</td> 
        <td bgcolor='pink'>行2列2</td> 
        <td bgcolor='pink'>行2列3</td> 
    </tr>
    <tr>
        <td>行3列1</td> 
        <td>行3列2</td> 
        <td>行3列3</td> 
    </tr>
</table>

效果如下

表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

对齐方式

align

使用align属性，center居中，left左对齐，right右对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
    <tr>
        <th align="left">表头1</th>
        <th align="center">表头2</th>
        <th align="right">表头3</th>
    </tr>
    <tr>
        <td align="center">行1列1</td> 
        <td align="center">行1列2</td> 
        <td align="center">行1列3</td> 
    </tr>
    <tr>
    	<td align="center">行2列1</td> 
        <td align="center">行2列2</td> 
        <td align="center">行2列3</td> 
    </tr>
    <tr>
        <td align="center">行3列1</td> 
        <td align="center">行3列2</td> 
        <td align="center">行3列3</td> 
    </tr>
</table>

效果如下

表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

tbody+align

使用<tbody>标签和align属性可以帮助我们省略很多操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table>
    <tbody align="center">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>行1列1</td> 
            <td>行1列2</td> 
            <td>行1列3</td> 
        </tr>
        <tr>
            <td>行2列1</td> 
            <td>行2列2</td> 
            <td>行2列3</td> 
        </tr>
        <tr>
            <td>行3列1</td> 
            <td>行3列2</td> 
            <td>行3列3</td> 
        </tr>
    </tbody>
</table>

效果如下

表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

<tbody>标签封装了一系列表格的行(<tr>元素)，代表了它们是表格(<table>)主要内容的组成部分

表名

使用<caption>标签，可搭配align属性使用，left展示在表格左边，top显示在表格前面，right显示在表格右边，bottom显示在表格下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table>
    <caption align="bottom">
        表的名称
    </caption>
    <tbody align="center">
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
        <tr>
            <td>行1列1</td> 
            <td>行1列2</td> 
            <td>行1列3</td> 
        </tr>
        <tr>
            <td>行2列1</td> 
            <td>行2列2</td> 
            <td>行2列3</td> 
        </tr>
        <tr>
            <td>行3列1</td> 
            <td>行3列2</td> 
            <td>行3列3</td> 
        </tr>
    </tbody>
</table>

效果如下

表的名称
表头1 表头2 表头3
行1列1 行1列2 行1列3
行2列1 行2列2 行2列3
行3列1 行3列2 行3列3

脚注

1
2
3
脚注[^1]

[^1]: 这是一个脚注

效果如下

脚注1

1. 这是一个脚注 ↩

角标

上角标

使用<sup>标签

1
2<sup>3</sup>=8

效果如下

23=8

下角标

使用<sub>标签

1
CO<sub>2</sub>为二氧化碳

效果如下

CO2为二氧化碳

文字样式

1
2
3
4
5
<font color=red>显示为红色</font><br>
<font size=20>文字大小为20</font><br>
<center>显示在中间</center><br>
<font face="华文琥珀">华文琥珀字体</font><br>
<p align="right">右对齐</p>

效果如下

显示为红色

文字大小为20

显示在中间

华文琥珀字体

右对齐

HTML5不支持<font>标签，HTML 4.01已废弃<center>标签