|
表格是网页排版的有力工具，是网页的重要组成部分，因为表格是"容器"，它里面可以放置各种其他元素。读者将在今后的学习中慢慢、并且深刻地体会到这一点。在实际应用中，为了排出复杂、生动的版面，往往需要在表格中嵌套表格。
表格嵌套其实并不复杂。只要在表格的<td>、</td>之间再做一个表格，就是表格的嵌套了。
【例9】最简单的表格嵌套。
<html>
<head>
<title>itsway -- 表格</title>
</head>
<body bgcolor = "#ffffff">
<table border="1" cellpadding = "0" cellspacing = "0" width = "450" height = "100" align = "center">
<tr>
<td>表一中嵌套了表二
<table border="1" cellpadding = "0" cellspacing = "0" width = "450" height = "50" align = "center">
<tr>
<td>表二</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框。当然这是一个细活儿，需要做反复的尝试，直到效果满意为止。
至于多层嵌套就很简单了，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。
【例10】本节举一个表格嵌套的示例向大家展示新闻页面的制作，以下是参考代码，这些代码得出的是整体外观效果。
<html>
<head>
<title>itsway -- 表格</title>
</head>
<body bgcolor = "#ffffff">
<table width = "380" border = "1" cellpadding = "0" cellspacing = "0">
<tr>
<td align = "center" width="380"><font size = "2">
<table width = "380" border = "0" cellpadding = "0" cellspacing = "0" bgcolor = "#ECF3FF">
<tr><td height = "6"></td></tr>
<tr><td align = "center">
<font color = "black"><b><u>中国入世五周年：金融业今起全面开放</u><b></font>
</font></td></tr>
<tr><td><font size = "2">
[<font color = "blue"><u>八家外资银行申请本地注册</u></font>]
[<font color = "blue"><u>成品油将全面向外资开放</u></font>]<br>
[<font color = "red"><b><u>实时播报央视特别节目</u></b></font>]
[<font color = "blue"><u>龙永图盘点得失</u></font>]
[<font color = "blue"><u>树大国形象</u></font>]<br>
</font></td></tr>
</table>
</td>
</tr>
<tr>
<td align = "center" width="380">
<table width = "380" border = "0" cellpadding = "0" cellspacing = "0">
<tr>
<td><font size = "2">
<font color = "#00349a">●</font>
<font color = "blue"><u>深圳警方称公示涉黄人员合法</u></font>
<font color = "blue"><u>当事人家属欲起诉</u></font><br>
<font color = "#00349a">●</font>
<font color = "blue"><u>智利前领导人皮诺切特去世</u></font>
<font color = "blue"><u>将不享受国葬待遇</u></font><br>
</font></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
这道题有些复杂，我还是贴个图吧，以便朋友们方便观看。下图是在IE中显示的效果：
怎么样？是不是有一点新闻网站的神韵？实际上本题就是改编自某著名门户的新闻页面，怎么可能没有新闻效果呢，呵呵。
当然，里面的文字是无法点击打开具体内容的，因为这里并没有用超级链接，而是用"仿超链接"的文字来实现的。超链接是HTML的灵魂，将在下一章讲解。
代码本身并不复杂，但用到了前面讲解的很多知识，无非是更加琐碎而已。请读者自己分析代码。
在网页中显示这么一点内容就用到如此多的代码，制作一个内容丰富、结构复杂的网页，要写多少东西就可想而知了。所以一定要熟练运用HTML。
也许读者会有这样的疑问："这个例子其实不必用嵌套表格实现，前面的例子也是这样。"的确如此，这两个例子都可以不用嵌套表格。但在实际应用中，用嵌套表格来实现排版，比只用一个表格、再在表格中划分复杂的行列来排版，更加灵活，也更得心应手。在实际的网页制作中，表格嵌套四层以上的情况非常常见，嵌套六层以上的也屡见不鲜。
但用表格排版毕竟比较麻烦。要想进行更加灵活的排版，还必须学习"层"的使用，这将在CSS教程中讲解。将"层"和表格结合起来使用，排版手段就更加灵活了，也能更加得心应手地设计好网页的结构。
上一篇：5.7 其他标记 下一篇：5.9 用组合表格设计网页结构
|
