8.2　跨多行、多列表元

当表格中的单元格有相同的或者需要设置相同的内容时，需要设置单元格合并，合并可以为不同行的单元格，也可以为不同列的单元格，在网页中可以来设置不同的单元格合并，所表现的效果与Word中的表格一样。

在表格中有时会合并单元格，所以对表格要进行跨行或跨列处理，使多个表元合成一个单元格。跨表元分跨多行和跨多列，包括跨表头th和表元td，跨行用rowspan表示，同理，跨列用colspan表示，下面分别对它们详细介绍。

跨多行表元应用在合并多行单元格时，跨多行表元语法是在th和td上加rowspan表示，rowspan后面的值是数字，数字表示跨多少行表元，如跨3行表元表示如下。

＜！—设置表格中的跨多行—＞

＜th rowspan=3＞＜/th＞

或者如下表示。

＜！—设置表格中td的跨多行—＞

＜td rowspan=3＞＜/td＞

这就表示跨越3行显示，为了表达出效果是跨行的，可从多行多列表格中实践跨多行表元用法。代码8.2表示的是跨多行表元用法。

代码8.2　源代码\第8章\跨多行表元.html

——————————————文件名：跨多行表元.html——————————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞跨多行表元＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜！—设置表格—＞

07 ＜table border="1"width="300"＞

08 ＜！—设置表格的行—＞

09 ＜tr＞

10 ＜！—设置表格中的表项和跨多行—＞

11 ＜td rowspan=3＞1＜/td＞＜td＞2＜/td＞＜td＞3＜/td＞＜td＞4＜/td＞

12 ＜/tr＞

13 ＜！—以下都是设置表格行和表项—＞

14 ＜tr＞

15 ＜td＞2＜/td＞＜td＞3＜/td＞＜td＞4＜/td＞

16 ＜/tr＞

17 ＜tr＞

18 ＜td＞2＜/td＞＜td＞3＜/td＞＜td＞4＜/td＞

19 ＜/tr＞

20 ＜tr＞

21 ＜td＞1＜/td＞＜td＞2＜/td＞＜td＞3＜/td＞＜td＞4＜/td＞

22 ＜/tr＞

23 ＜/table＞

24 ＜/body＞

25 ＜/html＞

【代码解析】代码8.2表示一个四行四列的表格，代码第11行是第一列，设置rowspan为3，表示在本列跨3行，其他的表元往后推，效果如图8.2所示。

图　8.2　跨多行表元

注意　当出现rowspan时，所包含的列数并不需要与rowspan所在列数一致，如果一致，会导致列往右移。