markdown合并单元格、设置单元格背景颜色和字体颜色_markdown表格颜色-程序员宅基地

技术标签: linux  HTML  其他  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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/A___LEi/article/details/114012126

智能推荐

c# 调用c++ lib静态库_c#调用lib-程序员宅基地

文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib

deepin/ubuntu安装苹方字体-程序员宅基地

文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang

html表单常见操作汇总_html表单的处理程序有那些-程序员宅基地

文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些

PHP设置谷歌验证器(Google Authenticator)实现操作二步验证_php otp 验证器-程序员宅基地

文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器

【Python】matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距-程序员宅基地

文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距

docker — 容器存储_docker 保存容器-程序员宅基地

文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器

随便推点

网络拓扑结构_网络拓扑csdn-程序员宅基地

文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn

JS重写Date函数,兼容IOS系统_date.prototype 将所有 ios-程序员宅基地

文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios

如何将EXCEL表导入plsql数据库中-程序员宅基地

文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql

Git常用命令速查手册-程序员宅基地

文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...

分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120-程序员宅基地

文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120

【C++缺省函数】 空类默认产生的6个类成员函数_空类默认产生哪些类成员函数-程序员宅基地

文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数

推荐文章

热门文章

相关标签