游客:
注册
|
登录
|
帮助
网友俱乐部
»
网页制作
»
HTML/CSS教程
» 技巧运用无极限 HTML表格使用从入门到精通
网友生活网
|
网友学堂
如何获得金币?
诚招斑竹
IP归属地查询 PR查询 收录查询 whois查询
免费超短2级域名,your.jpy.cc
传世私服
|
传奇世界私服
注册亚洲交友中心,找个人来同居吧!
7CODE查杀恶意代码,守护您的电脑
‹‹ 上一主题
|
下一主题 ››
投票
交易
悬赏
活动
打印
|
推荐
|
订阅
|
收藏
标题: 技巧运用无极限 HTML表格使用从入门到精通
问天
元帅
UID 11493
精华
186
积分 34139
帖子 33348
威望 88
金币 13137
热心 2612
阅读权限 100
注册 2006-4-7
状态
在线
#1
使用道具
发表于 2007-2-15 01:03
资料
个人空间
主页
短消息
加为好友
技巧运用无极限 HTML表格使用从入门到精通
如果你是一名网页设计人员,如果你的网页里没有一个表格,那可以说算不上一个网页(当然全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" onMouseOut="this.bgColor='#FFFFFF'">
< td> < /td>
< td> < /td>
< /tr>
< tr bgcolor="#FFFFFF">
< td onMouseOut="this.bgColor='#FFFFFF'"> < /td>
< td 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>标签把表格内容拆开,放在几个竖向相连的大表格中,把关键内容放在上面的表格中,让它们先显示,这样用户就不会因为失去耐心而关闭窗口了。
网友
问天
签名 - 网友社区
请您回个帖。谢谢
PR查询
免费域名
免费空间
[广告]
免费域名(Free Subdomain)
免费空间(Free hosting)
PR查询(Google Pagerank)
投票
交易
悬赏
活动
控制面板首页
编辑个人资料
积分交易
公众用户组
好友列表
个人空间管理
基本概况
流量统计
客户软件
发帖量记录
论坛排行
主题排行
发帖排行
积分排行
在线时间
管理团队
管理统计
当前时区 GMT+8, 现在时间是 2008-9-7 10:23
信产部ICP备案:
京ICP备05066424号
北京市公安局网监备案:1101050648号
Powered by
Discuz!
5.5.0
TOP
清除 Cookies
-
联系我们
-
网友俱乐部
-
Archiver
-
WAP