第五讲:表格的嵌套(一)
表格的嵌套一方面是为使页面(贴子)的外观更为漂亮,利用表格嵌套来编辑出复杂而精美的效果,另一方面是出于布局需要,用一些嵌套方式的表格来做精确的编排,或者二者兼而有之。熟练地掌握表格的嵌套技巧并不是很困难的,只要你思路清晰,对表格的整体嵌套构架做到心中有数,在实际编辑时就不会出乱,发布出来的作品也就不会只是一堆代码。
现从最简单的表格嵌套开始演示和讲解,不会太难的。
两张表格的嵌套:
Table No.1(Father Table)
Table No.1(Father Table) |
代码如下(红色的为第二张表格的代码):
<table border=8 bordercolor=#0099cc width=100%>
<tbody>
<tr>
<td>Table No.1(Father Table)
<table border=8 bordercolor=#ccffcc width=100%>
<tbody>
<tr>
<td><br>Table No.2(Son Table)<br></td>
</tr>
</tbody>
</table>
Table No.1(Father Table)
</td>
</tr>
</tbody>
</table>
从上面的代码中,我们看得出来,第二张表格代码包含在第一张表格代码中的<td>和</td>里面,这一点一定要弄清楚。不然,终止符不正确或缺少时,由于系统的容错性不好、自动修正功能不够智能化等问题,效果将会很糟糕,错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。
下面是三个表格的嵌套代码及效果,由于表格里没有内容,所以,只指定了三级表格的高度。代码中,每一个表格的代码用一种颜色来区分。
代码:
<TABLE borderColor=#6633ff width=100% border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#cc9966 width=100% border=8>
<TBODY>
<TR>
<TD>
<TABLE borderColor=#003300 height=200 width=100% border=8>
<TBODY>
<TR>
<TD></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</table>
</td>
</tr>
</tbody>
</Table>
一般来说,只要结构清晰,再多的表格嵌套也是一样操作的。提示:不管是多少张表格嵌套,一定要注意起始标识符的正确性,稍有点错误,系统会自动帮你更正,但更正的效果或许不是你所需的,而且,一旦错误太多,系统的自动更正也无能为力。
特别注意:
<img src=图片地址>必须放在<td>……</td>之间,并注意用换行符(<br>)或段落标志符(<p></p>)将图片与文字隔开。