第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)
江山如画的头像江山如画管理团队
第12课:页面布局(CSS)
上一篇 2018年1月19日 下午7:34
第10课:表格
下一篇 2018年1月19日 下午7:56

99%的人还看了以下文章

  • 第8课:组织元素(span和div)

    pan和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。 在这一课中,我们将进一步探究span和div的用法,因为这两个HTML元素对于CSS是很重要的。 用span组织元素 用div组织元素 用span组织元素 span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本…

    2020年2月25日
    9.8K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    9.8K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    18.0K0
  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    15.7K0
  • 第11课:边框(border)

    边框(border)可以有多种用途,比如作为装饰元素或者作为划分两物的分界线。在设置边框方面,CSS为你提供了无尽选择。border-widthborder-colorborder-style 边框宽度[border-width] 边框宽度由CSS属性border-width定义,其值可以是“thin”(薄)、“medium”(普通)或“thick”(厚)等…

    2020年2月25日
    6.4K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    9.7K0

发表回复

登录后才能评论