上次我们学习中，已经了解到，要想掌握音画帖子的窍门，关键的就是理解画格子的技术。
我们先来复习一下上次学习过的格子：
格子的基本结构，是由这样的几句话组成的：
《格子 宽度＝460 高度＝160 背景＝(图片地址) 边线宽度＝2 边线颜色＝红色》
《格子主体》
《格子横行》
《格子竖列》
《格子竖列结束》
《格子横行结束》
《格子主体结束》
《格子结束》
当然，这上头的白话，得翻译成代码，计算机才能够听得懂：
<table width=460 height=160 background=http//www.somethinghere.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
在上边的代码中，width 是宽度，height 是高度，background 背景图，border 是边线，bordercolor 是边线颜色。里面的数据可以由你任意来替换。
我们今天，是在这个基础上更加深一步的学习格子的结构。我尽可能使用例子，来帮助读者理解。
第一节：格子的宽度设定可以使用相对值
你一定会问，什么是相对值？哈，我自学的时候，就是先问这个问题的！
在上头那个格子基本代码中，我们使用了格子宽度等于460。这个460，是象素。它好比是毫米，厘米。我们叫它绝对值。当我们设定一个绝对值的时候，电脑就老实去执行就好了。
除了设定成绝对值以外，我们还可以设定成相对值。－－－－－－你又追问了，什么是相对值啊？
相对值是告诉电脑，按照一定的比例，灵活设定你要的数值。这个比例，用百分比来告诉电脑。
举例来讲，宽度＝100％
电脑看见这个以后，就会按照能够显示的空间，来100％显示你的帖子宽度。
这样的好处，是不管你电脑的显示清晰度多少，打开帖子时，它的宽度总是占满论坛帖子版面的，不大也不会小。
让我们来做一个对比练习:
画三个格子，一个的宽度，按照100％来设定，第二个的，按照80％来设定，第三个的，按照30％来设定：我打算这么来画：
格子一号，宽度是100％，高度是300，背景图片地址是：http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg ，边线宽＝2，边线色＝红色；
格子二号，宽度是80％，背景图片地址是：http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg ，边线宽＝2，边线色＝红色；
你看得出来，两者的区别，只是宽度，一个是100％， 另一个是80％。
一号（100％宽度）的代码是这个样子：
<table width=100% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
二号（80％宽度）的代码是这个样子：
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
三号（30％宽度）的代码是这个样子：
<table width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
下面是三个格子的对比
一号100％
二号80％
三号30％
当你检测别人帖子的代码时，你可能早就发现他们经常使用相对宽度值的。
第二节：多个格子构成横行和竖列
我们迄今为止，都还只在画一个格子。如果有多个格子，那就构成了“表格”。表格就是好多个格子聚在一起构成的，那么表格中的那些单个单个的格子，就叫“单元格”了。
常见的音画帖子，多是大格子里头套小格子的模式。我们会在后续章节来学习，这里要简单介绍一下“表格”，因为它是一个很重要的基础部份。对于我们下面的自学非常重要。
在以前的学习中，我们知道格子的代码是：
<table width=460 height=160 background=http//www.somethinghere.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tbody>
</table>
这段代码，我们学习过第一行。知道那里是设定高，宽，背景等等的地方。
下头的代码中，tr 是英文 table row 的缩写，意思是“表格的横行”，td 是英文 table down 的缩写，意思是“表格的竖列”。横行竖列，就是对我这个英文还不错的人来说，也是看着不知东南西北。我的办法，是记住td里头有个d，就是“弟弟”，“往下”。记住一个了，另外一个自然就记住了。
所以，我们现在知道，tr 是横行。td 是竖列。有多少tr， 就有多少竖列，有多少td， 就有多少横行。
在html代码中，要求tr 是大哥，td是小弟。就是说，td是套在tr里头的。
我们的文字图象音乐等，都是插入在td里头的。这点非常重要！
特别提醒，这些代码都是首位呼应，不可或缺！比如，开始<tr>， 结尾就是 </tr>,开始<td>， 结尾就是 </td>
好了，我们现在来看例子.
画三个表格，
一号只有一个单元格，格子里头写上“一号”
二号是横行两条，竖列三条，一共就是2X3＝6个单元格，里头分别写上横一竖一， 横一竖二。。。等等
三号是横行三条，竖列两条，一共也是3X2＝6个单元格，里头也是相应写上横一竖二。。。。等等。
下面是三个表格的代码，注意看我写的文字，都是写在<td>........</td>之间的：
一号表格：（只有一个单元格）
<table width=50% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
一号
</td>
</tr>
</tbody>
</table>
下面是效果图：
二号表格：（两横行，三竖列，六个单元格）
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
横一竖一
</td>
<td>
横一竖二
</td>
<td>
横一竖三
</td>
</tr>
<tr>
<td>
横二竖一
</td>
<td>
横二竖二
</td>
<td>
横二竖三
</td>
</tr>
</tbody>
</table>
下面是效果图：
| 横一竖一 |
横一竖二 |
横一竖三 |
| 横二竖一 |
横二竖二 |
横二竖三 |
三号表格： （三横行，两竖列，六个单元格）
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
横一竖一
</td>
<td>
横一竖二
</td>
</tr>
<tr>
<td>
横二竖一
</td>
<td>
横二竖二
</td>
</tr>
<tr>
<td>
横三竖一
</td>
<td>
横三竖二
</td>
</tr>
</tbody>
</table>
下面是效果图：
| 横一竖一 |
横一竖二 |
| 横二竖一 |
横二竖二 |
| 横三竖一 |
横三竖二 |
第三节：表格中的单元格可以合并
通过表格中单元格的合并，我们可以创造出不同的空间来，为我们制作音画帖子提供方便。
这话说得有些玄乎，先看我的例子，再让我来讲解如何一个提供方便法吧！
合并横行，使用代码： rowspan, 这个是英文 row span 的缩写，意思是，“横行合并”
合并竖列，使用代码：colspan，这个是英文 column span 的缩写，意思是，“合并竖列”
具体使用时，是这个样子：
rowspan＝2 就是告诉电脑，把横行给我合并两个，
colspan＝3 就是告诉电脑，把竖列给我合并三个。
下面，我们来看例子。
以上头那个三号表格为例。那是一个三横行，两竖列的表格。
例子一： 把左边第一竖列中的三个横行合并唯一，右边留着三横行。我们要干的，是合并三横行，于是使用代码：rowspan＝3。这时，横一竖一，横二竖一，横三竖一，都变成一个整体，让我们叫它“左边竖列”吧。
这时的代码就是这个样子：
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td rowspan=3>
左边竖列
</td>
<td>
横一竖二
</td>
</tr>
<tr>
<td>
横二竖二
</td>
</tr>
<tr>
<td>
横三竖二
</td>
</tr>
</tbody>
</table>
下面是效果图：
那么，这种操作，在制作音画帖子上，有什么意思呢？
比如，你可以把图片放在左边合并了的格子中，在横一竖二中写上标题，横二竖二中加入音乐介绍，在横三竖二中加入音乐播放器。
上头我们学习了如何合并横行，下面，我来演示一下，如何合并竖列。
还是使用楼上第二节里头的三号表格吧，我要合并第一横行，第三横行，只留下第二横行有两个竖列的分布。
合并竖列，使用代码 colspan，因为要合并两个竖列，所以是 colspan＝2，让我把合并后的横行一叫做“头行”， 把合并后的横行三叫做“底行”。
于是代码看起来是这个样子：注意我在两处做了合并，一处在横一，一处在横三。
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td colspan=2>
头行
</td>
</tr>
<tr>
<td>
横二竖一
</td>
<td>
横二竖二
</td>
</tr>
<tr>
<td colspan=2>
横三竖一
</td>
</tr>
</tbody>
</table>
下面是效果图：
这个操作，又有什么意义呢？
比如，你可以在头行中书写帖子标题，而在底行中，使用移动文字，添加介绍文字等等等。
第四节：表格中各个格子之间的距离，叫“格间距”，英文是 cell spacing, html代码中，是 cellspacing
拿这个“格间距”作为单独一节，说明了它很重要。因为它决定了音画帖子框架的样子。
格间距是一个表格中，每个单元格子之间的距离。当一个格子套在另外一个格子中时，它是里头格子到外套格子的距离。
格间距的设定，是在格子代码第一行 <table.......>中间。
下面，我来用几个例子说明格间距。
还是以楼上第二节三号表格为例吧。下面是三号表格：
<table width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
横一竖一
</td>
<td>
横一竖二
</td>
</tr>
<tr>
<td>
横二竖一
</td>
<td>
横二竖二
</td>
</tr>
<tr>
<td>
横三竖一
</td>
<td>
横三竖二
</td>
</tr>
</tbody>
</table>
| 横一竖一 |
横一竖二 |
| 横二竖一 |
横二竖二 |
| 横三竖一 |
横三竖二 |
在这个表格里头，每个单元格之间，几乎没有间隔。让我来添加一些吧，我打算添加格间距50,于是代码变成这个样子了：
<table cellspacing=50 width=80% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
横一竖一
</td>
<td>
横一竖二
</td>
</tr>
<tr>
<td>
横二竖一
</td>
<td>
横二竖二
</td>
</tr>
<tr>
<td>
横三竖一
</td>
<td>
横三竖二
</td>
</tr>
</tbody>
</table>
看看效果如下：
| 横一竖一 |
横一竖二 |
| 横二竖一 |
横二竖二 |
| 横三竖一 |
横三竖二 |
你会发现，每个单元格之间，多出来一些空隙了。
如果这是一个大格子套小格子，多出来的地方，就是那块边框的宽度。我会在后续专门介绍。
第五节：格子的宽度和高度，是会被格子里头的内容撑大的
可能你已经在套用我那些现成的音画帖子框架时注意到这样的情况，就是不管你往框架里头填写多少东西，它自动伸长加高。这个是html代码的一个特点。如果你的宽度设定不是100％，它也会根据内容需要，去撑开宽度的。
好处是，你不用担心如何设定宽度长度，尽管往框架里头填写东西。
坏处是，如果你使用图片作为背景，图片的大小有限度，当内容撑开了边框的时候，会出现框架大，衬底小的情况。
举例来讲这个题目。
好比说，我喜欢这样一张图片：
我打算用它来做我的格子的背景。我事先检查一下这个图片的大小：右键单击，看属性，300 X 339 象素。
于是，我知道我的框架最好也是做成 300 X 339 的大小，这样图片加上框架，岂不是挺好看啊！
我还打算在帖子中间，写上古诗：
《暮秋独游曲江》
李商隐
荷叶生时春恨生，
荷叶枯时秋恨成。
深知身在情长在，
怅望江头江水声。
于是我写下这样的代码：
<table width=300 height=339 background=http://www.ce.cn/newtravel/gny/yzzg/200705/23/W020070523248084103243.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
《暮秋独游曲江》
李商隐
荷叶生时春恨生，
荷叶枯时秋恨成。
深知身在情长在，
怅望江头江水声。
</td>
</tr>
</tbody>
</table>
下面是效果图：
| 《暮秋独游曲江》 李商隐 荷叶生时春恨生， 荷叶枯时秋恨成。 深知身在情长在， 怅望江头江水声。 |
看得出来，这个帖子基本是在 300 X 399 这样的大小中。
可是，如果我的内容特别多，又会出现什么情况呢？ 假设，我把一大段文字加入到里头，如下：
<table width=300 height=339 background=http://www.ce.cn/newtravel/gny/yzzg/200705/23/W020070523248084103243.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
海涅写爱情诗，用了很多手法，但归结起来，大致可以分为三类。一类是直抒胸臆的，或可称为“动作型”的，比如“我一看到你的眼睛”，“我把我的头偎依在你的雪白的肩上”，“一个青年有所爱”；一类是通篇借喻的，或可称为“寄寓型”，比如“蝴蝶爱着玫瑰花”，“一棵松树在北方”，“莲花儿战战兢兢”；一类是以比兴为主或以环境描写为主的，或可称为“烘托型”，比如“恋人啊，我们并坐着”，“哪怕室外的雪堆得很高”，“在极美的五月里”。本诗当属于第三类。
这首诗分五个自然段。前四段全是写环境，直到第五段才写出“爱情”的真意。海涅的时代尚是意境的时代（进入二十世纪后诗人们才开始大规模地崇尚意象）。这首诗给了我们一个非常美妙的意境，如果用我们中国诗论的概念来说，整首诗也有个“诗眼”，那就是“寂静”。这首诗通篇是多么的静啊，“寂静的月光”，莲花的“等待”，羚羊的“暗地里倾听”自不待言，紫罗兰、玫瑰的“轻笑调情”、“偷偷”讲童话似乎有声，其实谁都知道是无声的，愈发在寂静上加上拟人化的、幽美的色彩，使那个静字像涟漪般一圈圈溢开来，静得更深，更可爱了；至于远处恒河水的喧腾，则有如我国古诗“鸟呜山更幽”的写法，以自然界的有声，进一步托出万籁俱寂的境界。待这个静的环境铺陈得淋漓尽至了，诗人和他的爱侣才出现了，“吸饮爱情和寂静，沉入幸福的梦幻”，这种净化了的、“静”化了的爱情理想在这么一种环境中得以实现，完全是水到渠成了。
这首诗的另一个特色，不妨称之为“辅助诗眼”，是神奇。在那个时代的欧洲人（尤其是诗人）心目中，东方是个神奇的世界，陌生和遥远都是神奇的导因，比之诗人们生活的世俗环境，那儿像有一种猜测性的、超脱尘俗的光环。海涅曾在波恩大学听过梵语学家施莱格尔的讲课，故一直对东方印度心神系之。诗中出现的羚羊是东方诗人（如哈菲兹）常爱描绘的动物；把花儿散发的芬芳喻为花儿的语言，也是东方的表达方式。海涅把诗的环境放在东方，并用了一系列东方的诗歌形象，使诗歌得以神奇化，使难以表达的爱情的美妙神奇得到了充分的烘托，从而充分写出了作者纯真的爱情理想，那无边的向往渴望。
</td>
</tr>
</tbody>
</table>
我们再来看看效果：
| 海涅写爱情诗，用了很多手法，但归结起来，大致可以分为三类。一类是直抒胸臆的，或可称为“动作型”的，比如“我一看到你的眼睛”，“我把我的头偎依在你的雪白的肩上”，“一个青年有所爱”；一类是通篇借喻的，或可称为“寄寓型”，比如“蝴蝶爱着玫瑰花”，“一棵松树在北方”，“莲花儿战战兢兢”；一类是以比兴为主或以环境描写为主的，或可称为“烘托型”，比如“恋人啊，我们并坐着”，“哪怕室外的雪堆得很高”，“在极美的五月里”。本诗当属于第三类。 这首诗分五个自然段。前四段全是写环境，直到第五段才写出“爱情”的真意。海涅的时代尚是意境的时代（进入二十世纪后诗人们才开始大规模地崇尚意象）。这首诗给了我们一个非常美妙的意境，如果用我们中国诗论的概念来说，整首诗也有个“诗眼”，那就是“寂静”。这首诗通篇是多么的静啊，“寂静的月光”，莲花的“等待”，羚羊的“暗地里倾听”自不待言，紫罗兰、玫瑰的“轻笑调情”、“偷偷”讲童话似乎有声，其实谁都知道是无声的，愈发在寂静上加上拟人化的、幽美的色彩，使那个静字像涟漪般一圈圈溢开来，静得更深，更可爱了；至于远处恒河水的喧腾，则有如我国古诗“鸟呜山更幽”的写法，以自然界的有声，进一步托出万籁俱寂的境界。待这个静的环境铺陈得淋漓尽至了，诗人和他的爱侣才出现了，“吸饮爱情和寂静，沉入幸福的梦幻”，这种净化了的、“静”化了的爱情理想在这么一种环境中得以实现，完全是水到渠成了。 这首诗的另一个特色，不妨称之为“辅助诗眼”，是神奇。在那个时代的欧洲人（尤其是诗人）心目中，东方是个神奇的世界，陌生和遥远都是神奇的导因，比之诗人们生活的世俗环境，那儿像有一种猜测性的、超脱尘俗的光环。海涅曾在波恩大学听过梵语学家施莱格尔的讲课，故一直对东方印度心神系之。诗中出现的羚羊是东方诗人（如哈菲兹）常爱描绘的动物；把花儿散发的芬芳喻为花儿的语言，也是东方的表达方式。海涅把诗的环境放在东方，并用了一系列东方的诗歌形象，使诗歌得以神奇化，使难以表达的爱情的美妙神奇得到了充分的烘托，从而充分写出了作者纯真的爱情理想，那无边的向往渴望。 |
这时，帖子的宽度还是 300， 但是因为内容太多，帖子自动伸长了，而且还试图用同样的图片来做背景。
所以，要注意这个自动伸长的特性。
第六节：格子方位设定
当你制作一个格子的时候，这个格子出现在论坛版面的位置，是在格子代码的第一行中来设定：<table......>
需要使用的代码是 align 英文的意思就是 “对齐”，
可以使用的方位有： center （居中）， left （居左） right （居右）
记住喔，它决定的是帖子在版面中的位置，而不是帖子里头的内容的排版。
举例来讲：
以楼上第一节里头的那个 30％相对格子为例：
这是它原来的代码：
<table width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
居中放置，则加入对齐等于居中：
<table align=center width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
效果如下：
居右放置，则加入对齐等于居右：
<table align=right width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
效果如下：
居中放置，则加入对齐等于居中：
效果如下：
居左，align=left, 我就不演示了。
那么，帖子里头的内容放置，是如何来定的呢？
帖子里头的内容，是在 <td> 这个代码里头来排定的。
我们前头说过，帖子里头的内容，插入代码中的地方，就是在 <td>.....</td> 之间。那么，在td中，可以有哪些位置设定呢？
td里头的内容摆放，横向的，跟格子第一行一样，可以设定居中，居右，居左，而且使用的代码都一样，align＝center， align＝right， align＝left。
纵向的，使用的代码是 valign， 它是英文 vertical align (纵向对齐）的缩写。
可以使用的方式有： valign=top （靠顶）, valign=bottom（靠底）, valign=middle（居中）.
假设我在刚才那个格子里头，添加了这样一些文字，“这首诗作于1822年。”让我们来看看，td里头可以如何来调整文字的拜访位置.
例子一：上下居中，左右居中
<table width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td align=center valign=middle>
这首诗作于1822年。
</td>
</tr>
</tbody>
</table>
看看效果：
例子二：上下居顶，左右居中
<table width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td align=center valign=top>
这首诗作于1822年。
</td>
</tr>
</tbody>
</table>
看看效果：
例子三：上下居底，左右居右
<table width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td align=right valign=bottom>
这首诗作于1822年。
</td>
</tr>
</tbody>
</table>
看看效果：
例子四：上下居底，左右居右，而且要帖子也居中
<table align=center width=30% height=300 background=http://xz1.2000y.net/348114/uploadpic/2004113022327180.jpg border=2 bordercolor=red>
<tbody>
<tr>
<td align=right valign=bottom>
这首诗作于1822年。
</td>
</tr>
</tbody>
</table>
看看效果：
因为我们有论坛软件中的“所见既说得”，所以这些排版的代码使用都得到简化了。不过能学习理解这些代码的功能，必定会有益与你在套用，借用他人代码的努力过程中。
花了好几个小时，总算把我认为是基础的部份写完了！
以后，我将进入讲解代码的实际运用。今天我的自言自语，涉及到不少html的代码，我估计会有不少难度和困扰的。如果你遇到不明白，或者完全不清楚的地方，尽管提问出来，我会逐一解答。
我自学的时候，多是阅读这个网站，一并介绍给同桌的你：
http://www.gxblk.com/pc/no3/thtml.php?id=0
下面我的学习计划是：
表格嵌套：解剖音画帖子框架
