手写html表格熟练度练习
table中的colspan和rowspan
经常手写表格时 查半天的两个属性，记下来
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="GBK" />
<style>
.tableStyle1 table td
{
border:1px solid #ff8866;
background:#FFFFFF;
}
.tableStyle1 table
{
height:50px; float:left;
background:#eeeeee;
} .tableStyle table td
{
border:1px solid #ff8866;
float:right;
}
.tableStyle table
{
height:50px; float:left;
}
</style>
</head>
<body > <div class="tableStyle1" style="width:100%; text-align: center; border:1px solid #778899;">
<div style="width:1%; float:left; height:5px;"></div>
<div style="float:left"> <table style="width:120px;text-align:center; border:1px solid #ff8866;">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td colspan="3"> 1</td>
</tr>
<tr>
<td> 1</td>
<td rowspan="2"> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
</tr>
<tr>
<td rowspan="2" > 1</td>
</tr>
<tr>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td rowspan="2" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td> 1</td>
</tr>
<tr>
<td rowspan="2" > 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td rowspan="2" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table>
<table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="15" rowspan="5"> 1</td>
<td rowspan="15" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table>
<div> <div class="tableStyle" style="width:100%; text-align: center; border:1px solid #778899;">
<div style="width:1%; float:left; height:5px;"></div>
<div style="float:left"> <table style="width:120px;text-align:center; border:1px solid #ff8866;">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td colspan="3"> 1</td>
</tr>
<tr>
<td> 1</td>
<td rowspan="2"> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
</tr>
<tr>
<td rowspan="2" > 1</td>
</tr>
<tr>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td rowspan="2" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td> 1</td>
</tr>
<tr>
<td rowspan="2" > 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table> <table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="2" rowspan="3"> 1</td>
<td rowspan="2" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table>
<table style="width:120px;text-align:center; border:1px solid #ff8866; ">
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td colspan="15" rowspan="5"> 1</td>
<td rowspan="15" > 1</td>
</tr>
<tr>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
<tr>
<td> 1</td>
<td> 1</td>
<td> 1</td>
<td> 1</td>
</tr>
</table>
<div>
</div>
<footer>
</footer>
</body>
</html> <!-------------
得出以下总结
colspan 合并同行单元格 用多列属性
这个简单点 即 在同列标签内保留 第一对td 标签 colspan 属性设为合并后的单元格的跨列数
rowspan 合并同列单元格 用多行属性
这个复杂点 其实也是一样 将要合并的单元格保留第一对 ，不过呢，在删除的时候是删除下一个tr 中的td html 不管其它他是从左到右一个个找tr 然后 找td 如果找到单元格的 colspan rowspan属性 就扩展开，如果下行为空则少扩展一格
然后 继续找下一个 简单的说就是html是按td 逐个填充
找到单元格td的 colspan 属性时 会去确认有没有 tr 及 tr是否为空，只有存在不为空的tr（里面有td的tr）时才向纵向方向展开一个空间 找到单元格td的 rowspan 属性时 不管如何都会向横向展开一个单元格的横向空间 td init x定位是以实际己占空间最后位置开始，y轴定位是以单元格所在的tr 是第几个tr（在数第几时忽略没有装有td的tr）* 单元格高度
重复这个过程直到 所有td init 所以不正确的设置可能会造成 x轴不对齐 但不会出现y轴不对齐。
（按默认的不会，但将td设为 飘浮时会在这个基础之上改变,飘浮时扩展大小将失效，其余按盒子模）
------------------->
手写html表格熟练度练习的更多相关文章
- 放弃antd table，基于React手写一个虚拟滚动的表格
缘起 标题有点夸张,并不是完全放弃antd-table,毕竟在react的生态圈里,对国人来说,比较好用的PC端组件库,也就antd了.即便经历了2018年圣诞彩蛋事件,antd的使用者也不仅不减,反 ...
- 【机器学习】BP神经网络实现手写数字识别
最近用python写了一个实现手写数字识别的BP神经网络,BP的推导到处都是,但是一动手才知道,会理论推导跟实现它是两回事.关于BP神经网络的实现网上有一些代码,可惜或多或少都有各种问题,在下手写了一 ...
- [纯C#实现]基于BP神经网络的中文手写识别算法
效果展示 这不是OCR,有些人可能会觉得这东西会和OCR一样,直接进行整个字的识别就行,然而并不是. OCR是2维像素矩阵的像素数据.而手写识别不一样,手写可以把用户写字的笔画时间顺序,抽象成一个维度 ...
- Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 讯飞科大 语音云.docx \Atitit 代码托管与虚拟主机.docx \Atitit 企业文化 每日心灵 鸡汤 值班 发布.docx \Atitit 几大研发体系对比 Stage-Gat
Atitit s2018.2 s2 doc list on home ntpc.docx \Atiitt uke制度体系 法律 法规 规章 条例 国王诏书.docx \Atiitt 手写文字识别 ...
- KNN识别手写数字
一.问题描述 手写数字被存储在EXCEL表格中,行表示一个数字的标签和该数字的像素值,有多少行就有多少个样本. 一共42000个样本 二.KNN KNN最邻近规则,主要应用领域是对未知事物的识别,即判 ...
- UI到底应该用xib/storyboard完成，还是用手写代码来完成？
UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 ...
- 手写node可读流之流动模式
node的可读流基于事件 可读流之流动模式,这种流动模式会有一个"开关",每次当"开关"开启的时候,流动模式起作用,如果将这个"开关"设置成 ...
- css手写一个表头固定
Bootstrap,layui等前端框架里面都对表头固定,表格滚动有实现,偏偏刚入职的公司选择了手动渲染表格,后期又觉得表格数据拉太长想要做表头固定.为了避免对代码改动太大,所以决定手写表头固定 主要 ...
- Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述
挤一下: 一开始以为没有多少人用就没建群,但是加我的人太多了,好多问题都是重复的,所以建个群大家互相沟通交流方便点,但是建的有点晚,错过了好多人所以群里人有点少,QQ群: 157216616 小提示 ...
随机推荐
- spring中aop使用
AOP为Aspect Oriented Programming的缩写,意为:面向切面编程AOP采取横向抽取机制,取代了传统纵向继承体系重复性代码(性能监视.事务管理.安全检查.缓存) Spring的基 ...
- SpringXML方式配置bean的自动装配autowire
Spring的自动装配,也就是定义bean的时候让spring自动帮你匹配到所需的bean,而不需要我们自己指定了. 例如: User实体类里面有一个属性role 1 2 3 4 5 6 7 publ ...
- ide 下spingboot 实现热部署
需要从maven中下载devtools插件pom.xml:step1:修改pom.xml<dependencies><dependency><groupId>org ...
- 201621123006 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 多态.重载.继承.覆盖.super.抽象类 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. ...
- zhx'code1
void dandiao() { ,tail=; ;a<=k;a++) { ]) tail--; tail++; q[tail][]=z[a];q[tail][]=a; } ;a<=n;a ...
- 20165202 2017-2018-2 《Java程序设计》第8周学习总结
20165202 2017-2018-2 <Java程序设计>第8周学习总结 教材学习内容总结 Ch12 进程与线程 线程是比进程更小的单位,一个进程在其执行过程中,可以产生多个线程 Ja ...
- 基于视觉的 SLAM/Visual Odometry (VO) 开源资料、博客和论文列表
基于视觉的 SLAM/Visual Odometry (VO) 开源资料.博客和论文列表 以下为机器翻译,具体参考原文: https://github.com/tzutalin/awesome-vis ...
- Android常见问题——Genymotion无法启动问题
在官网下载了Genymotion和VirturalBox的合集安装之后启动模拟器的时候发现启动不了(默认下载,啥都没干),在网上找了一些方法,也没有解决,最后偶然看到一种方法才解决的,先看一下具体的问 ...
- Mininet python代码创建拓扑、交互式界面创建主机、交换机
python代码创建拓扑: from mininet.net importMininet net =Mininet() # Creating nodes in the network. c ...
- MPLS基础一(上)
在上图中,关于PC-A和PC-B之间互相访问的过程中 1.所有三层网络设备形成源和目的的路由条目 2.PC-A发出报文,source-IP为A,destination-IP为B 3.R1收到报文后,根 ...