表格的行合併與列合併

表格的行合併與列合併

最近,有幾個朋友來信詢問表格的「行合併」與「列合併」問題,特撰寫這篇文章,希望能對不懂這些知識的朋友們有所幫助。

首先要弄清楚行與列以及合併行、合併列的概念。

在表格中,橫排叫做行,豎排叫做列。

從上往下數,第一橫排是第一行,第二橫排是第二行,第三橫排是第三行……

從左往右數,第一豎排是第一列,第二豎排是第二列,第三豎排是第三列……

行合併是指:把一列中的兩個或者多個單元格合併為一個單元格。哪個列標籤中設置了行合併代碼,就從這個單元格開始向下合併。

列合併是指:把一行中的兩個或者多個單元格合併為一個單元格。哪個列標籤中設置了列合併代碼,就從這個單元格開始向右合併。

行合併代碼舉例: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>了。

……

表格的行合併與列合併
   「春天沒來」編撰

2014年7月16日於北京