2009年11月1日 星期日

HTML再接再厲(十五):表格套表格

想要在表格中加入另外一個表格嗎?我們先來看個例子:

第二個表格 第二個表格
第二個表格 第二個表格
看出來了嗎?
左邊格子內就
是第二個表格

怎麼做到的?

下面就是製作上表的HTML原始碼,第一個表格的原始碼用黑色顯示,第二個表格的原始碼用藍色顯示,以利你閱讀及瞭解。

<TABLE BORDER="5" CELLPADDING="10" CELLSPACING="10" WIDTH="400">
<TR>
<TD>
<TABLE BORDER="3" ALIGN="CENTER" CELLPADDING="3" CELLSPACING="3">
<TR>
<TD>第二個表格</TD>
<TD>第二個表格</TD>
</TR>
<TR>
<TD>第二個表格</TD>
<TD>第二個表格</TD>
</TR>
</TABLE>

</TD>
<TD ALIGN="CENTER">
看出來了嗎?左邊格子內就是第二個表格
</TD>
</TR>
</TABLE>

解析與建議

我想你應該很容易解讀上述原始碼,它只是在<TD></TD>中間加入了另一組<TABLE></TABLE>旗標(第二個表格)就行了。

如果你還不知道<TABLE><TR><TD>旗標的作用,請參考 基本表格旗標。

如果你要製作一個多層次的表格,遇見一大堆<TABLE><TR><TD>旗標,實在很容易把順序搞混了,或是弄丟了一、兩個回復旗標,結果是一團糟。這裡給兩個建議,第一個就是成雙成對,不要因偷懶而省略了</TABLE></TR></TD>等回復旗標。第二個建議是由裏而外,就是最內層的表格最先製作,然後加上適當的<TR><TD>旗標,然後再繼續製作外面一層,就不容易混淆了。

本文配合HTML 4.0撰寫,新版HTML均可向前相容。

0 留言:

張貼留言