信息系统安全工程师:表格制作完全版

 表格制作完全版
表格组合不是一个轻而易举的技术，所以，我们极少见到论坛各种精美的帖子会用到它，但表格组合技术是一个很有趣的技术，掌握它具有一定的挑战性，所以，愿意花一节的篇幅专门讲它，如果你觉得不需要，可以跳过这一节。表格组合更多的用于布局，当然，也有少数情形需要用到它。本节不想探讨什么时候用到表格组合，只从实现手段方面进行讨论。
先讲上下排列的表格组合。先看例子：
 
表一
 
 
表二
 
要顺利地实现N张表格的纵向组合，至少有三种方法：一是，令参与排列的表格都居中（即在里加入align=center），上例就是；二是，不定义表格的对齐属性，即里没有align属性，这样给出的N张表格代码，它们都是上下排列的，表格的自身位置全是左对齐（但若定义了align=left，情形不是这样，大家可以在FP或DW里试试），例子请看表三和表四；三是把参与排列的表格放在一张表格里，这张作为容器的外表宽度不限，且里面的表格也不设置align属性——大家都看得出来，其实，它只是第二种实现方法的扩展，其目的是为了让参与排列的表格随心所欲地设置水平对齐，换句话说，外表的作用是为了实现自定义的对齐方式，示例为表五和表六。第三种方法虽然源于第二种，但使用它是个绝好的主意，这个，在使用表格排版过程中，相信大家会慢慢体会到的。
 
表三
表四
↓我叫表五表六右对齐 表五
表六
 
下面看水平排列的表格
表格的水平排列更需要精确地计算参与排列的表格的宽度，它们的宽度的总和不能超过其所属容器所能装载的宽度，表格和其他元素的混排情形下更应该严格考虑。
一个好的习惯是，还是用一张表格来规范并列组合的表格，这张表格，最好宽度设置为100%，然后将里面要并列组合的表格通通设置为左对齐（但注意：它们的宽度总和不能超过可显示的宽度）。试看以下两个示例：
 
外表宽度为100% align=left
 
width=150
align=left
 
width=150
align=left
 
width=150
 
外表居中，宽度为450 align=left
 
width=150
align=center
 
width=150
align=right
 
width=150
 
本节从某个角度分析了表格的组合问题，它是一个主要用于排版的技术，要求计算精确，并不十分适用于论坛。但如果你是一个不怕挑战的人，那么，本节所讨论的内容或许对你来说还远远不够，好在聪明的你会自己去尝试，本节若能起到抛砖引玉的作用就已经达到目的了。谢谢阅读！
多单元格表格
在页面布局方面，比起表格组合，多单元格更能灵活和方便地进行控制，为此，使用多单元格布局Web页或帖子是一个不错的习惯。
我们前面提过，表格代码里，有多少组...，表格就有行，有多少组，表格就有多少列。为此，在代码里，我们将根据需要利用表格代码里的来创建单元格。我们先来制作一个1×3即一行三列的表格:
代码：

...

...

单元格一（即列1）

单元格二（即列2）

单元格三（即列3）

效果：（1×3表格）
.
单元格一（即列1） 单元格二（即列2） 单元格三（即列3）
在上述示例里，只有一组，故而表格只有一行，...里有三组td，因此，表格有三列，这就是所谓的1×3表格。现在我们把代码扩展一下，即增加一组tr，请看代码和效果：
代码：

单元格一（即列1）	单元格二（即列2）	单元格三（即列3）
单元格四（即列4）	单元格五（即列5）	单元格六（即列6）

效果：（2×3表格）
.
单元格一（即列1） 单元格二（即列2） 单元格三（即列3）
单元格四（即列4） 单元格五（即列5） 单元格六（即列6）
我们可以定义里的宽度和高度值，从而让表格以我们的预设在其所在区域进行布局，以便达到有效的排版目的。在多行多列的表格里，当某一列的第一个单元格已经定义了宽度，那么，往下各单元格的宽度将跟它一致，如果同一列的所有单元格都设置了宽度，该列的最终宽度以width值最大的那个单元格为标准，——可见，我们只需设置某列的第一个单元格的宽度即可，其他同列的不必给出width属性，这样一可以节省代码二不会出现无效设置；表格的行的高度情形也是一样：当定义了某一行头一个单元格的高度之后，该行其他单元格会自动得到相同的高度值，不必再一一设置的height属性。尽量减少代码量总是一个好习惯，一来可以节省空间，二来打开速度也会得到改善——代码越多，系统处理代码的时间就越长，同时也更耗可贵的系统资源。
我们还应该注意的是，如果不设置的width和height属性，表格各单元格将根据里面的内容的占位情况拓宽自己，表格给各单元格的宽度分配将由系统自动进行，这样就容易出现不合理的情况，因此，应该根据需要设置单元格的高度和宽度。
多单元格表格里一个有趣的问题是单元格合并，其概念与Excel的合并单元格是一致的，只是实现方法不同。在HTML代码里，我们用colspan属性合并左右单元格，记作：colspan=数值，“数值”即为需要合并的单元格总数；而rowspan属性则合并上下单元格，记作：rowspan=数值。
让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——
代码：




 

