Skip to content

表格

Markdown本身有表格语法，它也支持HTML表格

Markdown表格语法

基本用法

| Syntax    | Description | Description1 |
| --------- | ----------- | ------------ |
| Header    | Title       | Title1       |
| Paragraph | Text        | Text1        |

To add a table, use three or more hyphens (---) to create each column’s header, and use pipes (|) to separate each column. You can optionally add pipes on either end of the table.
Syntax Description Description1
Header Title Title1
Paragraph Text Text1

使用3个或更多的连字符（-）来创建每列的头，使用竖线（|）来分离每列

对齐

| Syntax    | Description |   Test Text |
| :-------- | :---------: | ----------: |
| Header    |    Title    | Here's this |
| Paragraph |    Text     |    And more |

You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens within the header row.
Syntax Description Test Text
Header Title Here's this
Paragraph Text And more

如果想要对齐每列（左，中，右），可以在连字符上加上分号（:），加在左边表示向左对齐，加在两侧表示居中对齐，加在右边表示向右对齐。

HTML表格语法

同样的，在Markdown上也可以使用HTML表格语法，相比之下，使用HTML语法可以实现更多的样式。

基本用法

<table>
    <tr>
        <td>1行1列</td>
        <td>1行2列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
    </tr>
</table>
1行1列 1行2列
2行1列 2行2列

标签<table>表示表格，标签<tr>表示行，标签<td>表示列

边界

如果想要显示边界，在<table>属性中设置border

<table border="1">
    <tr>
        <td>1行1列</td>
        <td>1行2列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
    </tr>
</table>
1行1列 1行2列
2行1列 2行2列

表头

使用标签<th>表示表头

<table border="1">
    <tr>
        <th>表头</a>
        <th>第二个表头</a>
    </tr>
    <tr>
        <td>1行1列</td>
        <td>1行2列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
    </tr>
</table>
表头 第二个表头
1行1列 1行2列
2行1列 2行2列

表头<th>即可用于行，也可表示列

<table border="1">
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 855</td>
    </tr>
</table>
姓名 Bill Gates
电话 555 77 854
电话 555 77 855

标题

使用标签<caption>设置表格标题

<table border="1">
    <caption>电话簿</caption>
    <tr>
        <th>姓名</th>
        <td>Bill Gates</td>
    </tr>
    <tr>
        <th>电话1</th>
        <td>555 77 854</td>
    </tr>
    <tr>
        <th>电话2</th>
        <td>555 77 855</td>
    </tr>
</table>
电话簿
姓名 Bill Gates
电话1 555 77 854
电话2 555 77 855

跨越多行或多列

在标签<td>或者<th>上设置属性colspan表示跨越多列，设置属性rowspan表示跨越多行

<table border="1">
    <caption>电话簿</caption>
    <tr align="center">
        <th>姓名</th>
        <td>Bill Gates</td>
        <td colspan="2">hehe</td>
    </tr>
    <tr>
        <th>电话</th>
        <td>555 77 854</td>
        <td>555 77 855</td>
        <td>555 77 856</td>
    </tr>
</table>
电话簿
姓名 Bill Gates hehe
电话 555 77 854 555 77 855 555 77 856 
<table border="1">
    <caption>电话簿</caption>
    <tr align="center">
        <th>姓名</th>
        <th>电话</th>
    </tr>
    <tr>
        <td>Bill Gates</td>
        <td>555 77 854</td>
    </tr>
    <tr>
        <td rowspan="2" align="center">hehe</td>
        <td>555 77 855</td>
    </tr>
    <tr>
        <td>555 77 856</td>
    </tr>
</table>
电话簿
姓名 电话
Bill Gates 555 77 854
hehe 555 77 855
555 77 856

对齐

使用属性值align设置对齐方式，它可以应用于每一种标签：

  • 在标签<table>中设置，表示表格居中
  • 在标签<tr>中设置，表示行文字对齐
  • 在标签<td>中设置，表示列文字对齐

在线编辑

  1. Markdown风格表格

  2. Tables Generator：可用于生成Markdown表格和HTML表格

  3. html_tables：W3C的在线编辑器

相关阅读