Markdown使用-4 表格

Posted 2022-12-01 编号1993

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Markdown使用-4 表格相关的知识，希望对你有一定的参考价值。

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

Markdown表格语法
HTML表格语法
在线编辑

`Markdown`表格语法

参考：Tables

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`表格语法

参考：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>