1，2单元格合并了		3
4	5	6

效果：.
1，2单元格合并了 3
4 5 6
下面是表格的上下单元格合并——
代码：

1,4单元格合并了	2	3
	5	6

效果：
1,4单元格合并了 2 3
5 6
 
通过HTML代码实现单元格的合并略显抽象一些，你可以研究本示例代码和第二组代码（2×3表格）的区别并比较两组表格的样式来慢慢领会，要完全掌握这一技术，你还需要亲自做些尝试。最后顺便提一下：有些论坛可能不支持表格单元格的合并。
表格嵌套
论坛所有精美的帖子，几乎无一例外地都用到表格的嵌套技术，其中的原因，如前所述，论坛中给用户提供施展身手的余地十分有限，只有通过表格的修饰，帖子才能既成为独立的显示单位，又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色，兼管帖子的布局的同时还承载着表达帖子信息元素的重任。
作为容器，表格可以往里放置可以放置的元素。表格也是一个元素，故而表格放在表格里是合理的，因此就有了表格的嵌套。表格的嵌套还可以是另外的形式，那就是，一个表格的单元格里还有表格。不论是哪种形式的嵌套，理论上嵌套的层可以是无穷尽的，但现实中并不会这么做，我们总是根据需要有限制地使用嵌套，不会没完没了。
表格嵌套其实也不复杂。如果你能够独立用代码做一张表格（强烈建议练出这样的本事），那么，你就可以做一个两张表格的嵌套，很简单，把代码复制一下，粘贴在原代码的和之间（亦即在“和”的位置）。试看以下代码和两个表格的嵌套效果：

表一 表二

效果:.
表一 表二
从上面的表格效果上看，如果我们把文字“表一”删除掉，表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值，加上背景色和背景图，或通过其他手段来修饰，那么，里表和外表之间，就会出现非常漂亮的边框，帖子的外框就这么搞掂了。当然，这是一个细活，你需要做反复的尝试，直到效果满意为止。或许你还需要更多层的嵌套，这就看你的想象力了——实现手段是不难的，因为你已经会了第一层的嵌套，第二层、第三层……第N层，无非就是如此。
现在我们来看看多单元格表格中，在单元格是嵌入表格的示例。先看代码：

单元格一：无表格嵌套

我嵌套在单元格二里

以下是效果：.
单元格一：无表格嵌套 我嵌套在单元格二里
上面的两个例子里，都将处于外层的表格（即外表）的宽度设置为450个像素，这是由于本页面的限制。在实际制作中，我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值，因为，你的帖子里边的内容宽度非常可能是绝对的，譬如图片有着自己固定的宽度， Flash影片也是使用绝对的width值，为了不让正文四周出现太多的空余，采用绝对值规范外表的宽度是有必要的。当然，还有一个好的做法，那就是，根本不用规定外表的宽度，而是让里边的内容自行撑宽外表，这么做至少要求我们注意两个方法的问题：一是，利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景，二是，外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙，不是用语言能够一一道明的，只有在不断地实践中才能逐一领悟和掌握。
当今用户的的显示器分辨率有两大标准：800×600和1024×768，这两种分辨率下，以动网论坛为例，用户发帖后帖子可显示的区域宽度是有区别的。为此，你需要通过尝试获知具体宽度，从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子，比如超过510个像素的宽度，分辨率设置为800×600的浏览者将看不到帖子右边的内容，而太小的宽度，又可能令帖子显得小里小气，也不理想。
深入学习表格
表格还有一些重要的内容需要彻底弄懂。实际上，这些内容，前面几节我们已经接触过，但我们还需要进一步去探讨一下。
我们先来做个实验。下面给出一条长度为450个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450个像素：
 
border=1
cesllpadding=15
cellspacing=8
width=450
 
现在，我们看到，表格的总宽度仍然是450个像素（它没有超越分隔线），因此，我们可以得出这样的结论：表格的border、cellpadding和cellspacing虽然都是占位元素，但它们不会使得表格变得更宽，换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。
第二个实验：设定表格的宽度为400个像素，然后在里面放置一个可视元素，令其宽度为450，看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。
 
