1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Markdown编辑表格实现合并单元格 单元格内容换行

Markdown编辑表格实现合并单元格 单元格内容换行

时间:2020-09-06 05:59:46

相关推荐

Markdown编辑表格实现合并单元格 单元格内容换行

Markdown虽然没有合并单元格的语法,但是Markdown是兼容HTML的,因此,我们可以通过HTML的方式实现单元格合并。

跨行合并使用 rowspan 属性

跨列合并使用 colspan 属性

HTML表格语法简介

HTML标签是以一对<>包括,比如表格标签< table >。并且每个标签是成对方式出现的,结束标签前面是/,在一对标签中间是要展示的内容,标签在解释器解释时候并不做显示。

表标签的标记是table,比如:

<table>表格内容</table>

表格的标题标签是caption,并且作为表格的内容一定要放在表格标签对里面:

<table><caption> 我是表头 </caption></table>

行标签< tr >,列单元格标签< td >,

<table><tr><td> 单元格1 </td><td> 单元格2 </td></tr><tr><td> 单元格3 </td><td> 单元格4 </td></tr></table>

效果如下:

表头标签< th >,表头字体会加粗区别,且单元格背景色略有不同:

合并单元格

跨行合并使用 rowspan 属性

跨列合并使用 colspan 属性

行合并在起始单元格标签中加上rowspan = “合并单元数”即可实现,比如合并两行:

<table><tr><td rowspan = "2"> 单元格1 </td><td> 单元格2 </td></tr><tr><td> 单元格4 </td></tr>​</table>

​列合并在起始单元格标签中加上`colspan = “合并单元数”`即可实现,比如合并两行列:

<table><tr><td colspan = "2"> 单元格1 </td></tr><tr><td> 单元格3 </td><td> 单元格4 </td></tr></table>

单元格内容换行

使用HTML的<br>实现

在Markdown的写法中:

|排名|姓名||--|--||第一名|隔壁老王||第二名|隔壁小王 <br> 隔壁小小王|

如果使用HTML的table:

<table><tr><th> 排名 </th><th> 姓名 </th></tr><tr><td> 第一名 </td><td> 隔壁老王 </td></tr><tr><td> 第二名 </td><td> 隔壁小王<br> 隔壁小小王 </td></tr></table>

两种方法实现的表格效果是基本一致的。

对齐方式

单元格的对齐标记是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>

注意:不设置对齐则默认与上一个相同对齐方式,两个标签中间要有空格

单元格背景色

<table><tr><td bgcolor=#FF69B4>第一列</td> <td>第二列</td><td>第三列</td> </tr><tr><td colspan="2" bgcolor=#7B68EE>合并第1,2列</td><td>第2行,第3列</td </tr><tr><td colspan="2" bgcolor=#ADFF2F>合并第1,2列</td><td>第3行,第3列</td </tr></table>

注意:

<td colspan="2" bgcolor=#7B68EE> 这里colspan="2"和bgcolor=#7B68EE中间必须有空格

推荐一个网站可以在Excel表格中编辑好后在线转换成html标记对的网站:/tools/excel_to_html_table/index.html

参考鸣谢:

Markdown表格-换行、合并单元格

csdn的Markdown编辑器中如何(跨行跨列)合并单元格表格

Markdown(六)——表格合并单元格&增加标题

Markdown表格—合并单元格—设置单元格颜色

Markdown快速实现复杂表格方法

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。