网页表格深层探密

原创 2004年10月13日 14:53:00

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

 

  网页制作中表格扮演了很重要的角色。你是否知道,表格还有很多的秘密呢?通过与JavascriptCSS等的结合,表格还有很多巧妙的用处。
  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>标识中的heightwidth设置分割线的高度和长度。
  2、带滚动条的表格

<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" />

  看看图一的效果,可千万不要以为是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>标识之后,就可以任意添加表格中的内容了,同样也可以添加任意的内容,如文字、表格、图片等

网页表格深层探密

  网页制作中表格扮演了很重要的角色。你是否知道,表格还有很多的秘密呢?通过与javascript、CSS等的结合,表格还有很多巧妙的用处。  1、用表格做流动分割线l=Array(6,7,8,9,a...
  • zhcool
  • zhcool
  • 2004年10月18日 11:52
  • 877

NoSQL数据库探密

作者:老纪原载:老纪博客版权所有。转载时必须以链接形式注明转载自老纪博客 [http://www.jifuyi.com/]。本文链接地址:http://www.jifuyi.com/nosql-dat...
  • wdwbw
  • wdwbw
  • 2010年03月08日 16:55
  • 499

堆和栈——内存分配探密

  在计算机领域,堆栈是一个不容忽视的概念,但是很多人甚至是计算机专业的人也没有明确堆栈其实是两种数据结构。要点:堆:顺序随意栈:...
  • malpin
  • malpin
  • 2008年03月07日 15:42
  • 1300

Visual Basic.NET探密

Visual Basic.NET探密  去年微软宣布新版的Visual Basic将进入市场,不久又宣布新的Visual Basic是微软.NET的一部分。自此业界纷纷猜测Visual basic.N...
  • coolstar
  • coolstar
  • 2001年05月23日 13:22
  • 891

Visual Basic.NET探密

Visual Basic.NET探密  去年微软宣布新版的Visual Basic将进入市场,不久又宣布新的Visual Basic是微软.NET的一部分。自此业界纷纷猜测Visual basic.N...
  • gudesheng
  • gudesheng
  • 2008年01月03日 13:07
  • 238

Excel工作表探密

Excel工作表探密周末游了清江的一小段,隔河岩至高坝洲之间的一小段,感觉到清江山水的美丽,被清彻透底的水所环绕的山深处的养丽……言归正传,在Excel工作表对象及其方法和属性中,也存在着一些细微的差...
  • ZOU_SEAFARER
  • ZOU_SEAFARER
  • 2007年01月26日 14:40
  • 1336

ajax之旅--dwr探密

ajax是Asynchronous JavaScript and XML的简称,是一种由javascript通过XmlHttpRequest与服务器交互更新数据的一种异步请求的技术,因为通过ajax你...
  • saltern
  • saltern
  • 2006年10月03日 15:20
  • 590

Documents and settings文件夹探密

Windows 2000以上操作系统中,细心的朋友都会注意到系统盘上有一个Documents and settings文件夹。如果你经常去察看它的大小,就会发现:这个文件夹的容量竟然在不断的增大!我们...
  • andy_212
  • andy_212
  • 2009年04月24日 13:56
  • 250

postgresql 10 分区探密

postgresql官方终于要出分区了,开发线上已经看到提交分区代码了,下一个版本postgresql 10版本带有分区功能基本是没问题了,那么这个分区功能如何呢?且和我深入源码一探究竟。...
  • postgres20
  • postgres20
  • 2016年12月10日 23:02
  • 2135

ajax之旅--dwr探密 

ajax是Asynchronous JavaScript and XML的简称,是一种由javascript通过XmlHttpRequest与服务器交互更新数据的一种异步请求的技术,因为通过ajax你...
  • zengbo0710
  • zengbo0710
  • 2007年05月12日 17:20
  • 659
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页表格深层探密
举报原因:
原因补充:

(最多只允许输入30个字)