markdown 编辑器通过HTML实现:设置单元格背景颜色、设置字体颜色和合并单元格
一、html设置单元格背景颜色、字体颜色和合并单元格
实现的代码:
<table border="1" cellspacing="0" cellpadding="5" width="400" height="100">
<caption>成绩单</caption>
<tr align="center">
<th><font face="宋体" color="##FF0000">姓名</th>
<th><font face="宋体" color="##FF0000">语文</th>
<th><font face="宋体" color="##FF0000">数序</th>
<th><font face="宋体" color="##FF0000">英语</th>
<th><font face="宋体" color="##FF0000">物理</th>
<th><font face="宋体" color="##FF0000">化学</th>
</tr>
<tr >
<td rowspan="2" bgcolor="#cc9999"><font face="宋体" color="##FF0000">王</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">82</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">84</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">87</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">86</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">77</td>
</tr>
<tr >
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">82</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">84</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">87</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">86</td>
<td bgcolor="#cc9999"><font face="宋体" color="##FF0000">77</td>
</tr>
</table>
简化合并单元格:
<table>
<tr>
<th>姓名</th>
<th>物理</th>
</tr >
<tr >
<td rowspan="2">李</td>
<td>88</td>
</tr>
<td>87</td>
</tr>
</table>
效果:
姓名 | 语文 | 数序 | 英语 | 物理 | 化学 |
---|---|---|---|---|---|
王 | 82 | 84 | 87 | 86 | 77 |
82 | 84 | 87 | 86 | 77 |
姓名 | 物理 |
---|---|
李 | 88 |
87 |
设置单元格背景颜色
<td bgcolor="#cc9999">王</td>
<td bgcolor="#cc9999">王</td>
设置单元格字体颜色
<td > <font face=“宋体” color="##FF0000"> 王</td>
<td ><font face="宋体" color="##FF0000">王</td>
合并单元格(一)
HTML<td>标签的 rowspan 属性规定单元格可横跨的行数
<td rowspan=“2” > 王</td>
<td rowspan="2" >王</td>
实例:
表格单元横跨两行的表格:
<table>
<tr>
<td rowspan=“2” bgcolor="#cc9999" align=“center” > <font face=“宋体” color="##FF0000"> 王</td> </tr>
</table>
二、HTML的table表格
表头标签
表头单元格一般位于表格的第一行或第一列,其文本加粗居中只需用表头标签替代相应的单元格标签即可。
###表格标题
表格的标题:caption
定义和用法
caption元素定义表格标题。
<table>
<caption>我是表格标题</caption>
</table>
caption标签必须紧跟table标签之后,只能每个表格定义一个标题。通常这个标题会被居中于表格之上。
表格结构
在使用表格进行布局时,可以将表格划分为头部,主体和页脚(页脚因为有兼容性问题)。具体如下:
<thead></thead>:用于定义表格的头部。
必须位于<table></table>标签中,一般包含网页的logo和导航等头部信息。
<tbody></tbody>:用于定义表格的主体
位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。
三、Markdown语言编辑出对应的excel实现合并单元格(二)
Markdown有个特性就是兼容 HTML。
试想一下,如果用第一节的Markdown语言编辑出对应的excel,真是劳民伤财啊!给谁谁都不愿意干吧。
如果这个表格仅仅是用来阅读,展示一些信息,那么完全可以用下面的方式来显示。只保留表格结构,不保留标红等标注。
1、准备好要处理的excel表格
2、打开excel,另存为html格式——wps、office都支持
3、找到新生成的文件夹下带sheet的html文件,并用浏览器打开预览,找到想要转换的文件。
4、用NotePad++等阅读工具打开html,找到\<table>...\</table>标签下的内容,复制到Markdown编辑器内。
5、表格即完成了Markdown的转换。
参考文献:
HTML <td> 标签的 rowspan 属性
html设置单元格背景颜色
Markdown表格合并单元格
让Markdown支持复杂表格
尊重别人的劳动成果 转载请务必注明出处:https://blog.csdn.net/A___LEi/article/details/114012126