HTML编辑模式下制作表格

前面有朋友问如何做图文并茂的音乐帖子,的确音乐能以表格式做出来,更能让人过目不忘,何况帖子制作过程本身就是创作,包含了制作人对音乐的理解和爱好.以下简单介绍用代码HTML制作表格,希望对大家有所帮助.

等一节:Hello Table

在初学教程及特效代码分析的贴子里都提到表格在论坛发布作品的重要性，相信大家也都深有体会。用HTML代码能够更灵活地控制贴子的效果，但用HTML编辑表格确实有一定的困难，为此，这里将由浅入深，循序渐进地向大家介绍如何用HTML制作表格。
如果你是初学者，本贴将是适合你的；如果你掌握一定的HTML语言，阅读本贴也会对你有一些帮助；如果你已经是高手了，那么，请多多指导。
表格以<TABLE>和</TABLE>分别作起始标识符。其中，<TABLE>里有一些必要的参数，为容易理解起见，小虾在这里只介绍本节用到的参数，其他的参数今后将陆续提到。border参数定义表格边框的粗细，记为border=数值，数值取0，1，2，3等整数。width是我们要定义的参数，它规定表格的宽度，数值通常用100%，记作width=100%，值得注意的是，如果不设置width值，表格将根据单元格里的内容自动定义宽度。height参数规范表格的高度，通常可以不设置，而是让内容的多少让系统自行设定。
<TABLE>和</TABLE>之下，还需要由两个成对的标识符号定义表格的行、列，它们分别是<TR>……</TR>，<TD>……</TD>，tr标识符定义表中的行，td标识符定义数据表元，即每行中的每一列。<TD>……</TD>要包含在<TR>……</TR>里面。一张完整的表格全部语法如下：
<table border=2 width=80%>
     <tr>
         <td>Hello Table</td>
    </tr>
</table>
效果如下：

Hello  Table

怎么样？不太难吧？呵呵，可能你已经跃跃欲试了，那么，来吧，用HTML做你的第一张表格！不用怕，你会成功的！

第二节：表格的修饰（一）
No.1  表格边框的修饰
上面我们讲到border属性，border即为边框，除了有粗细的数值定义以外，还有其他的属性哦。我们先来看看亮边框的颜色和暗边框的颜色设置。亮边框记作bordercolorlight，暗边框记作bordercolordark。它们的数值可以用red、green、blue等表达，也可以用#11ee00这样的方式来表达，比如：bordercolorlight=red，bordercolorlight=#808000。请看下面的表格：

Hello Table

以上表格的全部代码如下：
<table border=6 width=100% bordercolorlight=#008000 bordercolordark=#808000>
  <tr>
    <td width=100%>Hello Table</td>
  </tr>
</table>
上表中，左、上边框是亮边框，右、下边框为暗边框。怎么样？这么一修饰就好看多了吧？
边框颜色方面还有一个属性：bordercolor。当同时设置了暗、亮边框的颜色，bordercolor的颜色设置是多余的，这一点应该注意。现在我们用bordercolor来设置一下表格边框，看看有什么效果：

Hello Table

代码：
<table border="10" width=100% bordercolor=#FF0000>
  <tr>
    <td width="100%">Hello Table</td>
  </tr>
</table>
上面我们学习的有关表格边框颜色的设置，下面继续一起学习表格边框其他方面的知识。
讲两个表格边框的属性：一是边框线（cellpadding）粗细和边框空白处的大小，取值范围从0开始，用正整数。下面是代码和表格效果：
<table border=2 cellpadding=2 cellspacing=8 width=100%>
  <tr>
    <td width=100%>Hello Table 边框线:2 ，边框空白处:8</td>
  </tr>
</table>

Hello Table 边框线:2 ，边框空白处:8

第三节：表格的修饰（二）
No.2  表格背景的修饰
默认情况下，HTML网页里表格的背景色是白色的。这显然不总是符合我们的要求，我们通常会设置各种背景颜色，以配合网页或贴子主题。
设置表格的背景色很简单，给其bgcolor属性赋值即可，写作bgcolor=数值，其数值取值方式和上一讲讲到的边框颜色是一致的，比如：bgcolor=black或bgcolor=#000000。bgcolor属性应该放置在表格初始符<table......>当中。下面举个实例，先是代码，后是效果：
<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00>
<tbody>  
  <tr>
    <td>
      <p align=left><font face=黑体 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>  
      暗边框颜色：#008000<br>
      亮边框颜色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

