选择显示字体大小

html网页表格深层探密

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


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons