欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Markdown使用-4 表格

程序员文章站 2022-05-26 14:15:00
...

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


目录

  1. Markdown表格语法
  2. HTML表格语法
  3. 在线编辑

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>
电话簿
姓名 电话
Bill Gates 555 77 854
hehe 555 77 855
555 77 856

对齐

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

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

在线编辑

参考:Tables Generator – 在线生成 LaTeX、HTML、Markdown 表格

有一个在线表格生成器:Tables Generator,可用于生成Markdown表格和HTML表格

还有一个W3C的在线编辑器:html_tables

相关标签: Markdown

上一篇: 楼主薨

下一篇: 清洁用品