一步一步学代码---图框制作（表格应用示例）[连载22]
一步一步学代码---图框制作（表格应用示例）[连载22]
四 图框制作
3 表格应用示例
表格应用示例1：
表 格 应 用 示 例 代 码 之 一
本节黑马举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码，
这些代码得出的是本示例的整体外观效果，内容需要你自己往里添加，黑马添加的是此说明和本示例的代码，纯文字。 <TABLE borderColor=#363636 cellSpacing=0 cellPadding=20 width=600 align=center bgColor=#dd6969 border=1><TBODY><TR><TD borderColor=#ff0000><TABLE borderColor=#696969 cellSpacing=0 cellPadding=10 width="100%" bgColor=#aa1212 border=1><TBODY><TR><TD borderColor=#aa1212><TABLE cellSpacing=0 cellPadding=10 width="100%" bgColor=#ffffff border=0><TBODY><TR><TD><TABLE height=40 cellSpacing=0 cellPadding=10 width="100%" align=center bgColor=#dd6969 border=0><TBODY><TR><TD><P align=center><FONT face=黑体 color=#ffcc00 size=4>标 题</FONT></P></TD></TR></TBODY></TABLE><TABLE height=10 cellSpacing=0 cellPadding=0 width="100%" bgColor=#ffffff border=0><TBODY><TR><TD></TD></TR></TBODY></TABLE><TABLE height=450 cellSpacing=10 cellPadding=0 width="100%" align=center bgColor=#393939 border=0><TBODY><TR><TD vAlign=top><P><FONT color=#ffffff>内容</FONT></P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
如果你还没有熟悉到一看代码就明白，你有必要看一下下面的分析。
本例有四层表格的嵌套，总共使用了六张表格。最里层是三张表格上下排列，属表格组合。我们从外往里分析代码。
最外层的表格，我们设置边框值为1并定义其颜色，这样，配合<td>的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距（cellpadding）为20，它恰好形成了帖子外边框。外表的宽度为600个像素，这是根据本页面而设置的，你可以在实际使用时更改。
第二层表格的原理和外层的差不多，只是，我们更改了各元素的颜色，单元格衬距也调小了，cellpadding赋值为10。
第三层表格没有做太多的设置，我们仅令其背景色为白色、单元格衬距为10，这样得出一个白色的边框。
第四层表格有三个上下并列组合的表格。第一个用来放帖子的标题；第二个表格只是用于隔开第一个和第三个表格并令之与第三层白色底的表格连为一体，为此它的border、cellpading和cellspacing都需要设置为0，高度则为10（与第三层表格所形成的边框一致）；第三个表格用于放置帖子的内容，故将其单元格间距设置为10（也可设置单元格衬距），以便让文字等内容不至于太靠边。
本例帖子里的代码，黑马采用了缩退方式编写，意在让大家能够清楚的看到不同的代码代表不同层的表格，越缩进的代码越在里层（非表格代码和自动换行的除外）。
这个示例只是展现一种思路，你完全可以在此基础上通过其他手段（如添加表格背景图片、加入动态的图形和Flash影片等）做得更复杂、更精美一些。
表格应用示例二
这里讲的一个表格应用示例比较简单：以表格为载体，在表格里面加入图片Flash。
给表格加入一个背景图片，这样一来，表格仍然是可以装载占位元素的容器，因此，我们给已经有了背景图片的表格加载一个Flash影片就成为可能。
应该注意的是，表格要设置高度和宽度，且高、宽应与用作背景图的高、宽相一致，表格的border、cellpadding和cellspacing等值最好设置为 0（原因：为了使图片完美显示）。Flash影片也必须设置高度和宽度，设置为多高多宽应根据实际显示需要而定，但绝对不能大于表格的高度和宽度。
以下，是本示例将要用到的素材：一张图片和一个Flash影片。
[全屏欣赏]
通过查看图片的属性（右击→属性），我们可以看到图片的尺寸为500×375，由此，我们将定义表格的宽为500，高为375。代码如下：
<table border=0 cellpadding=0 cellspacing=0 width=500 height=375 background=图片地址 align=center><tbody><tr><td>此处为加载Flash影片代码</td></tr></tbody></table>
我们通过定义Flash影片可以令底色消失，代码是wmode="transparent"。以下是Flash代码举例：
<EMBED src=Flash地址 pluginspage="http://www.macromedia.com/go/getflashplayer" width=数值 height=数值 type=application/x-shockwave-flash wmode="transparent" quality="high">
现在来看看效果：
全部代码日下：
<TABLE height=375 cellSpacing=0 cellPadding=0 width=500 align=center background=http://img1.qq.com/news/20040606/315746.jpg border=0><TBODY><TR><TD><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=http://imgfree.21cn.com/free/flash/16.swf width=500 height=375 type=application/x-shockwave-flash wmode="transparent" quality="high"></TD></TR></TBODY></TABLE>
熟能生巧，要多加练习哦！
