|
表格的行合并与列合并
 最近，有几个朋友来信询问表格的“行合并”与“列合并”问题，特撰写这篇文章，希望能对不懂这些知识的朋友们有所帮助。
首先要弄清楚行与列以及合并行、合并列的概念。
在表格中，横排叫做行，竖排叫做列。
从上往下数，第一横排是第一行，第二横排是第二行，第三横排是第三行……
从左往右数，第一竖排是第一列，第二竖排是第二列，第三竖排是第三列……
行合并是指：把一列中的两个或者多个单元格合并为一个单元格。哪个列标签中设置了行合并代码，就从这个单元格开始向下合并。
列合并是指：把一行中的两个或者多个单元格合并为一个单元格。哪个列标签中设置了列合并代码，就从这个单元格开始向右合并。
行合并代码举例：rowSpan=2 等号后面的数字，表示把几个单元格合并为一个单元格。
列合并代码举例：colSpan=2 等号后面的数字，表示把几个单元格合并为一个单元格。
下面的代码是把“三行五列的表格”中的“第一列的第一行与第二行”合并为一行。（也就是合并为一个单元格） <TABLE style="MARGIN: 0px" title=春天没来编撰 border=5 cellSpacing=5 borderColor=#ffbb00 cellPadding=0 width=600 background=http://image63.360doc.com/DownloadImg/2013/08/1223/34452789_28.gif bgColor=#00f200 align=center height=100> <TBODY> <TR align=center borderColor=#ffbb00> <TD rowSpan=2> <DIV align=center><FONT color=#00ff00>第一行第一列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第二列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第五列</FONT></DIV></TD></TR> <TR align=center borderColor=#ffbb00> <TD> <DIV align=center><FONT color=#00ff00>第二行第二列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第二行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第二行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#ffff00>第二行第五列</FONT></DIV></TD></TR> <TR align=center borderColor=#ffbb00> <TD> <DIV align=center><FONT color=#00ffff> <DIV align=center><FONT color=#00ff00>第三行第一列</FONT></DIV></FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第二列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第五列</FONT></DIV></TD></TR></TBODY></TABLE> 其次 ，还应该弄清楚行标签与列标签，弄清楚“合并行”或者“合并列”以后，整个表格代码的变化规律。
<TR>与</TR>，是行标签与其尾标签。<TD>与</TD>是列标签与其尾标签。每一行的“列标签与其尾标签”都是放在“行标签与其尾标签”之间的。
没有“合并行”或者“合并列”的时候，“三行五列的表格”代码中，每一对<TR>与</TR>之间，都有五对<TD>与</TD>，也就是说，每一行中都有五个单元格。
“第一列的第一行与第二行”合并为一行以后，第二行的<TR>与</TR>之间，就变化为四对<TD>与</TD>了。
如果你合并的行数为“3”，那么，第三行的<TR>与</TR>之间，也就变化为四对<TD>与</TD>了。
合并列的道理也是一样的。
下面的代码是把“三行五列的表格”中的“第一行的第一列与第二列”合并为一列。（也就是合并为一个单元格） <TABLE style="MARGIN: 0px" title=春天没来编撰 border=5 cellSpacing=5 borderColor=#ffbb00 cellPadding=0 width=600 background=http://image63.360doc.com/DownloadImg/2013/08/1223/34452789_28.gif bgColor=#00f200 align=center height=100> <TBODY> <TR align=center borderColor=#ffbb00> <TD colSpan=2> <DIV align=center><FONT color=#00ff00>第一行第一列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第一行第五列</FONT></DIV></TD></TR> <TR align=center borderColor=#ffbb00> <TD> <DIV align=center><FONT color=#00ff00>第二行第一列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第二行第二列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第二行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第二行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#ffff00>第二行第五列</FONT></DIV></TD></TR> <TR align=center borderColor=#ffbb00> <TD> <DIV align=center><FONT color=#00ffff> <DIV align=center><FONT color=#00ff00>第三行第一列</FONT></DIV></FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第二列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第三列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第四列</FONT></DIV></TD> <TD> <DIV align=center><FONT color=#00ff00>第三行第五列</FONT></DIV></TD></TR></TBODY></TABLE> “第一行的第一列与第二列”合并为一列以后，第一行的<TR>与</TR>之间，就变化为四对<TD>与</TD>了。
如果你合并的列数为“3”，第一行的<TR>与</TR>之间，就变化为三对<TD>与</TD>了。
……
|
|
|
