一步一步学代码---图框制作（表格组合）[连载21]
一步一步学代码---图框制作（表格组合）[连载21]
四 图框制作
2 表格组合
表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，这里愿意花一节的篇幅专门讲它，如果你觉得不需要，可以跳过这一节。
表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。
（1）上下排列的表格
要顺利地实现N张表格的纵向组合，至少有三种方法：
一是，令参与排列的表格都居中（即在<table>里加入align=center）
例；
<TABLE height=100 width=100 align=center border=1><TBODY><TR><TD><P class=green align=center>表一</P></TD></TR></TBODY></TABLE><TABLE height=100 width=100 align=center border=1><TBODY><TR><TD><P class=green align=center>表二</P></TD></TR></TBODY></TABLE>
显示结果：
表一
表二
二是，不定义表格的对齐属性，即<table>里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以在FP或DW里试试）。
例：
<TABLE width=200 border=1><TBODY><TR><TD class=main>表三</TD></TR></TBODY></TABLE><TABLE width=200 border=1><TBODY><TR><TD class=main>表四</TD></TR></TBODY></TABLE>
显示结果：
表三
表四
三是把参与排列的表格放在一张表格里，这张作为容器的外表宽度不限，且里面的表格也不设置align属性——大家都看得出来，其实，它只是第二种实现方法的扩展，其目的是为了让参与排列的表格随心所欲地设置水平对齐，换句话说，外表的作用是为了实现自定义的对齐方式，示例为表五和表六。第三种方法虽然源于第二种，但使用它是个绝好的主意，这个，在使用表格排版过程中，相信大家会慢慢体会到的。
例：
<TABLE borderColor=red cellSpacing=0 cellPadding=0 align=left border=1><TBODY><TR class=red><TD><TABLE width=200 border=1><TBODY><TR><TD class=main>表五</TD></TR></TBODY></TABLE><TABLE width=200 border=1><TBODY><TR><TD class=main>表六</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
显示结果：
表五
表六
（2）水平排列的表格
表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格和其他元素的混排情形下更应该严格考虑。
一个好的习惯是，还是用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格通通设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。试看以下两个示例：
1）单元格组合（无外表）
我们前面提过，表格代码里，有多少组<tr>...</tr>，表格就有多少行，有多少组<td>...</td>，表格就有多少列。为此，在代码里，我们将根据需要利用表格代码里的<tr><td>...</td></tr>来创建单元格。我们先来制作一个1×3即一行三列的表格。
例：
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD align=middle>单元格一（即列1）</TD><TD align=middle>单元格二（即列2）</TD><TD align=middle>单元格三（即列3）</TD></TR></TBODY></TABLE>
显示结果：
单元格一（即列1）
单元格二（即列2）
单元格三（即列3）
在上述示例里，只有一组<tr>，故而表格只有一行，<tr>...</tr>里有三组td，因此，表格有三列，这就是所谓的1×3表格。现在我们把代码扩展一下，即增加一组tr，请看代码和效果：
代码：
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD align=middle>单元格一（即列1）</TD><TD align=middle>单元格二（即列2）</TD><TD align=middle>单元格三（即列3）</TD></TR><TR><TD align=middle>单元格四（即列4）</TD><TD align=middle>单元格五（即列5）</TD><TD align=middle>单元格六（即列6）</TD></TR></TBODY></TABLE>
显示结果：
（2×3表格）
单元格一（即列1）
单元格二（即列2）
单元格三（即列3）
单元格四（即列4）
单元格五（即列5）
单元格六（即列6）
我们可以定义<td>里的宽度和高度值，从而让表格以我们的预设在其所在区域进行布局，以便达到有效的排版目的。在多行多列的表格里，当某一列的第一个单元格已经定义了宽度，那么，往下各单元格的宽度将跟它一致，如果同一列的所有单元格都设置了宽度，该列的最终宽度以width值最大的那个单元格为标准，——可见，我们只需设置某列的第一个单元格的宽度即可，其他同列的<td>不必给出width属性，这样一可以节省代码二不会出现无效设置；表格的行的高度情形也是一样：当定义了某一行头一个单元格的高度之后，该行其他单元格会自动得到相同的高度值，不必再一一设置<td>的height属性。尽量减少代码量总是一个好习惯，一来可以节省空间，二来打开速度也会得到改善——代码越多，系统处理代码的时间就越长，同时也更耗可贵的系统资源。
我们还应该注意的是，如果不设置<td>的width和height属性，表格各单元格将根据里面的内容的占位情况拓宽自己，表格给各单元格的宽度分配将由系统自动进行，这样就容易出现不合理的情况，因此，应该根据需要设置单元格的高度和宽度。
多单元格表格里一个有趣的问题是单元格合并，其概念与Excel的合并单元格是一致的，只是实现方法不同。在HTML代码里，我们用colspan属性合并左右单元格，记作：colspan=数值，“数值”即为需要合并的单元格总数；而rowspan属性则合并上下单元格，记作：rowspan=数值。
让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格
代码：
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD align=middle colSpan=2>1，2单元格合并了</TD><TD align=middle>3</TD></TR><TR><TD align=middle>4</TD><TD align=middle>5</TD><TD align=middle>6</TD></TR></TBODY></TABLE>
效果：
1，2单元格合并了
3
4
5
6
下面是表格的上下单元格合并
代码：
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD align=middle rowSpan=2>1,4单元格合并了</TD><TD align=middle>2</TD><TD align=middle>3</TD></TR><TR><TD align=middle>5</TD><TD align=middle>6</TD></TR></TBODY></TABLE>
效果：
1,4单元格合并了
2
3
5
6
2）带外表
外表宽度为100%
<TABLE borderColor=red cellSpacing=0 cellPadding=0 width="100%" border=1><TBODY><TR class=red><TD borderColor=white><TABLE width=150 align=left border=1><TBODY><TR><TD class=main>align=left<BR>width=150</TD></TR></TBODY></TABLE><TABLE width=150 align=left border=1><TBODY><TR><TD class=main>align=left<BR>width=150</TD></TR></TBODY></TABLE><TABLE width=150 align=left border=1><TBODY><TR><TD class=main>align=left<BR>width=150</TD></TR></TBODY>
</TABLE></TD></TR></TBODY></TABLE>
显示结果：
align=leftwidth=150
align=leftwidth=150
align=leftwidth=150
外表居中，宽度为450
<TABLE borderColor=red cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR class=red><TD borderColor=white><TABLE width=150 align=left border=1><TBODY><TR><TD class=main>align=left<BR>width=150</TD></TR></TBODY></TABLE><TABLE width=150 align=left border=1><TBODY><TR><TD class=main>align=center<BR>width=150</TD></TR></TBODY></TABLE><TABLE width=150 align=right border=1><TBODY><TR><TD class=main>align=right<BR>width=150</TD></TR></TBODY>
</TABLE></TD></TR></TBODY></TABLE>
显示结果：
align=leftwidth=150
align=centerwidth=150
align=rightwidth=150
(3）表格嵌套
论坛所有精美的帖子，几乎无一例外地都用到表格的嵌套技术，其中的原因，如前所述，论坛中给用户提供施展身手的余地十分有限，只有通过表格的修饰，帖子才能既成为独立的显示单位，又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色，兼管帖子的布局的同时还承载着表达帖子信息元素的重任。
作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。不论是哪种形式的嵌套，理论上嵌套的层可以是无穷尽的，但现实中并不会这么做，我们总是根据需要有限制地使用嵌套，不会没完没了。
表格嵌套其实也不复杂。如果你能够独立用代码做一张表格（强烈建议练出这样的本事），那么，你就可以做一个两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的<td>和</td>之间（亦即在“和”的位置）。试看以下代码和两个表格的嵌套效果：
<TABLE height=200 cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD>表一 <TABLE height=200 cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD>表二</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
表一
表二
从上面的表格效果上看，如果我们把文字“表一”删除掉，表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框，帖子的外框就这么搞掂了。当然，这是一个细活，你需要做反复的尝试，直到效果满意为止。或许你还需要更多层的嵌套，这就看你的想象力了——实现手段是不难的，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。
现在我们来看看多单元格表格中，在单元格是嵌入表格的示例。先看代码：
<TABLE cellSpacing=0 cellPadding=0 width=450 align=center border=1><TBODY><TR><TD class=red>单元格一：无表格嵌套</TD><TD><TABLE width="100%" bgColor=#ccc1cc border=1><TBODY><TR><TD class=red>我嵌套在单元格二里</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
以下是效果：
单元格一：无表格嵌套
我嵌套在单元格二里
上面的两个例子里，黑马都将处于外层的表格（即外表）的宽度设置为450个像素，这是由于本页面的限制。在实际制作中，我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值，因为，你的帖子里边的内容宽度非常可能是绝对的，譬如图片有着自己固定的宽度， Flash影片也是使用绝对的width值，为了不让正文四周出现太多的空余，采用绝对值规范外表的宽度是有必要的。当然，还有一个好的做法，那就是，根本不用规定外表的宽度，而是让里边的内容自行撑宽外表，这么做至少要求我们注意两个方法的问题：一是，利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景，二是，外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙，不是用语言能够一一道明的，只有在不断地实践中才能逐一领悟和掌握。
当今用户的的显示器分辨率有两大标准：800×600和1024×768，这两种分辨率下，以动网论坛为例，用户发帖后帖子可显示的区域宽度是有区别的。为此，你需要通过尝试获知具体宽度，从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子，比如超过510个像素的宽度，分辨率设置为800×600的浏览者将看不到帖子右边的内容，而太小的宽度，又可能令帖子显得小里小气，也不理想。
本节从某个角度分析了表格的组合问题，它是一个主要用于排版的技术，要求计算精确，并不十分适用于论坛。但如果你是一个不怕挑战的人，那么，本节所讨论的内容或许对你来说还远远不够，好在聪明的你会自己去尝试，本节若能起到抛砖引玉的作用就已经达到目的了。
熟能生巧，要多加练习哦！
