网页表格深层探密

网页

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

<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>标识之后,就可以任意添加表格中的内容了,同样也可以添加任意的内容,如文字、表格、图片等。

时间: 2024-09-28 15:07:23

网页表格深层探密的相关文章

标签之美五——网页表格的设计

标签之美--网页表格的使用 通过表格,可以使网页排版更加清晰,形式更加简洁漂亮. 一.表格布局中三个重要的标签 1.<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内. 2.<tr></tr>行标签的开始和结束 3.<tb></tb>列标签的开始和结束 行标签在列标签的外层,不能单独使用,其中必须至少有一列.示例如下: ? 1 2 3 4 5 6 7 <body> <

网页表格边框的设置方法

前面学了网页表格中的单元格线条的设置方法,今天学习网页表格的边框线的设置方法. --------------------------------------------------------------------------------表格边框的显示与隐藏,是可以用frame参数来控制的.请注意它只控制表格的边框图,而不影晌单元格.只显示上边框 <table frame=above>只显示下边框 <table frame=below> 只显示左.右边框 <table fr

用Dreamweaver制作网页表格示例教程

  DreamWeaver是个原本由Macromedia公司所开发的著名网站开发工具.它使用所见即所得的接口,亦有HTML编辑的功能.它现在有Mac和Windows系统的版本.随Macromedia被Adobe收购后,Adobe也开始计划开发Linux版本的Dreamweaver了. Dreamweaver自MX版本开始,使用了Opera的排版引擎 "Presto" 作为网页预览.使用Dreamweaver来制作网页,非常的简单快捷,能够很好的提高网页制作的效率,对网页感兴趣的朋友可以

JS实现网页表格自动变大缩小的方法

 这篇文章主要介绍了JS实现网页表格自动变大缩小的方法,实例分析了javascript操作表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META conten

如何将网页表格内容导入excel

 这篇文章主要介绍了如何将网页表格内容导入excel,需要的朋友可以参考下  代码如下: //导出到Excel,注意,表格标记内不得有注释,因为childNodes会把注释也算进去  //如果出错,需要关闭Excel,否则Excel进程会一直运行着  //td中只能有一个input值  //非td间不可以有组建 否则报缺少":"错误  //引用页面加上<script type="text/javascript" src="execl.js"

页面数据抓取-关于网页表格抓取问题,用什么软件

问题描述 关于网页表格抓取问题,用什么软件 我要抓取的是一个系统内部网页,不能外部访问,数据表格的链接插入有插件.怎么能实现动态抓取??大神啊 解决方案 用抓包的方法最好,然后再分析数据,如果不行,可以考虑用webbrowse这个控件,里面的内容也比较好抓取

真正高安全级别的实验室什么样?探密AZ Labs

本文讲的是真正高安全级别的实验室什么样?探密AZ Labs,在这个租来的特别办公室里,网络被防火墙.保安,以及法拉第静电屏蔽罩层层保护. 你的数据中心和IT研究设施有多安全?除非你是在为军方承包商工作,否则是就别想达到亚利桑那州梅萨市的AZ Labs(亚里桑那实验室)的安全级别. AZ Labs就是个电子堡垒,就像冷战剧集里面演的一样,这片由4栋建筑构成的区域"被认证为处于最高安全级别". 戴恩·穆雷尼克斯,AZ Labs主管,拒绝定义"最高级别"的含义,但很有可能

JS实现网页表格自动变大缩小的方法_javascript技巧

本文实例讲述了JS实现网页表格自动变大缩小的方法.分享给大家供大家参考.具体分析如下: 这就是一个个性的动态表格效果代码,网页中的表格自动放大或者缩小,不停的变化 主要就是一个强调显示的作用 复制代码 代码如下: <HTML> <HEAD> <TITLE>js会动的表格</TITLE> <META content="text/html; charset=hz-gb-2312" http-equiv=Content-Type>

微软网页三剑客之Graphic Designer探密

自Adobe合并Macromedia后,就不断传来微软开发图形图像和动画软件的消息.不过信息少的可怜,特别是号称Flash杀手的"Sparkle",除了一条简短的新闻就没别的了.所谓厚积薄发,没想到微软这次一出手就是三款设计软件,看来是要和Adobe动真格的了. 这个设计软件套装名为Microsoft Expression,包括三部分: 开发代号为"Acrylic "的图形图像处理软件Graphic Designer,相当于Fireworks. 开发代号为"