设计中国
新闻教程设计招聘下载培训图书会员博客聚合
热门文章
·模拟QQ菜单
·Web 2.0网站流行使用的颜...
·网页设计中META标签写法的...
·表格魔鬼教程经典版
·HTML中小meta的大作用
·JavaScript实用的一些技巧
·如何防止网页Demo被盗用
·分析网页文字的字号
·“mailto”标签四则应用技...
·如何利用HTML页面中meta元...

文章搜索

教程推荐





论坛精华
·国外优秀CorelDRAW作品欣...
·《描点大法》升级版
·CD功能之1——POWERCLIP
·各位盟友请将PS大赛作品望...
·NO.2号MM制作过程
·叶子,问个问题?
·FH制作荷花。(简易)
·兔子--再现
·海底世界制作教程
·我的第一副手绘作品,大家...
·很久没来,贴图一张
·翻译了一篇头发教程
·新作一幅!沌鼠标手绘!!!
·Adobe Illustrator 10 发...
·这是我学习ps以来的第一幅...

Html网页表格深层次使用技巧

作者:佚名     日期:2006-04-03 11:45     点击:
字体大小:      


  网页制作中表格扮演了很重要的角色。通过与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>标识之后,就可以任意添加表格中的内容了,同样也可以添加任意的内容,如文字、表格、图片等。

来源:网页教学网


相关文章

·HTML中小meta的大作用 ·HTML语言的标记meta的使用奥妙
·几种网页元素居中方案小结 ·制作强制固定表格大小的效果
·打开新的窗口与保住页面的referrer ·如何利用HTML页面中meta元素?
·图例分析outerHTML的用法 ·XHTML+CSS:调用样式表
·网页技巧 用UL实现非Table四行三列布局 ·利用HTML优化加快网页速度

其他文章



发表评论: 匿名发表 用户名:    查看评论

验证码:
· 您将承担一切因您的行为、言论而直接或间接导致的民事或刑事法律责任
· 留言板管理人员有权保留或删除其管辖留言中的任意内容
· 本站提醒:不要进行人身攻击。谢谢配合。


网站介绍  |  广告业务  |  设计业务  |  免责声明  |  版权声明  |  联系我们

华人设计门户  |  © 2000-2005 设计中国 版权所有