手写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 小提示 ...
随机推荐
- python面试题包含基础和Linux操作以及数据库相关
今天面试了一家公司,感觉表现的不是很好,记录一下面试的试题. python基础部分 python 是一门什么样的语言面向对象的语言有那些,python的面向对象和Java面向对象的区别 Python是 ...
- Java 进阶7 并发优化 1 并行程序的设计模式
本章重点介绍的是基于 Java并行程序开发以及优化的方法,对于多核的 CPU,传统的串行程序已经很好的发回了 CPU性能,此时如果想进一步提高程序的性能,就应该使用多线程并行的方式挖掘 CPU的 ...
- 【小米oj】找出单独的数字
题目链接:https://code.mi.com/problem/list/view?id=2&cid=0&sid=26251#codearea 描述 给出N个数字.其中仅有一个数字出 ...
- hdu 6038 Function
Function Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total ...
- 使用Apache的ab工具进行网站性能测试
Apache服务器自带了ab压力测试工具,可以用来测试网站性能,使用简单方便. ab 的用法是:ab [options] [http://]hostname[:port]/path 例如:ab -n ...
- Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩. 这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有mo ...
- [置顶]
kubernetes1.8发布跟踪
一.Kubernetes发布历史回顾 1. Kubernetes 1.0 - 2015年7月发布 2. Kubernetes 1.1 - 2015年11月发布 3. ...
- Android敏捷开发、CI（持续集成）探究
比较老的几篇文章,依旧有学习价值 http://blog.csdn.net/baodinglaolang/article/details/9530695 http://blog.csdn.net/ba ...
- HAWQ + MADlib 玩转数据挖掘之（五）——奇异值分解实现推荐算法
一.奇异值分解简介 奇异值分解简称SVD(singular value decomposition),可以理解为:将一个比较复杂的矩阵用更小更简单的三个子矩阵的相乘来表示,这三个小矩阵描述了大矩阵重要 ...
- 【剑指offer】11--旋转数组的最小数字（二分查找）
原创博文,转载请注明出处! # 本文是牛客网<剑指offer>刷题笔记 1.题目 旋转数组的最小数字:输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1 ...