第11课:表格的高级特性

表格还有哪些相关属性?

colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数例1:

<table border="1">
<tr><td colspan="3">单元格1</td></tr>
<tr><td>单元格2</td><td>单元格3</td><td>单元格4</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1
单元格2 单元格3 单元格4

该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“2”,则该单元格将只跨越两列,于是有必要在第一行插入另外一个单元格,以确保两行占据相同的列数。 例2:

<table border="1">
<tr><td colspan="2">单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1 单元格2
单元格3 单元格4 单元格5

rowspan是什么?

可能你已经猜到,rowspan的作用是指定单元格纵向跨越的行数例3:

<table border="1">
<tr><td rowspan="3">单元格1</td><td>单元格2</td></tr>
<tr><td>单元格3</td></tr><tr><td>单元格4</td></tr>
</table>

该例在浏览器中将显示如下:

单元格1 单元格2
单元格3
单元格4

上例中的单元格1,其rowspan被设为“3”,这表示该单元格必须跨越三行(本身一行,加上另外两行)。因此,单元格1和单元格2在同一行,而单元格3和单元格4形成独立的两行。
感觉有些迷糊?这确实比较复杂,而且容易出错。因此,在进行HTML编码之前,你最好先在纸上把表格设计好。
明白了?那么你就自己试着用colspan和rowspan来创建几个表格吧。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/472.html

(2)
江山如画的头像江山如画管理团队
上一篇 2018年1月19日 下午7:34
下一篇 2018年1月19日 下午7:56

99%的人还看了以下文章

  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    2.6K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    5.0K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    3.7K0
  • CSS进阶,4个案例入门,学会LESS使用

    Less 简介 什么是LESSCSS LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。 Less语言特性 LESS的变量 变量允许我们单独定义一系列通用的样式…

    2019年7月17日
    2.1K0
  • vue学习v-on:click绑定HTML的单击事件

    v-on:click缩写为@click <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>125jz.com-vue</title> <script src=”js/vue.js” type=”text/ja…

    2020年6月14日
    3.4K0
  • CSS实现段落首字下沉效果的2种方法

    CSS实现段落首字下沉效果方法一 在CSS布局中,通过设置首字的大小并向左浮动,从而使得首字与其他字符区别;通过右边距控制首字与其他字符的距离。 #first{font-size:3em; font-weight:bold; float:left; margin-right:20px; } <p><span id=”first”>云&…

    2019年4月2日
    12.0K0

发表回复

登录后才能评论