如果我要插入一张图片，并且要占4个单元的空间，那怎么办?这就要用到跨多行跨多列的表格，本节就开始讲解ｈｔｍｌ跨多行跨多列表格教程。

一、什么是跨多行跨多列的表格

有时可能要将多行或多列合并成一个单元格，即可以创建跨多列的行，或创建跨多行的列。colspan属性用于创建跨多列的单元格，rowspan属性用于创建跨多行的单元格。要

实现如图1所示的跨多行跨多列表格，怎么办?不急，我们先来看看跨多列的表格是如何实现的。

图1　　跨多行跨多列的表格

二、跨多列的表格

跨多列的表格是单元格在水平方向上跨多列。

语法：

创建跨多列的表格基本语法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨列数＂＞单元格内容＜／ＴＤ＞

下面通过示例1来说明colspan这一属性的用法。

示例１：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂３＂＞学生成绩表＜／ＴＤ＞

英语

数学

语文

95

98

89

这里，将第一行单元格在水平方向上所跨的列数设为3，因为表格共包括3列，所以第一行只有一个单元格，运行效果如图2所示。跨多列表格已经实现了，下面我们想想如何实现跨多行的表格?

图2　跨多列的表格

三、跨多行的表格

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。

语法：

创建跨多行的表格基本语法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨行数＂＞单元格内容＜／ＴＤ＞

示例２：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞早餐菜谱＜／ＴＤ＞

食物

鸡蛋

饮料

牛奶

甜点

开心粉

这里，由于第一行第一个单元格垂直跨了3行，还剩2个单元格，因此在接下来的两行都只有2个单元格，运行效果如图3所示。

图3　跨多行的表格

四、如何创建跨多行跨多列的表格

创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格，那将如何实现?这要说简单真的很简单，说难还真的不容

易，下面我们就以示例3和示例4来说明如何创建跨多行跨多列的表格。

示例３：

手机充值、IP卡

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞办公设备、文具＜／ＴＤ＞

＜ＴＤ　ｒｏｗｓｐａｎ＝＂２＂＞各种卡的总汇＜／ＴＤ＞　　　　铅笔

彩笔

打印

刻录

示例3在浏览器中运行的结果如图4所示。在创建如图2.9所示的表格时，应先创建表格标签…

;然后在表格标签里创建行标签…，这里一共创建了3行;最后在每行里创建列标签…，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。

图4　跨多行多列表格1

示例４：

这里，将第一行单元格在水平方向上所跨的列数设为3，因为表格共包括3列，所以第一行只有一个单元格，运行效果如图2所示。跨多列表格已经实现了，下面我们想想如何实现跨多行的表格?

图2　跨多列表格

三、跨多行的表格

单元格除了可以在水平方向上跨列，还可以在垂直方向上跨行，跨多行的表格是单元格在垂直方向上跨多行。

语法：

创建跨多行的表格基本语法：

＜ＴＤ　ｃｏｌｓｐａｎ＝＂所跨行数＂＞单元格内容＜／ＴＤ＞

示例２：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞早餐菜谱＜／ＴＤ＞

食物

鸡蛋

饮料

牛奶

甜点

开心粉

这里，由于第一行第一个单元格垂直跨了3行，还剩2个单元格，因此在接下来的两行都只有2个单元格，运行效果如图3所示。

图3　跨多行的表格

四、如何创建跨多行跨多列的表格

创建了跨多列的表格，也创建了跨多行的表格，但是在有些情况下要在一张表中既有跨多行又有跨多列的单元格，那将如何实现?这要说简单真的很简单，说难还真的不容

易，下面我们就以示例3和示例4来说明如何创建跨多行跨多列的表格。

示例３：

手机充值、IP卡

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞办公设备、文具＜／ＴＤ＞

＜ＴＤ　ｒｏｗｓｐａｎ＝＂２＂＞各种卡的总汇＜／ＴＤ＞　　　　铅笔

彩笔

打印

刻录

示例3在浏览器中运行的结果如图4所示。在创建如图2.9所示的表格时，应先创建表格标签…

;然后在表格标签里创建行标签…，这里一共创建了3行;最后在每行里创建列标签…，并设置跨多行跨多列的属性，即可实现跨多行跨多列的表格。

图4　跨多行多列表格1

示例４：

＜ＴＤ　　ｒｏｗｓｐａｎ＝＂３＂＞产品名称＜／ＴＤ＞　　　　掌上电脑

彩音盒MP3

18克拉钻戒

＜ＴＤ　ｃｏｌｓｐａｎ＝＂２＂＞＜Ｐ＞欢迎光临本购物网站＜／Ｐ＞

示例4在浏览器中运行的结果如图5所示。大家可以试试修改rowspan和colspan属性值的大小，如果把rowspan和colspan的值改得过小，表格中会出现空白区域，这样会使表格的编辑变得困难，因此在设置表格时，要注意各行的单元格列数应相同。

图5　跨多行多列表格2

小经验：一般情况下在设置表格行和列的时候，为了保证在表格里不出现空白区域，可以将跨多列或跨多行的单元格看成多个单元格，而单元格的个数就是所跨的列数或行数，只要保证各行的单元格列数相同，就不会出现空白区域。

本节作业：

制作如下图网页。

以上就是精品学习提供的关于ｈｔｍｌ跨多行跨多列表格教程的内容，希望能够带给您帮助。