markdown合并单元格、设置单元格背景颜色和字体颜色

一、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>

效果:

成绩单
姓名语文数序英语物理化学
8284878677
8284878677
姓名物理
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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值