在表格制作中，常常要用到列合并与行合并的属性。下面是一个七行三列的表格，我们来观察一下列合并与行合并后的情况。
一、列合并： 下面的这个表格，第一行与第三行的三个单元格都合并为一个单元格了。从表格中，我们看得非常明显。那么，它们的代码又有什么变化呢？
这是表格的一套行标签<tr></tr>。前面的这个标签是首标签，后面的这个标签是尾标签（尾标签中有一条斜杆）。 这是表格的一套列标签<td></td>。前面的这个标签是首标签，后面的这个标签是尾标签（尾标签中有一条斜杆）。
其它行的代码，在一套行标签<tr></tr>中包裹着三套列标签<td></td>，也就是说，一行内有三个单元格。 而第一行与第三行，一套行标签<tr></tr>中包裹着一套列标签<td colSpan="3"></td>，也就是说，一行内只有一个单元格。不过，在列的首标签中，添加了一个属性：colSpan="3" 。colSpan是合并列的意思，“3”是指三列。colSpan="3"的意思就是把三列合并为一列，换句话来说，就是把竖向的三个单元格合并为一个单元格了。 列合并的属性，在制作小模块时经常用到。 例如，下面这个小模块：《左栏模块》。 第一行与第二行都应用了列合并的属性，第一行在合并以后的单元格中放入了一个动画图片，第二行在合并以后的单元格中放入了一个文字图片。 二、行合并： 下面的这个表格，第二列七行合并为一行了。从表格中，我们看得非常明显。那么，它的代码又有什么变化呢？ 表格的第一行，一套行标签<tr></tr>中包裹着三套列标签<td></td>，也就是说，一行内有三个单元格。其中，中间的一套列标签是<td rowSpan="7"></td>。rowSpan合并行的代码，这里的“7”，表示合并7行。 其余的六行，一套行标签<tr></tr>中包裹着两套列标签<td></td>，也就是说，一行内只有两个单元格。从表格中观看，七行的样子都是一样的，为什么它们的代码却不一样呢？其余的六行为什么都少了一个单元格呢？原因很简单。因为中间的那个大长方形格子（单元格），已经属于第一行了（合并了七行的大单元格），所以，其余的六行就都是只有两个单元格了。
行合并的应用，在制作小模块的时候，也经常用到，并且应用行合并属性还可以制作出一些特殊的网页效果来。 我们来观察一下下面的两篇网页效果，其中一篇网页就是在制作小模块时应用了行合并属性，另一篇则是应用行合属性制作出了特殊的网页效果。 行合并的应用举例： 在这个小模块中，粘贴了美女图片的那个单元格，是合并了两行与两列的单元格。应用列合并与行合并属性，制作出了一个较大的单元格，以便放入小图片。
2、 给图片添加小窗格 在这个网页中，一层表格中放入了一个动画图片，然后应用外边矩的属性，在同一位置，又放置了一个可以显示出单元格边线的十八行三列的表格，中间的那一列，是一个合并了十八行的大单元格。 像这样，应用行合并的属性，就制作出了一种有特殊效果的网页。 “春天没来”编撰 2013年9月1日于北京
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