本表格设定宽度为400个像素，但因表格里的分隔线宽度为450个像素，表格的实际显示宽度发生了变化。
 
现在我们看到，虽然在标签里设定了width=400,但表格的总宽度并不是400个像素，而是被表格里面的那条分隔线的实际宽度（450个像素）撑宽了。你可能会觉得奇怪：为什么表格总宽度超过了450个像素呢？道理是这样：表格设置了cellpadding值为10，cellpadding区域是不可放进任何可视内容的。细心比较一下，你将发现，表格宽出的部分正是留空的部分，即表格的单元格衬距。
可见，表格里面的内容会影响到表格的宽度。实际上，如果我们设置好表格里面的内容的宽度，表格的width值是完全可以不设置的，但这不是一个好的习惯，我们通常仍然需要合理地设置表格的宽度，但必须留意一个问题：表格的总体宽度是否超过了可显示的范围。
实验三：设定一个450个像素宽度的表格，表格的边框、单元格间距和衬距都为实值，该表格有三个单元格，每个单元格设定宽度为150（加起来恰好的450个像素），看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照。
 
width=150 width=150 width=150
 
上面的表格，我们设置border=1，cellpadding=10，cellspacing=6，三个单元格的宽度均为150个像素，结果是：表格的总体宽度未发生变化。由此我们得出结论：多单元格表格里，只要各单元格的宽度相加起来不超过里的宽度赋值，它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。
本节通过实验的方式，从表格的宽度角度剖析了表格的一些深层特征，估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象，加上黑马创造的用分隔线做对照标准和耐心的讲解，悉心阅读和比较后，你会很容易掌握的。
表格应用示例一
本节我举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码，这些代码得出的是本示例的整体外观效果，内容需要你自己往里添加，添加的是此说明和本示例的代码，纯文字。

标 题 内容

.
标 题
内容
如果你还没有熟悉到一看代码就明白，你有必要看一下下面的分析。
本例有四层表格的嵌套，总共使用了六张表格。最里层是三张表格上下排列，属表格组合。我们从外往里分析代码。
最外层的表格，我们设置边框值为1并定义其颜色，这样，配合的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距（cellpadding）为20，它恰好形成了帖子外边框。外表的宽度为600个像素，这是根据本页面而设置的，你可以在实际使用时更改。
第二层表格的原理和外层的差不多，只是，我们更改了各元素的颜色，单元格衬距也调小了，cellpadding赋值为10。
第三层表格没有做太多的设置，我们仅令其背景色为白色、单元格衬距为10，这样得出一个白色的边框。
第四层表格有三个上下并列组合的表格。第一个用来放帖子的标题；第二个表格只是用于隔开第一个和第三个表格并令之与第三层白色底的表格连为一体，为此它的border、cellpading和cellspacing都需要设置为0，高度则为10（与第三层表格所形成的边框一致）；第三个表格用于放置帖子的内容，故将其单元格间距设置为10（也可设置单元格衬距），以便让文字等内容不至于太靠边。
本例帖子里的代码，黑马采用了缩退方式编写，意在让大家能够清楚的看到不同的代码代表不同层的表格，越缩进的代码越在里层（非表格代码和自动换行的除外）。
这个示例只是展现一种思路，你完全可以在此基础上通过其他手段（如添加表格背景图片、加入动态的图形和Flash影片等）做得更复杂、更精美一些。
表格应用示例二
以下是一个作品的框架。出于讲解方便，在不改变原貌的情况下对原作品作了些改动。

此处放一幅与标题相关的图片 标 题 分隔图标 【这里是正文，由六幅图和五段诗文组成】 分隔图标 签 名 小图修饰+音乐标签

.
此处放一幅与标题相关的图片
标 题
分隔图标
【这里是正文，由六幅图和五段诗文组成】
分隔图标
签 名
小图修饰+音乐标签
这个作品的框架用了八张嵌套的表格，每一张表格都有背景图片。其中外表是添加上去的，其作用是替代原来的body区域里的背景图，而原作品中的两张用于设置帖子正文处的表格略显多余，已经将其删除，仅保留七张表格。下面给出上面帖子框架的代码并作简单的分析。
从代码上看，这并不是一个很复杂的构架，它只是一个多重嵌套的方式。为更能直观地查看各表格定义了背景图后的效果.
最后给出该帖的核心代码。你应该发现，里面又多出了一些表格。是的，它们是简单的表格，作用仅为规范诗文的居中：每一段诗文使用一个表格，共五个。