手机站
网通分站
电信主站
密 码:
用户名:
当前位置 : 主页>网页制作>Dreamweaver>列表

网页表格深层探密

来源:互联网 作者:west263.com 时间:2008-02-23
西部数码-全国虚拟主机10强!40余项虚拟主机管理功能,全国领先!双线多线虚拟主机南北访问畅通无阻!免费赠送企业邮局,.CN域名,自助建站480元起,免费试用7天,满意再付款! P4主机租用799元/月.月付免压金!

  网页制作中表格扮演了很重要的角色。您是否知道,表格更有很多的秘密呢?通过和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) ;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>标识后加上如下代码就能够了:

<div style="overflow:auto;height:200;">

  当然,对应的在单元格结束</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、带标题的表格


  看看图二的效果。通常,我们要给表格加标题,不是用单元格的方法就是用图片,很麻烦。其实,我们能够只用很一些很简单的HTML标识,就能够轻松实现给表格加标题了。这个标识似乎已被人遗忘,很少看到使用,但是他实现的效果还是很不错的。下面就来看看如何实现:

<fieldset style="width:220" align="center">
<legend>这里是表格的标题</legend>
这里添加表格中的内容
</fieldset>

  几行代码就能够搞掂了!修改width值能够配置表格宽度。<legend>和</legend>之间是表格的标题,您能够配置表格标题的颜色、大小等,甚至是加上个链接。</legend>标识之后,就能够任意添加表格中的内容了,同样也能够添加任意的内容,如文字、表格、图片等。


文章整理:西部数码--专业提供域名注册虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!