Html网页表格深层探密

发布时间：2011-07-14 21:43:30作者：知识屋

　网页制作中表格扮演了很重要的角色。通过与Javascript、CSS等的结合，表格还有很多巧妙的用处。

　　1、用表格做流动分割线

　　我们知道，在网页中可以用<hr>标识来做分割线，也可以把表格设置为1个象素高或宽充当分割线。现在，我们将表格与Javascript结合，可以做出更生动的分割线——流动的分割线。加入以下代码，你就可以看到一条分割线，颜色在不断的流动。

　　<script>
　　l=Array(6,7,8,9,'a','b','b','c','d','e','f')
　　t="<table height=2 width=60% cellspacing=0 cellpadding=0><tr>"
　　for(x=0;x<40;x++){t+="<td id=a_mo"+x+"></td>"}
　　document.write(t+"</tr></table>")
　　function f1(y){for(i=0;i<40;i++){c=(i+y)%20;if(c>10)c=20-c
　　document.all["a_mo"+(i)].bgColor="'#00"+l[c]+l[c]+"00'"}y++
　　setTimeout('f1('+y+')',1)}f1(1)
　　</script>

　　在上面的代码中，我们可以通过修改<table>标识中的height和width设置分割线的高度和长度。源代码如图一：
　　图一
　　效果显示如图二：
　　图二

　　2、带滚动条的表格

　　看看图一的效果，可千万不要以为是IFRAME，这可是地地道道的表格！其实，这是表格和CSS结合的效果。当网页上有大段文字要显示，而又没有足够的空间时，这就派上用场了。虽然用文本框也可以实现类似效果，但却远没有用表格灵活。代码很简单，只要在单元格<td>标识后加上如下代码就可以了：

　　当然，对应的在单元格结束</td>标识前加上</div>。我们可以更改height的值，来修改显示文段区域的高度。如以下的示例，就实现了图示的效果。

　　<table width="260" border="0">
　　<tr><td bgcolor="#999999"><font color="#FFFFFF"><b>标题</b></font></td></tr>
　　<tr><td bgcolor="#CCCCCC">
　　<div style="overflow:auto;height:160;">
　　这里输入文段的内容。
　　</div>
　　</td></tr>
　　</table>

　　3、带标题的表格

　　图三