html之colspan && rowspan讲解
1.colspan && rowspan均在td标签中使用
2.每个单元格大小一致的前提
<table border="1" bordercolor="red">
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
</table>
效果:
colspan属性代码:
<table border="1" bordercolor="red">
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td colspan="3">nokiacomputer</td>
</tr>
</table>
效果:
全面举例说明:
一行一列的表格:
<table>
<tr>
<td></td>
</tr>
</table>
一行两列的表格:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
一行三列的表格:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
两行一列的表格:
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
两行两列的表格:
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
有趣的现象:
<table border="1" bordercolor="red">
<tr>
<td rowspan="2">nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
</table>
效果:
而在第二行去掉一个<td>nokiacomputer</td>时 ,
代码如下:
<table border="1" bordercolor="red">
<tr>
<td rowspan="2">nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
<tr>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
<td>nokiacomputer</td>
</tr>
</table>
效果:
为什么多一列时会自动向后排?
多两列时会不会也是这样的?
效果:
果然如此!
html之colspan && rowspan讲解的更多相关文章
- IE下默认TD colspan rowspan值为1
IE下默认TD colspan rowspan值为1,即使这个TD没有合并没有rowspan,colspan属性,其值都为1,chrome下正常. 判断是否rowspan colspan为TD.get ...
- table表格中的 colspan rowspan cellpadding cellspacing
横跨两列的单元格: colspan 属性规定单元格可横跨的列数 colspan="2" <table border="1"> <tr> ...
- jQuery Table2CSV插件(表格转CSV) 完美支持colspan和rowspan
table2csv:将表格转化为csv数据 参数:一个JSON对象 { 'repeatChar':'拆分单元格填充字符', //默认为null则将单元格值填充到拆分的每个单元格中,如果给定字符串则用给 ...
- C# Html格式内容转Csv内容包括table(重点在rowspan和colspan合并),p,div元素
Html格式内容转Csv内容,包括table(重点在rowspan和colspan合并),p,div元素,table不能包含嵌套功能. /// <summary> /// Html格式内容 ...
- <table>标签总结(colspan跨列 ,rowspan跨行)
table标签有些内置属性要设置: <table cellpadding="0" cellspacing="0" border="0" ...
- 全面系统讲解CSS工作应用+面试一步搞定
[TOC] 一.课程介绍 二.HTML基础强化 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下元素) * meta * title * style * link * ...
- 冰冻三尺非一日之寒--web来了
第十四章 html css 1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. H ...
- Windows Community Toolkit 3.0 - UniformGrid
概述 UniformGrid 控件是一个响应式的布局控件,允许把 items 排列在一组均匀分布的行或列中,以填充整体的可用显示空间,形成均匀的多个网格.默认情况下,网格中的每个单元格大小相同. 这是 ...
- Python 21 Django 实用小案例1
实用案例 验证码与验证 KindEditor 组合搜索的实现 单例模式 beautifulsoup4 验证码与验证 需要安装Pillow模块 pip stall pillow ...
随机推荐
- 画画板--第三方开源--DrawableView
Android上的第三方开源DrawableView支持手写,类似于写字板.DrawableView支持改变画笔颜色,画笔线条粗细,画布的手势缩放和拖曳显示部分区域.并最终支持将手绘的图保存到本地.在 ...
- Learning Scrapy笔记(零) - 前言
我已经使用了scrapy有半年之多,但是却一直都感觉没有入门,网上关于scrapy的文章简直少得可怜,而官网上的文档(http://doc.scrapy.org/en/1.0/index.html)对 ...
- 创业日记-关于学习Python
2015年7月2日 深圳 阴天 学习Python有一个月了,总整感觉Python是一个比较小而灵活的语言. 为什么要学习Python 今年我已入行有9年了,一直在写C#,关于微软的集成环境也用的比较顺 ...
- 在openSUSE13.2上gem install rails -v 4.1成功,但是之后不存在rails命令解决
解决方案为,不要用sudo gem install就好了,卧槽
- 转载:监控每个节点(jvm部分)
操作系统和进程部分 操作系统和进程部分的含义是很清楚的,这里不会描述的很详细.他们列出了基本的资源统计,例如CPU和负载.操作系统部分描述了整个操作系统的情况,进程部分只是描述了Elasticsear ...
- JVM学习总结五——性能监控及故障处理工具
之前扯了四篇理论,这一篇终于可以动动手了.本篇我们将介绍JVM常用的一些工具,这些工具将是我们监控JVM状态.处理故障和调优分析的利器. 不过在开始之前,我还是要先车扯两句:工具终归只是帮助我们我们处 ...
- 转:CentOS 7 安装Nginx
一.准备工作: 1.安装必备工具: ? 1 2 3 $ yum -y install gcc gcc-c++ autoconf automake $ yum -y install zlib zli ...
- 最近对python颇有兴趣
因为最近租的房子到期了,于是在豆瓣小组找房子,萌生利用python爬虫去抓取小组的房源信息. 最近2个小玩意准备做一下,mark 一下 1.豆瓣租房小组Python爬虫抓取 2.51job 职位抓取
- 元音字母A的发音规则
摘抄自百度文库 A/a的发音比较复杂,归纳起来有10种情况: 一.在重读开音节中读[ei]. 例如: plane [plein] radio [ˈreidiəu] wake [weik] pape ...
- 利用FormsAuthentication.RedirectFromLoginPage进行身份验证
web.config中: <authentication>节 格式: <authentication mode="Forms"> //I.Window ...