Markdown使用-4 表格
程序员文章站
2022-05-26 14:15:00
...
Markdown
本身有表格语法,它也支持HTML
表格
目录
Markdown
表格语法
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
表格语法参考: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