rowspan table布局_table中colspan和rowspan的用法详解
在web开发的过程中,我们常常会使用table来布局页面。利用table布局,往往不可避免的需要使用到跨列和跨行。本文通过实例为您介绍table中colspan和rowspan的用法。
我们来看看colspan和rowspan这两个属性。colspan
属性规定单元格可横跨的列数,rowspan属性规定单元格可占据的行数。这两个属性通常在th和td标签上面使用。
首先我们来看一下跨列的用法。下面给出了一段最基本的table表格的代码,没有使用跨行和跨列。
1
2
3
4
5
6
<td>td>
7
tr>
8
<tr>
9
<td>td>
10
<td>td>
11
<td>td>
12
<td>td>
13
tr>
14
<tr>
15
<td>td>
16
<td>td>
17
<td>td>
18
<td>td>
19
tr>
20
table>
我们可以看到,每一对tr中的td标签都是相同的。在没有使用colspan属性的情况下,如果每一组tr(每一行)中的td标签不对等,就会出现如下图所示的情况。
第二行中由于笔者故意少写了两对td表格,因此我们可以看出这行中就出现了两个单元格的空白。这是很低级的错误。
由此可见,每组tr中的单元格数目对等是很重要的。
那么,假如我确实只需要第二行出现两个单元格,怎么办呢?这时候我们就需要使用colspan属性了。
我们看一下正常的一行一共有4对td,即4个单元格。而第二行只写了两对td,因此我们需要使用colspan进行补全。设置对应的td中的colspan=‘3’,我们得到下面的显示效果:
为什么使用colspan=’3′?这里简单解释一下,原理很简单:
因为我们上面已经提出了,需要每一组tr中的td数目是对等的,因此
等同于。
关于colspan的用法只介绍这么多了,别的其实也没什么。再怎么复杂的页面也都是可以使用多个colspan组合来进行排版。
接下来再来解释一下rowspan的用法。
rowspan表示某一组td标签(一个单元格)可以占据多行。这个属性在很多情形下是很有用的。比如在数据表格中,同一个日期可能会对应多条结果,我们可能只需要日期出现一次。如下图所示:
我们来详细分析一下该效果的html代码:
1
<table>
2
<tr>
3
<td
width="200">时间td>
4
<td
width="300">结果td>
5
tr>
6
<tr>
7
<td
rowspan="4"
valign="top">20100518td>
8
<td>1td>
9
tr>
10
<tr>
11
<td>2td>
12
tr>
13
<tr>
14
<td>3td>
15
tr>
16
<tr>
17
<td>4td>
18
tr>
19
table>
我在第二组tr中的第一对td上使用了rowspan=’4′,即表示该单元格将占据4行的位置。这是很好理解的,需要占几行就使用rowspan等于几。
也许难以理解的是接下来的几组tr中的td。为什么每一行只有一对td?
还记得我们前面说过每行中的td数目必须对等吗?观察上面的代码,我们不难发现,一个正常的行(tr)一共包含两个单元格,即两组td。也就是说上述代码中的每组tr标签中的td数目应该是两对。
由于我们在第二组tr中的第一个td使用了rowspan属性,也就是说该单元格占据了多行位置。那么接下来的相应的行数的对应单元格就不需要再通过td表示了。
比如说第三行(代码中的第三组tr),由于这一行的第一个单元格被第二行的第一个单元格占掉了,那么结果呢?结果就是这一行只剩下一个单元格的位置了。因此我们在接下来的几组tr中只写了一对td标签。
在web项目开发过程中灵活使用colspan和rowspan,不仅可以是页面布局更加整洁,而且可以使得代码更简洁、明朗。
rowspan table布局_table中colspan和rowspan的用法详解相关推荐
- mysql identity sql_SQL Server中identity(自增)的用法详解
一.identity的基本用法 1.含义 identity表示该字段的值会自动更新,不需要我们维护,通常情况下我们不可以直接给identity修饰的字符赋值,否则编译时会报错 2.语法 列名 数据类型 ...
- python的raw_ input是什么意思-对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- python中str和input_对python中raw_input()和input()的用法详解
最近用到raw_input()和input()来实现即时输入,就顺便找了些资料来看,加上自己所用到的一些内容,整理如下: 1.raw_input() raw_input([prompt]) -> ...
- js数组中foEach和map的用法详解 jq中的$.each和$.map
数组中foEach和map的用法详解 相同点: 1.都是循环遍历数组(仅仅是数组)中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项value, ...
- 教程-Delphi中Spcomm使用属性及用法详解
Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...
- python3 isinstance用法_对python中assert、isinstance的用法详解
1. assert 函数说明: Assert statements are a convenient way to insert debugging assertions into a program ...
- python中tile的用法_python3中numpy函数tile的用法详解
tile函数位于python模块 numpy.lib.shape_base中,他的功能是重复某个数组.比如tile(A,n),功能是将数组A重复n次,构成一个新的数组,我们还是使用具体的例子来说明问题 ...
- python中mat函数_Python中flatten( )函数及函数用法详解
flatten()函数用法 flatten是numpy.ndarray.flatten的一个函数,即返回一个一维数组. flatten只能适用于numpy对象,即array或者mat,普通的list列 ...
- python中seek(10、1)_Python中index()和seek()的用法(详解)
1.index() 一般用处是在序列中检索参数并返回第一次出现的索引,没找到就会报错,比如: >>> t=tuple('Allen') >>> t ('A', 'l ...
最新文章
- 各种字符串分拆处理函数.sql
- 抗日战争时期的陈建功和苏步青
- Navicat Premium 安装
- 怎样把ACCESS导入SQL数据库
- java图片色阶调整、亮度调整
- Oracle函数登录验证,Oracle密码验证函数与Create Profile
- 【L298N 驱动电机的线路连接图】
- 用Java实现md5加密
- canvas实现圆饼图,柱状图,折线图(满满的干货)
- aplay与call
- 云计算与虚拟化的区别
- java 写服务器向客户端发送消息,java服务器向客户端发送消息
- 作为一名程序员未来的出路究竟在哪里?
- python[爬虫]爬取百万条新浪新闻 新浪滚动新闻中心(多进程)
- RGB颜色转换16进制
- 如何解决win10语言栏消失变成空白问题
- 总体设计和数据库设计
- 200道物理学难题——001 三只蜗牛
- 使用Canal同步数据到ES
- 转栅格后的nodata怎么调色_还在熬夜建模栅格?SU已经一键生成啦
热门文章
- 易语言字节集转php,易语言将下载地址解析转换成迅雷快车旋风的方法
- 培训机构小程序功能分析
- 服务器怎么创建硬盘,超微主板怎么创建RAID磁盘阵列 服务器组建RAID0、RAID1图文教程...
- 大厂人脸识别技术100%失灵!道翰天琼认知智能机器人平台API接口大脑为您揭秘。
- 在delphi下生成二维码
- 爬虫—01-爬虫原理与数据抓取
- hdu 1584 蜘蛛牌(bfs+set)
- 涂鸦蓝牙SDK开发系列教程——6.固件升级
- 高通“SA8540P+SA9000P”组合正式上线,背后是更大的跨域赛道
- xp系统打印机服务器报错,XP系统打印机问题.pdf