手写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 小提示 ...
随机推荐
- HTML5页面，用JS 禁止弹出手机键盘
用户点击input的时候: 会默认调出手机软键盘: 场景:文本框获取焦点时,需要禁止手机弹出自带的输入键盘: 解决方案1: 用一个p/div等标签显示内容:然后放一个隐藏的input: (可能的场景: ...
- 添加git 忽略文件
在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交. Git 忽略文件提交的方法 有三种方法可以实现忽略Gi ...
- 那如何判断页面是在移动端还是PC端打开的
网上有很多方法,写的或难或简单,实际上一行代码就够了. window.location.href = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navi ...
- tsl/ssl 证书制作记录
生成自签名证书 生成服务端秘钥 $ openssl genrsa -out server.key 1024 生成证书请求文件 编写配置文件openssl.cnf $ vi openssl.cnf [r ...
- LINUX系统下的数据库的管理
环境:配置好IP和YUM源 一.数据库的安装及密码的修改 [1]yum install mariadb-server -y ##安装mariadb数据库 [2]systemctl ...
- Android 和 Dagger 2 中的依赖注入
原文:Dependency Injection in Android with Dagger 2 作者:Joe Howard 译者:kmyhy 在现代开发团队中到处充斥着"你一定要用依赖注入 ...
- [Python] re正则表达式指南以及常用操作
一.语法 1. 使用正则表达式进行匹配的流程 2. Python支持的正则表达式元字符和语法 参考: AstralWind的Python正则表达式指南 官方文档:7.2. re — Regular e ...
- C++ 项目经验总结：程序严谨性（一)
作者:JK 时间:2015/09/24 特别说明:版权所有,转载请注明出处: 最近笔者在参与项目时,遇到了一些很奇特的问题,程序运行正常,产生的结果异常,程序功能是对当天的数据进行统计,数据里有可能有 ...
- c语言符号常量与常变量的区别？
<blockquote>定义符号常量:#define PI 3.1415926 //注意后面没有分号 定义常变量 :const float PI=3.1415 ...
- 2019ICPC南昌邀请赛网络赛 I. Max answer (单调栈+线段树/笛卡尔树)
题目链接 题意:求一个序列的最大的(区间最小值*区间和) 线段树做法:用单调栈求出每个数两边比它大的左右边界,然后用线段树求出每段区间的和sum.最小前缀lsum.最小后缀rsum,枚举每个数a[i] ...