前言:之前有写过Markdown的表格记录处理标记,见Markdown语法(三)——列表&表格。但是发现这种方式不能合并单元格,对想要合并单元格的数据很不友好。好在Markdown可以支持HTML标签,以下是记录HTML的表格标签再Markdown中的应用,包括了合并单元格和增加标题的功能。
1.HTML标签对
HTML语言的功能介绍不多说,想了解详情可以百度。需要记住的是HTML标签是以一对<>包括,比如表格标签< table >。并且每个标签是成对方式出现的,结束标签前面是/,在一对标签中间是要展示的内容,标签在解释器解释时候并不做显示。比如:< table > 我是内容 < /table>。
2.表格标签< table >
表标签的标记是table,比如:
<table>
</table>
上述一对标签对中的内容是表格的内容。
3. 标题标签< caption >
表格的标题标签是caption,并且作为表格的内容一定要放在表格标签对里面:
< table >
<caption> 我是表头 </caption>
< /table>
效果如下,此时表格标题居中显示。而我们的表格还没设置行和列,所以不显示:
4.行标签< tr >
表格都由行和列组成。HTML的表格都按先行后列顺序填充表格元素,tr表示一行的内容:
<table>
<tr>
第一行内容
</tr>
<tr>
第二行内容
</tr>
</table>
5.列单元格标签< td >
行的内容是一个个列单元格,列单元格的标签为td,将单元格内容填充到行中(即将< td>对包括的内容放到 < tr>包括内容中去):
<table>
<tr>
<td> 单元格1 </td>
<td> 单元格2 </td>
</tr>
<tr>
<td> 单元格3 </td>
<td> 单元格4 </td>
</tr>
</table>
这个两行两列共四个单元格的表格为:
单元格1 | 单元格2 |
单元格3 | 单元格4 |
6.表头标签< th >
作为一个表格,表头必不可少。表头的用法与列单元格类似,只不过标签由td改为th:
<table>
<tr>
<th> 表头1 </th>
<th> 表头2 </th>
</tr>
<tr>
<td> 单元格3 </td>
<td> 单元格4 </td >
</tr>
</table>
表头字体会加粗区别:效果为:
表头1 | 表头2 |
---|---|
单元格3 | 单元格4 |
7.合并单元格 rowspan & colspan
普通的Markdown表格没有合并单元格功能,HTML的合并单元格功能分为行合并和列合并。关于属性标签的属性值一定要用""
包括以示区别。
- 行合并 rowspan
行合并在起始单元格标签中加上rowspan = “合并单元数”
即可实现,比如合并两行:
<table>
<tr>
<td rowspan = "2"> 单元格1 </td>
<td> 单元格2 </td>
</tr>
<tr>
<td> 单元格4 </td>
</tr>
</table>
效果为:
单元格1 | 单元格2 |
单元格4 |
- 列合并 colspan
列合并在起始单元格标签中加上colspan = “合并单元数”
即可实现,比如合并两行列:
<table>
<tr>
<td colspan = "2"> 单元格1 </td>
</tr>
<tr>
<td> 单元格3 </td>
<td> 单元格4 </td>
</tr>
</table>
效果为:
单元格1 | |
单元格3 | 单元格4 |
8.对齐align
本来各种表格进一步美化的方式,比如:对齐方式、边框、长度宽度、样式等不打算做记录,因为我的本意不是做布局美化而只是做文档整理。但是考虑到合并单元格后合并单元内容的美观性,就简单记录下单元格内容的居中方式。
单元格的对齐标记是align,它有三种属性内容:
- left
- right
- center
它可以放在一行或者一个列单元格的标记中控制这一行或者这一个列单元格标记的对齐方式,
<table>
<tr align = "left">
<td colspan = "2"> 单元格1 </td>
</tr>
<tr>
<td align = "left"> 单元格3 </td>
<td> 单元格4 /td>
</tr>
</table>
效果:
单元格1 | |
单元格3 | 单元格4 |
如果您觉得有帮助,请给我一个赞。
您的鼓励是我前进的动力(๑‾ ꇴ ‾๑)。