[注一：代码中用上了设置字体对齐方式，在<td>和</td>之间用<p align=left>来定义左对齐，这种方式的定义无需终止标识符，而定义字体的那句<font face=黑体 size=5 color=#800080>则需要在结束字体定义处有终止标识符号</font>。]
[注二：细心的朋友可能已经发现，表格代码里多了一组<tbody>……</tbody>，这是怎么回事呢？又是什么意思呢？在纯粹的HTML表格里本来可以不要这个的，但论坛有论坛的语法规范，它用<tbody>来定义表格体，如果没有，系统也会自动在<table>和</table>之间加上，且它要把<tr>……</tr>包含在里面。今后在论坛里制作表格应该养成加<tbody>和</tbody>的习惯。]
除了使用背景色，我们还可以使用图片来修饰表格背景，应该说，用图片来修饰表格的外观会更漂亮得多。不过应该注意，用来作表格背景图的文件不要太大，太大了打开网页速度较慢，图片的尺寸方面，要么是有规则图案的小图片，要么就是和表格大小相一致的，否则做出的表格也不会有理想的外观效果。下面我们在上面表格的基础上，用这幅图来作表格的背景图片：
代码及效果如下：
代码(红色那句就是加背景图的语法，放在<table……>当中合适的位置即可)：
<table border=10 cellpadding=2 width=100% bordercolorlight=#008000 bordercolordark=#008060 bgcolor=#CCCC00 background=http://www.h4.dion.ne.jp/~herb/kabe-1.gif>
<tbody>  
  <tr>
    <td>
      <p align=left><font face=黑体 size=5 color=#800080>背景色：bgcolor=#CCCC00<br>  
      暗边框颜色：#008000<br>
      亮边框颜色：#008060</font>
    </td>
   </tr>
  </tbody>
</table>
效果：

背景色：bgcolor=#CCCC00
暗边框颜色：#008000
亮边框颜色：#008060

我们用了两节来讲述表格的修饰方法，相信通过认真学习，朋友们应该有一定的收获。学习不要太急，注意慢慢消化，不然学习是没有效果的。仅仅引用别人的代码虽然也可以制作出精美的作品来，但一旦代码有错，修改起来就十分困难，令人头疼，因此，建议要扎扎实实地去学，认认真真地消化，大胆地去尝试，一步一个脚印。千万别希望一口能吃出个胖子来哦!

第四节：表格内容的编辑

由于本讲涉及到一些编辑排版、字体修饰等语法，小虾先来简单介绍一下这些常用到的语法格式。
<BR>：强制换行，效果等价于在Design模式下的组合键 Shift+Enter。

<p></p>：段落标志。等价于敲一次回车键。

<b>…</b>：字体加粗，与<strong>…</strong>效果一致。

<u>…</u>：下划线。

<em>…</em>：斜体字。

<p align=…>：对齐方式，值取left，right，center。

下面以一个实例代码和效果来演示如何在表格中编排内容。先来看看效果：

美妙的曲子，就是不知道名字

可插入图片和FLASH

声音是你快乐的家
你是声音快乐之源

yy3301制作于二○○六年八月二十八日

代码:

<TABLE border=8 cellPadding=2 width="80%" borderColorLight=#eccea0 borderColorDark=#ecceb9>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=黑体 color=#008000 size=6><B>美妙的曲子，就是不知道名字
</B></FONT><BR><BR><BR>
<P align=center><IMG src="http://www.beihai365.com/bbs/attachment.php?aid=528705&noupdate=yes"><BR><BR>
<P align=right><FONT color=#000080 size=5><B>声音是你快乐的家<BR>你是声音快乐之源</B></FONT><BR><BR>
<P align=center><EMBED src=http://xxzx.wems.net/jxggtd/wems-kj/kjk/yw3/1.mp3 width=350 height=45 type=audio/mpeg mime-types="mime.types" Initfn="load-types" volume="100" autostart="true" loop="true" controls="ControlPanel"><BR><BR><BR>
二○○六年八月二十八日</TD></TR></TBODY></TABLE>

注:从红颜色依次表示扦入帖子题目--图片--帖子主内容--音乐播放器--制作签名

两张表格的嵌套：

Table No.1(Father Table)

Table No.2(Son Table)

Table No.1(Father Table)

代码如下（红色的为第二张表格的代码）：
<table border=8 bordercolor=#0099cc width=100%>
<tbody>
  <tr>
   <td>Table No.1(Father Table)
    <table border=8 bordercolor=#ccffcc width=100%>
     <tbody>
      <tr>
       <td><br>Table No.2(Son Table)<br></td>
      </tr>
     </tbody>
    </table>
    Table No.1(Father Table)
   </td>
  </tr>
</tbody>
</table>
从上面的代码中，我们看得出来，第二张表格代码包含在第一张表格代码中的<td>和</td>里面，这一点一定要弄清楚。不然，终止符不正确或缺少时，由于系统的容错性不好、自动修正功能不够智能化等问题，效果将会很糟糕，错误太严重的话还会使浏览器在运算的时候进入死循环而造成机器当机。
下面是三个表格的嵌套代码及效果，由于表格里没有内容，所以,指定了三级表格的高度。代码中，每一个表格的代码用一种颜色来区分。

代码：
<TABLE borderColor=#6633ff width="100%" border=8>
<TBODY>
  <TR>
   <TD>
    <TABLE borderColor=#cc9966 width="100%" border=8>
     <TBODY>
      <TR>
       <TD>
        <TABLE borderColor=#003300 height=200 width="100%" border=8>
         <TBODY>
          <TR>
           <TD></TD>
          </TR>
         </TBODY>
        </TABLE>
       </TD>
      </TR>
     </TBODY>
    </table>
   </td>
  </tr>
</tbody>
</Table>
一般来说，只要结构清晰，再多的表格嵌套也是一样操作的。再次提示：不管是多少张表格嵌套，一定要注意起始标识符的正确性，稍有点错误，系统会自动帮你更正，但更正的效果或许不是你所需的，而且，一旦错误太多，系统的自动更正也无能为力。

第六节：表格的嵌套（二）
先来看看以下表格：

你应该可以看得出来，上表中有一个一级表格（父表格），里面有两个二级表格（子表格），二级表格一上一下，位置十分清楚。如果你愿意，你还可以在二级表格里再嵌套次级别的表格。
现在我们来看代码，每一种颜色的文字代码一个表格的完整代码，注意观察起始标识符号的前后关系。
<table border=6 bordercolor=#888888 width="100%">
  <tbody><tr><td>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
    <table border=5 bordercolor=#ffcc00 width="100%" height=200>
       <tbody><tr><td></td></tr></tbody>
    </table>
  </td></tr></tbody>
</table>
这种方式的嵌套可以让你有更多的创意，比如，上面的二级表格里放置一个背景图并用透明Flash动画来修饰它，下面一个表格里放置滚动图文，总之，发挥你的想象力，充分利用这种格式制作出令人赞叹的效果来！
第七节：表格的嵌套（三）

与上一节的嵌套效果相比，我们可以明显地看到：上面表格中的两个二级表格是并列放在父表里的。如何做到这个效果呢？
首先，在父表格里，我们用两次“<td>……</td>”将父表分隔成左右各一半，即父表是一个有一行两列的表格。其次，我们在父表的左、右单元格里分别放置一个表格，就形成了以上效果。请研究以下代码清单，为了区分层次，把每一个表格的代码用一种颜色表示，请特别注意父表的代码：
<TABLE borderColor=#ccffcc width="100%" border=4>
<TBODY>
  <TR>
   <TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
   <TD width="50%">
    <TABLE borderColor=#666666 height=300 width="100%" border=4>
     <TBODY><TR><TD></TD></TR></TBODY>
    </TABLE>
   </TD>
  </TR></TBODY>
</TABLE>
上述代码里，定义了二级表格的高度，在实际使用中，你可以根据情况定义或不定义，但要注意两个子表格的高度要一致，否则就很难看。此外，表格的border值要不要应该根据实际需要而定，所以定义为4，是为了使效果更加明显。
表格是HTML文档里的元素之一，它还可以是容器，因此，表格里甚至是表格的单元格里又有表格是正常的，我们就是充分利用这一特点来装饰我们的文档（或贴子）。
前面的三个讲义专门研究了表格嵌套，嵌套原理到嵌套格式及嵌套方法我们都应该学会了。讲义里的例子是简单的，但它们已经将表格的嵌套结构展示完毕，在这个基础上，我们可以制作出复杂而美观的贴子来。所有多层次嵌套及嵌套中的嵌套都是通过一个又一个简单的嵌套来实现的，这就看你的了。