巧用表格标签(仅供本坛朋友参考,勿推荐)-幽梦帆影-西陆网

巧用表格标签(仅供本坛朋友参考,勿推荐)

[楼主] 作者:蓝天是我故乡发表时间:2007/01/21 22:08

收藏修改加精置顶锁定标题来源删除

点击:127次

巧用表格标签

前几天向朋友们介绍了《认识html》（可查看）《贴上心爱的片片》（可查看）言归正传，今天这一节，我们探讨巧用表格标签的问题。

在帖子中引入表格标签，能够使自己的帖子得到有效的固定，不会在屏幕上或大或小，游移不定。编辑得当，页面得到美化，也增添了帖子的视觉效果。网页的制作便是大量地引入了表格标签。

表格标签最主要的有三个元素：

表格的开始与结束：<table>...</table>

表格行的开始与结束：<tr>...</tr>

表格格子的开始与结束：<td>...<td>

每个元素的开始标签，又可以携带若干个属性。各属性之间无先后秩序，属性也可以省略（即取默认值）。属性主要有位置（align=left\center\right）、背景图片的路径(background=图片地址)、边框大小(border=数字)、背景颜色(bgcolor=颜色码)、边框颜色(borderclor=颜色码)、内容与网格线之间的距离(cellpadding=数字)、网格线与网格线之间的距离(cellspacing=数字)、表格元素的宽度（width=数字或百分比）、高度（height=数字）等等。

在一个帖子里，我们可以使用多个表格，或者多个行，或者多个格子。也可以表格套表格，格子套格子，可以随着自己的心愿来编辑。如蓝天在《大话绿洲》（可点击这里查看效果）<TABLE cellSpacing=0 cellPadding=2 width=800 border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD width="35%">
注：此格子为一系列小图片
</TD>
<TD width="65%">
注：此格子为文字
</TD></TR></TBODY></TABLE></DIV></TD></TR></TBODY></TABLE>

以下再讲一个四层表格的实例，其中最后一层贴图的表格是由两个表格行组成的，一行为图片，一行为文字。

源代码如下：

<P align=center>
<TABLE id=table1 style="LEFT: 0px; WIDTH: 762px; POSITION: relative; TOP: 0px" cellSpacing=40 background=http://sarah2001.myrice.com/wyzf/bg8/30.jpg border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=6 borderColorDark=#d0afba cellPadding=0 width="96%" align=center borderColorLight=#d0afba background=http://ex-c.com/FREE/free30.gif border=1>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 borderColorDark=#d0afba cellPadding=0 width="100%" borderColorLight=#d0afba background=http://sarah2001.myrice.com/wyzf/bg1/bjsc014.gif border=0>
<TBODY>
<TR>
<TD>
<DIV align=center><FONT style="FONT-SIZE: 18pt; FILTER: shadow(color=black); WIDTH: 100%; COLOR: #add8e6; LINE-HEIGHT: 150%; FONT-FAMILY: 宋体; HEIGHT: 3px" size=7><strong>图片及注释</strong></FONT></DIV>
<table align=center width=510 border=0 bgcolor="#E9F5D9" cellspacing=5>
<tr>
<td>
<img border=0 width=100% src=http://gb.chinabroadcast.cn/mmsource/images/2005/10/13/pa051013096.jpg>
</td>
</tr>
<tr>
<td>
<font class=p4><P align=center>绒布冰川　(西藏)</P></font>
</td>
</tr>
</table>
<table align=center width=510 border=0 bgcolor="#E9F5D9" cellspacing=5>
<tr>
<td>
<img border=0 width=100% src=http://gb.chinabroadcast.cn/mmsource/images/2005/10/13/pa051013097.jpg>
</td>
</tr>
<tr>
<td>
<font class=p4><P align=center>托木尔冰川　(新疆)</P></font>
</td>
</tr>
</table>
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></P>

在这个源代码中，LEFT: 0px表示边框与页面边界的距离。px前面的值取0，即为与左边界重合；取负数，边框就会突破页面左边界；取正数，边框右边就会突破页面的右边界。width：762PX表示边框的整体外延的宽度，762正好是正常页面的宽度。TOP：0PX表示边框上延与页面顶部的距离，一般取0。cellSpacing=40 是第一层边框与第二层边框的距离，数字越大，边框外层的宽度越大，根据需要调整。效果如下：

图片及注释