表格应用示例二
◇ 黑马
以下是悠悠然的一个作品的框架。出于讲解方便，黑马在不改变原貌的情况下对原作品作了些改动。
此处放一幅与标题相关的图片
标 题
分隔图标
【正文，由六幅图和五段诗文组成】
分隔图标
签 名
小图修饰+音乐标签
这个作品的框架用了八张嵌套的表格，每一张表格都有背景图片。其中外表是黑马添加上去的，其作用是替代原来的body区域里的背景图，而原作品中的两张用于设置帖子正文处的表格略显多余，黑马已经将其删除，仅保留七张表格。下面给出上面帖子框架的代码并作简单的分析。
<table border=0 cellpadding=20 cellspacing=0 background="yyr/lvsedw.jpg" align=center><tbody><tr><td>
<table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width=84% align=center><tbody><tr><td>
<table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table background=yyr/lvsedn.jpg width=350><tbody><tr><td>
<p align=center>此处放一幅与标题相关的图片</p>
<p align=center>标 题</p>
<p align=center>分隔图标</p>
<p align=center>【这里是正文，由六幅图和五段诗文组成】</p>
<p align=center>分隔图标</p>
<p align=center>签 名</p>
<p align=center>小图修饰+音乐标签</p>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
从代码上看，这并不是一个很复杂的构架，它只是一个多重嵌套的方式。为更能直观地查看各表格定义了背景图后的效果，黑马将各层表格拆开来让大家看看：
表一
表二
表三
表四
表五
表六
表七
表八
接着把这些表格像搭积木一样一个一个地往里套，大致框架就有了，再在第八个表格放一些东西，一个完整的帖子就出笼了。请点击下面的链接查看全帖子的效果：
点击 → 小溪流水
最后给出该帖的核心代码。你应该发现，里面又多出了一些表格。是的，它们是简单的表格，作用仅为规范诗文的居中：每一段诗文使用一个表格，共五个。
《小溪流水》核心代码：
<table border=0 cellpadding=20 cellspacing=0 width="100%" background="yyr/lvsedw.jpg"><tbody><tr><td>
<table border=1 cellPadding=20 cellSpacing=6 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width=84% align=center><tbody><tr><td>
<table border=1 cellPadding=0 cellSpacing=0 background=yyr/lvsesb.jpg bordercolorlight=#637236 bordercolordark=#000000 width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/lvsesb3.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=8 cellSpacing=8 background=yyr/fawnbkgtile2.jpg width="100%"><tbody><tr><td>
<table border=0 cellPadding=1 cellSpacing=1 background=yyr/lvsesb2.jpg width="100%"><tbody><tr><td>
<table background=yyr/lvsedn.jpg width="100%"><tbody><tr><td>
<p align=center><img border=0 src=yyr/002.jpg width=340 height=224></p>
<p align=center><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 华文彩云; FONT-SIZE: 32pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>小 溪 流 水</B></FONT></p>
<p align=center><img src=yyr/lvsefgx.jpg></p>
<p align=center><img src=yyr/bb001.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>涓涓细流，<BR>是淌过我心中的小溪。<BR>潺潺清悠，<BR>是萦绕我梦中的小溪。<BR>汨汨的清响，<BR>时常勾连起，緾绵的追忆。<BR>喃喃的絮语，<BR>时常叨击那 干枯的心堤。<BR><BR>你是银河的映射，<BR>闪耀着星光的神奇；<BR>你是大海的浪花，<BR>颂扬着莽原的博击。<BR>你从崇山峻岭中走来，<BR>传递着洪荒的信息。<BR>你从百阻千障中游离，<BR>挣扎出怪石的绊羁。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb002.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>亘古的积雪，<BR>是你生命的源头；<BR>云雾的氤氲，<BR>是你络绎不绝的延续。<BR>你万绪千头，<BR>仿佛是树叶的纹理；<BR>你阡陌纵横，<BR>好似那血脉的毛细。<BR>丰厚的植被，<BR>将你酝酿成甘美的琼浆。<BR>错综的地貌，<BR>将你过滤成晶莹的玉液。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb003.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>弦月，为你拨响撩人的琴韵；<BR>和风，为你激荡动人的心语；<BR>阳光，为你补充醉人的弦律；<BR>落花，为你挥洒恋人的情意。<BR><BR>春洪秋讯，<BR>是你激情的泛滥；<BR>冰冻悬玉，<BR>是严寒试图阻止你和凡尘的联系。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb004.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>你为宇宙而生，<BR>你为生命而育，<BR>注定了要与<BR>宇宙的喜怒哀乐<BR>交织在一起。<BR><BR>雨儿，渗透到你的魂魄，<BR>雪花，亲吻着你的身躯。<BR>青春，追逐你游戏。<BR>羞涩，借助你轻灵。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb005.gif border=0></p>
<table border=0 align=center><tbody><tr><td>
<p><FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 宋体; FONT-SIZE: 16pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>你一路轻歌， 你一路逶迤，<BR>你放飞心怀，张扬着生命的节拍；<BR>你姿意颠波，坦荡着无瑕的心蒂。<BR><BR>为什么？ 我总是对你 那么痴迷；<BR>为什么？我总和你有那么一段<BR> 割舍不断的情义。<BR>因为那里，也曾<BR> 截留下我青春的脚印，<BR>因为那里，也曾<BR> 伴随着我凄美的叹息。<BR>青春的矫情，承受了你的荡涤。<BR>似水的年华，定格成一个缩影。<BR>耳边时刻回荡着 你的清音。</B></FONT></p>
</td></tr></tbody></table>
<p align=center><img src=yyr/bb006.gif border=0></p>
<p align=center><img src=yyr/lvsefgx.jpg border=0></p>
<p align=center>
<FONT style="COLOR: #60A000; FILTER: shadow(color=#000000); FONT-FAMILY: 华文彩云; FONT-SIZE: 20pt; LINE-HEIGHT: 150%; WIDTH: 100%"><B>文:太白金星<BR>编辑:悠悠然</B></FONT></p>
<p align=center><IMG src=yyr/lvsex.jpg border=0><img src=yyr/lvsex2.jpg border=0><img src=yyr/lvsex.jpg border=0><embed src=http://www.ewen.cc/res/mp3/cd/xiuxian/Track3.wma autostart=true loop=true hidden=true type=audio/x-ms-wma></p>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
