手写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 小提示 ...
随机推荐
- linux下网卡配置vlan
yum install vconfig -y modprobe 8021qvconfig add eth0 900 ifconfig eth0.900 172.16.90.57/24 up ...
- 高射炮打蚊子丨在VS 2017里用C语言写经典的冒泡排序
上一期<高射炮打蚊子丨用Visual Studio 2017写最初级的C语言程序>中,我们用Visual Studio “全宇宙最强IDE”这门大炮,打了“C语言写Hello World ...
- sql杂记
Create procedure 存储过程的声明 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P 通俗简单的说:PIVOT就是行转列,UNPIVOT就是列传行 ...
- cscope使用记录
在看c的源码过程中,仅仅使用ctags不够用,加入cscope会好一点,关于vim的配置就不多说了,在这里主要是记录常用的几个东西: 在代码的最顶层执行: cscope -Rbkq 打开vim: cs ...
- GridView 控制默认分页页码间距 及字体大小
GridView 控制默认分页页码间距 及字体大小 PagerCss TD A:hover { WIDTH: 20px; COLOR: black; padding-left: 4px; paddin ...
- Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本
Shell 命令行实现将一个站点页面全部下载到本地并替换其中链接的脚本 不知道为什么,我总想用 Shell 脚本来实现把一个站点内容给下载下来.但是下载什么站点我确不知道.今天尝试了一下利用 curl ...
- chrome 55 zepto tap事件出错？
刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undef ...
- Chrome调试javacript禁止缓存
/********************************************************************* * Chrome调试javacript禁止缓存 * 说明: ...
- 去除inline-block元素间间距的N种方法(转)
一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...
- BJOI 模拟赛 #3 题解
T1 一个网格,每个点有权值,求有多少条路径权值乘积不小于 $n$ $R,C \leq 300, n \leq 10^6$ sol: 暴力 dp 是 $O(R \times C \times n)$ ...