动态网站制作指南



当前位置 > 网站建设学院 > 网页制作 > HTML教程 Rss

技巧运用无极限 HTML表格使用从入门到精通


发表日期:2004-6-17


  如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全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后,切换到代码窗口,将表格里的空格符去掉( ),如果不将空格去除的话,将看不到想要的效果了。

  制作带有立体感的表格

  在页面中适当的加入带有立体感的表格元素,会给你的页面添光加彩。

  〈table width="30%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

  < tr>

  < td>A< /td>

  < td> < /td>

  < /tr>

  < tr>

  < td> < /td>

  < td> < /td>

  < /tr>

  < /table>

  < br>

  < table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bgcolor="#9999CC">

  < tr>

  < td>B< /td>

  < td> < /td>

  < /tr>

  < tr>

  < td> < /td>

  < td> < /td>

  < /tr>

  < /table>

  < br>

  < table width="30%" border="1" align="center" cellpadding="1" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#000000" bgcolor="#9999CC">

  < tr>

  < td>C< /td>

  < td> < /td>

  < /tr>

  < tr>

  < td> < /td>

  < td> < /td>

  < /tr>

  < /table〉

  小技巧:效果图中的凸凹效果,完全是由bordercoloer的颜色来控制的,它的颜色浅一些,有会有凸出的效果,它的颜色深一点,就会有凹陷的效果。

  隐藏表格的分隔线

  在处理表格时有时会有这样的需求,某几列、或行的内容属于同一主题,为了排列整齐将它们放在不同的行上,但是不想让表格的分隔线显示出来,有什么办法吗,其实很简单。

  隐藏水平分隔线

  < table border rules=cols cellspacing=0 align=left>

  隐藏竖直分隔线

  < table border rules=rows cellspacing=0 align=left>

  隐藏全部分隔线

  < table border rules=none cellspacing=0 align=left>

  表格内容分行下载

  表格内有一些载入较慢的元素(如计数器、大图片等等)时,往往会延迟整个表格的显示。这是由IE的显示特性决定的,只有当表格内所有元素全部载入后,整个表格才得以显示。“上有政策,下有对策”,我们可以使用< tbody>< /tbody>标签把表格内容拆开,放在几个竖向相连的大表格中,把关键内容放在上面的表格中,让它们先显示,这样用户就不会因为失去耐心而关闭窗口了。

 

关注此文的读者还看过:
·2012-2-7 19:07:55 HTML组件(HTML COMPONENTS)之一
·2012-2-7 19:00:11 隔岸观火 为你解读Flash和HTML5那点事
·2012-2-7 18:56:44 META标签的奥妙
·2012-2-7 18:46:41 HTML及XML语言的转义字符
·2012-2-7 18:45:42 Google 发布 HTML 5 推广网站 HTML5ROCKS
·2012-2-7 18:43:04 Html 书签的使用
·2012-2-7 18:42:12 出色表现 体验HTML5实现的精彩动画
·2012-2-7 18:41:40 HTML之表格标记
·2012-2-7 18:40:41 制作虚线效果的水平线
站长推荐 PS笔刷下载 在线翻译 系统进程 广告代码
  发表评论
姓 名: 验证码:
内 容:
教程搜索服务
项目外包信息
·找长期合作的网页设计师(切图+
·SNS 网站开发
·云南大蓄文化传播有限公司网站设
·药品代购网站
·FLASH网站汉化
·求高手帮我设计一个减肥产品网站
·flash首页制作(已有设计图)
·寻求长期外包人员
·网页页面修改
·北京地区 flash动画合作
·佛山网站建设+263企业邮箱找我。
·ecshop+Discuz! X2+ Home会员整
·寻找网站建设团队或者个人合伙
·LOGO设计外包
·企业网后台程序外包
发布信息 浏览信息
邮件订阅服务
输入你的邮件地址,你将不会错过任何关于<HTML教程>的内容


网页制作文章分类
Dreamweaver教程
FrontPage教程
Javascript教程
CSS教程
DHTML教程
HTML教程
网页特效
心得技巧
Discuz!专栏
站长工具:Google PR查询|Alexa排名查询|网站速度测试|CSS在线编辑器|OPEN参数生成器|弹出式窗口代码产生器|密码登录生成器|在线按钮生成器|Meta标签生成器|邮箱图标在线生成|多色彩特效字代码生成器|网页代码调试器|在线FTP登陆|Flash取色器|配色代码对照表|配色辞典|CSS生成器|CSS在线压缩|广告代码|框架网页代码生成器|js/vbs加密|md5加密|进制转换|UTF-8 转换工具|在线调色板|Html转换js|Html转换asp|Html转换php|Html转换perl
实用工具:汉字翻译拼音|拼音字典|在线翻译|天气预报|火星文|在线网速测试|符号对照表|个税计算|理财工具|黄金价格|购房银行按揭利率计算|汇率查询|经典小工具|汉字简繁转换|普通单位换算|公制单位换算|生辰老黄历|国内电话区号|国家代码与域名缩写|文字加密解密|元素周期表|健康查询|世界时间|全国各地车牌查询|全国车辆交通违章查询|万年历|二十四节气|汉字横竖排版|手机号码查询|计算器|ip搜索
广告刊登 | 版权声明 | 联系我们 | 加入收藏 | RSS订阅
Copyright © 2000-2012 www.knowsky.com All rights reserved | 沪ICP备05001343号