Skip to content

表格(Table)

表格是Markdown的一个重要元素，经常被用来记录数据，是非常重要的元素之一。 下面针对一些常用内容进行记录。

基本使用

基础使用demo：

| Syntax | Description |
| --- | --- |
| Header | Title |

效果：

Syntax Description
Header Title

功能

对齐

可以通过| --- |/| :--- |、| :---: |、| ---: |来设置左、居中、右对齐。

| Syntax | 居左 | 居左 | 居中 | 居右 |
| --- | --- | :--- | :---: | ---: |
| Header | Title | T | Title | T |
| Header, Header | T | Title | T | Title |

效果：

Syntax 居左 居左 居中 居右
Header Title T Title T
Header, Header T Title T Title

单元格内换行

Markdown本身不具备单元格内换行功能，但是大多数编辑器兼容html的换行<br>标签，可以使用这个标签来完成换行。

Demo:

| 需求 | 效果 |
|:---|:---:|
| 下划线 | <u>文字</u> |
| 表内换行 | 好朋友<br>木糖醇3+ |

效果：

需求 效果
下划线 文字
表内换行 好朋友
木糖醇3+

合并单元格

Markdown本身不具备合并单元格的能力，因此需要借助html语言来完成单元格的合并。可以参考菜鸟教程-html-tables。

使用html标签的Markdown表格

html标签表：

标签 描述
<table> 定义表格
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元
<caption> 定义表格标题
<colgroup> 定义表格列的组
<col> 定义用于表格列的属性
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚

通用表格

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

效果：

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

带表头的表格

<table border="1">  # border="1" 边框，不设置或设置为0时不显示
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

效果：

Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

带有标题

<table border="1">
    <caption>Monthly savings</caption>
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$50</td>
    </tr>
</table>

效果：

Month Savings
January $100
February $50
Monthly savings

跨行、跨列

  • 单元格跨两列:
<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Telephone</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
        <td>555 77 855</td>
    </tr>
</table>

效果：

Name Telephone
Bill Gates 555 77 854 555 77 855
  • 单元格跨两行
<table border="1">
    <tr>
        <th>First Name:</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th rowspan="2">Telephone:</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td>555 77 855</td>
    </tr>
</table>

效果：

First Name: Bill Gates
Telephone: 555 77 854
555 77 855

表格内嵌表格

<table border="1">
    <tr>
        <td>
            <p>这是一个段落</p>
            <p>这是另一个段落</p>
        </td>
        <td>这个单元格包含一个表格:
            <table border="1">
                <tr>
                    <td>A</td>
                    <td>B</td>
                </tr>
                <tr>
                    <td>C</td>
                    <td>D</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>这个单元格包含一个列表
            <ul>
                <li>apples</li>
                <li>bananas</li>
                <li>pineapples</li>
            </ul>
        </td>
        <td>HELLO</td>
    </tr>
</table>

效果：

这是一个段落

这是另一个段落

 这个单元格包含一个表格:
A B
C D
这个单元格包含一个列表
  • apples
  • bananas
  • pineapples
 HELLO

单元格边距

(html标签无效，如果需要html方法，参考：单元格边距(Cell padding))

单元格间距

(html标签无效，如果需要html方法，参考：单元格间距(Cell spacing))