(HTML跨多行跨多列的表格
HTML跨多行跨多列的表格上节所示的表格比较简单,如果我要插入一张图片,并且要占4个单元的空间,那怎么办?这就要用到跨多行跨多列的表格,本节就开始讲解如何实现把多个单元格合并成一个单元格。
网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。
一、什么是跨多行跨多列的表格
有时可能要将多行或多列合并成一个单元格,即可以创建跨多列的行,或创建跨多行的列。colspan属性用于创建跨多列的单元格,rowspan属性用于创建跨多行的单元格。要实现如图1所示的跨多行跨多列表格,怎么办?不急,我们先来看看跨多列的表格是如何实现的。
图1 ?跨多行跨多列的表格?
二、跨多列的表格
跨多列的表格是单元格在水平方向上跨多列。
语法:
创建跨多列的表格基本语法:
单元格内容 |
下面通过示例1来说明colspan这一属性的用法。
示例1:
跨多列的表格学生成绩表 |
??? ?
? ??? 英语??? 数学??? 语文? ? ??? 95??? 98??? 89?这里,将第一行单元格在水平方向上所跨的列数设为3,因为表格共包括3列,所以第一行只有一个单元格,运行效果如图2所示。跨多列表格已经实现了,下面我们想想如何实现跨多行的表格?
图2 跨多列的表格
三、跨多行的表格
单元格除了可以在水平方向上跨列,还可以在垂直方向上跨行,跨多行的表格是单元格在垂直方向上跨多行。WANGYEXX.COM
语法:
创建跨多行的表格基本语法:
单元格内容 |
示例2:
跨行表格早餐菜谱 | 食物 | 鸡蛋 |
饮料 | 牛奶 | |
甜点 | 开心粉 |
这里,由于第一行第一个单元格垂直跨了3行,还剩2个单元格,因此在接下来的两行都只有2个单元格,运行效果如图3所示。
图3 跨多行的表格
四、如何创建跨多行跨多列的表格
创建了跨多列的表格,也创建了跨多行的表格,但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格,那将如何实现?这要说简单真的很简单,说难还真的不容易,下面我们就以示例3和示例4来说明如何创建跨多行跨多列的表格。
示例3:
跨多行多列表格1手机充值、IP卡 | 办公设备、文具 | |
各种卡的总汇 | 铅笔 | 彩笔 |
打印 | 刻录 |
示例3在浏览器中运行的结果如图4所示。在创建如图2.9所示的表格时,应先创建表格标 签
;然后在表格标签里创建行标签…,这里一共创建 了3行;最后在每行里创建列标签…,并设置跨多行跨多列的属性,即可实现跨多行跨多列的表格。