下载中心┊文章中心┊软件分类┊更新软件┊推荐下载┊热门软件┊更新文章┊热门文章
 
《拓文asp.net网站内容管理系统》官方演示站。
 设为首页    
 收藏本站
 作者:黄振安
 
网站首页 开源拓文 .NET编程 网站编程 网页设计 图形图像 数据库 软件工程留言本
    站内搜索:   
您现在的位置: 拓文网络 → 文章中心 → 网页设计 → HTML → HTML表格使用从入门到精通[正文]

热 门 文 章

相 关 文 章
  • 将Word文档转化为HTML格式的文档
  • DHTML Scriptlet
  • DHTML的初步入门
  • 什么是DHTML(动态HTML)
  • 认识DHTML中的“行为”组件
  • 总结网页代码常用小技巧,网页...
  • 网页代码常用小技巧总结续,网...
  • 优秀网页的6个好习惯,网页制作学习
  • HTML表格使用从入门到精通
     
    [作者:不详    转贴自:不详    点击数:    字体:【大 中 小】    更新时间:2006-3-2 10:13:54]

      如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全FLASH作品除外),表格的重要性就可想而知。帮助我们控制网页布局、控制内容的显示等等。使用表格有很多的技巧,你可否知道呢?  

      使用表格排版网页

      使用表格排版网页,可以使你的网页更美观,条理更清晰,更易于维护和更新。(将表格的宽设为100%,可以使网页的兼容性更好)  

      要尽量细化表格

      不要把整个网页放在一个大的表格里,因为一个大表格里的内容要全部加载完才会显示,如果整个网页放在一个表格里,那么你的网页就只会两种情况:  

      1、全部不显示

      2、全部显示出来  

      所以建议大家将整个页面分成几块,例如通用的上(放置Logo、Banner、Menu等等)、中(放置页面内容)、下(放置版权信息等等),将每一部分由单独的表格来实现,这样会好一些。  

      表格设计实例

      创建一个表格,边框大小设为0(border=0),间距设为1(cellspacing="1"),背景色设为深色(bgcolor="#000000"),全部选定单无格,并将单无格的背景色设为浅色(如:bgcolor="#FFFFFF"),这样可以得到一个细线边框的表格,请看下面的例子:  

      〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

      <tr bgcolor="#FFFFFF">

      <td> </td>

      <td> </td>

      </tr>

      <tr bgcolor="#FFFFFF">

      <td> </td>

      <td> </td>

      </tr>

      </table〉  

      动态改变表格单元格的颜色

      在单元格<td>标记中加入以下代码,会动态改变单元格的颜色设置:

      onMouseOut=”this. bgColor=’’” onMouseOver=”this.bgColor=’’”  

      在行标签<tr>标记中加入上面代码,会动态改变一行的颜色设置。  

      〈table width="50%" border="0" cellspacing="1" bgcolor="#000000">

      <tr bgcolor="#FFFFFF" onMouseOver="this.bgColor=‘#00CC00‘" onMouseOut="this.bgColor=‘#FFFFFF‘">

      <td> </td>

      <td> </td>

      </tr>

      <tr bgcolor="#FFFFFF">

      <td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"> </td>

      <td onMouseOver="this.bgColor=‘#FFFF00‘" onMouseOut="this.bgColor=‘#FFFFFF‘"> </td>

      </tr>

      </table〉

      用表格替代水平线、竖直线

      用表格代替水平线,插入一个表格,将高度设为1(按需要设定),当然也可以将宽度设为1,制作竖直线。  

      〈table width="100" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

      <td height="1" bgcolor="#000000"></td>

      </tr>

      </table>

      <br>

      <table height="100" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>

      <td width="1" bgcolor="#000000"></td>

      </tr>

      </table〉
      

      注意:在Dreamweaver里制作时,先将高设为1后,切换到代码窗口,将表格里的空格符去掉( ),如果不将空格去除的话,将看不到想要的效果了。 

    页次:1/2  1篇/页  首页   上一页   下一页   尾页  合计 2 篇 Go:

     
    上一篇:优秀网页的6个好习惯,网页制作学习
    下一篇:两台SQL Server数据同步解决方案
    winner 打印本页 关闭窗口

         文 章 评 论
    评论人 查看该文章的评论 发表时间
       笔 名* : 0 50分 60分 70分 80分 90分 100分
    评论内容 *: (最多600字。当前字数:0)


    没有相关评论,欢迎您参与!

    - 关于本站 - 网站帮助 - 下载声明 - 友情连接 - 网站地图 -
    Copyright © 2005-2006 myTopWin.Com. All Rights Reserved . [桂ICP备06004496号]