新手学习老知识（五）用好HTML的表格标记

  对于表格，是网页制作中的重头戏，一些图形化网页制作工具（如：Dreamweaver、Fontpage等）对它也支持的非常好，但HTML为表格设置了几十个参数，图形化网页制作工具要对它全面支持就有点免为其难了。由于参数太多，且大部分参数大家也比较熟悉，就不在这里一一介绍了，下面的例子中仅对一些要害性参数作具体介绍。

　　一、作系列横单线

　　这是系列横单线试验，效果还好吧？

　　在这个例子中，用到了表格主标题标记<caption>，它的语法如下：内容来自中国站长资讯网(www.chinahtml.com)

<caption
align=left|center|right
valign=top|bottom>

　　align和valign分别用于设定标题的水平位置和垂直位置。align的默认值是center；valign的默认值是top。利用<caption>标记可以方便地在紧靠边表格的顶部或底部写上文字，且居中，若用其它办法要麻烦得多。另外在本例中能使表格产生单线效果是设置了<table>标记的rules和frame参数，rules参数是对表格的内部边框作显示控制。

　　rules="none"：表示不加内部边框；

　　rules="rows"：表示只显示水平方向的边框；

　　rules="cols：表示只显示垂直方向上的边框；

　　rules="all"：则是显示所有方向上的边框，这也是默认值；内容来自中国站长资讯网(www.chinahtml.com)

　　frame="void"：表示不加外边框；

　　frame="above"：表示显示上边的外边框；

　　frame="below"：表示显示下边的外边框；

　　frame="lhs" ：表示显示左边的外边框；

　　frame="rls" ：表示显示右边的外边框；

　　frame="hsides"：表示显示上下外边框；内容来自中国站长资讯网(www.chinahtml.com)

　　frame="vsides"：表示显示左右外边框；

　　frame="box" 则表示显示所有外边框。

　　明白了参数值的含义，制作本例的效果就简单了，本例完成后的源代码如下：

<table width="60%" border="1" cellspacing="0" cellpadding="0" rules="rows" frame="hsides">
<caption>这是系列横单线试验</caption>
<tr>
<td> 这是系列横单线试验，效果还好吧？</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

　　用这种方法画系列单线，即快又整洁，且所用代码也很少。内容来自中国站长资讯网(www.chinahtml.com)

　　二、作系列竖单线

　　本例这种效果看起来是不是有点特色，其实在制作方法上与上例没有多少区别，只是改变了rules和frame的参数值，使表格只显示垂直方向的内外边框，其它与上例相同，本例完成后的源代码是：

<table border="1" cellspacing="1" cellpadding="8" rules="clos" frame="vsides" height="115" align="left" hspace="10" width="180">
共2页: 上一页 1 [2] 下一页

评论加载中…