梦的忧伤

深入学习表格
◇ 黑马
    表格还有一些重要的内容需要彻底弄懂。实际上，这些内容，前面几节我们已经接触过，但我们还需要进一步去探讨一下。
    我们先来做个实验。
    下面黑马给出一条长度为450个像素的分隔线，然后在分隔线下面放置一张表格，其宽度亦为450个像素：


border=1
cesllpadding=15
cellspacing=8
width=450

    现在，我们看到，表格的总宽度仍然是450个像素（它没有超越分隔线），因此，我们可以得出这样的结论：表格的border、cellpadding和cellspacing虽然都是占位元素，但它们不会使得表格变得更宽，换一个更生动的说法，表格的这些元素是往里占位的，而不是往外占位。
    第二个实验：设定表格的宽度为400个像素，然后在里面放置一个可视元素，令其宽度为450，看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。





本表格设定宽度为400个像素，但因表格里的分隔线宽度为450个像素，表格的实际显示宽度发生了变化。

    现在我们看到，虽然在<table>标签里设定了width=400,但表格的总宽度并不是400个像素，而是被表格里面的那条分隔线的实际宽度（450个像素）撑宽了。你可能会觉得奇怪：为什么表格总宽度超过了450个像素呢？道理是这样：表格设置了cellpadding值为10，cellpadding区域是不可放进任何可视内容的。细心比较一下，你将发现，表格宽出的部分正是留空的部分，即表格的单元格衬距。
    可见，表格里面的内容会影响到表格的宽度。实际上，如果我们设置好表格里面的内容的宽度，表格的width值是完全可以不设置的，但这不是一个好的习惯，我们通常仍然需要合理地设置表格的宽度，但必须留意一个问题：表格的总体宽度是否超过了可显示的范围。
    实验三：设定一个450个像素宽度的表格，表格的边框、单元格间距和衬距都为实值，该表格有三个单元格，每个单元格设定宽度为150（加起来恰好的450个像素），看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照。


width=150width=150width=150

    上面的表格，我们设置border=1，cellpadding=10，cellspacing=6，三个单元格的宽度均为150个像素，结果是：表格的总体宽度未发生变化。由此我们得出结论：多单元格表格里，只要各单元格的宽度相加起来不超过<table>里的宽度赋值，它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。
    本节通过实验的方式，从表格的宽度角度剖析了表格的一些深层特征，估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象，加上黑马创造的用分隔线做对照标准和耐心的讲解，悉心阅读和比较后，你会很容易掌握的。

梦的忧伤

表格应用示例二
◇ 黑马
    以下是悠悠然的一个作品的框架。出于讲解方便，黑马在不改变原貌的情况下对原作品作了些改动。
此处放一幅与标题相关的图片
标 题
分隔图标
【正文，由六幅图和五段诗文组成】
分隔图标
签 名
小图修饰+音乐标签








    这个作品的框架用了八张嵌套的表格，每一张表格都有背景图片。其中外表是黑马添加上去的，其作用是替代原来的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>