手写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 小提示 ...
随机推荐
- Java复习11. 单例编程
Java复习11. 单例编程 1.最简单的写法,那个方式是线程不安全的 public class Singleton { private static Singleton instance; ...
- Java进阶7 并发优化2 并行程序设计模式
Java进阶7 并发优化2 并行程序设计模式20131114 1.Master-worker模式 前面讲解了Future模式,并且使用了简单的FutureTask来实现并发中的Future模式.下面介 ...
- JS之BOM和DOM(来源、方法、内容、应用)
1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...
- ZOJ 2975 Kinds of Fuwas（暴力+排列组合）
Kinds of Fuwas Time Limit: 2 Seconds Memory Limit: 65536 KB In the year 2008, the 29th Olympic ...
- COW写时复制
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 有关php的session
From:http://blog.csdn.net/sayigood/article/details/4850480 php中session的用法 PHP中的session默认情况下是使用客户端的Co ...
- Django项目的ORM操作之--数据模型类创建
在django项目中,其自带了ORM(Object Relation Mapping)对象关系映射框架,我们在django项目下app的models模块下对类进行操作,通过ORM会将我们对类的操作转化 ...
- Android 图片压缩各种方式
前言:由于公司项目当中需要用到压缩这块的相应技术,之前也做过的图片压缩都不是特别的理想, 所以这次花了很多心思,仔细研究和在网上找到了很多相对应的资料.为了就是 以后再做的时候直接拿来用就可以了 ...
- ElasticSearchRepository和ElasticSearchTemplate的使用
Spring-data-elasticsearch是Spring提供的操作ElasticSearch的数据层,封装了大量的基础操作,通过它可以很方便的操作ElasticSearch的数据. 版本说明 ...
- HAWQ + MADlib 玩转数据挖掘之（一）——安装
一.MADlib简介 MADlib是Pivotal公司与伯克利大学合作的一个开源机器学习库,提供了精确的数据并行实现.统计和机器学习方法对结构化和非结构化数据进行分析,主要目的是扩展数据库的分析能力, ...