HTML表格使用
| 首 页 | 网页素材 | 网页特效 | 网页教程 | flash教程 | 3dmax教程 | ASP教程 | 常用范文 | 应用公文 |
教 程 | 频道首页 | flash教程 | 3dmax教程 | photoshop教程 | html/css | asp教程 | php教程 | fireworks教程 | dreamweaver教程|
资 料 | java教程 | 网页模版 | 搜索引擎 | 电脑技术 | 网络应用 | 操作系统 | 饮食文化 | 应用公文 | 贺词致辞 | 个人求职 |
频 道 | 明星资料 | 民俗风情 | 传统节日 | 人物传记 | 历史资料 | 常用范文 | 名胜古迹 | 体育资料 | 教育资料 | 综合资料 |
你的位置:首页 > 资料教程 > 正文 > HTML表格使用
HTML表格使用

http://www.sucai123.com 资料教程 2004-10-5 23:21:55

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

  制作带有立体感的表格

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

此新闻共有21 2


-来源:互联网 关闭 HTML表格使用】
∷∷ 相 关 文 章 ∷∷
·通用的javascript的下拉菜单
·弹出网页窗口全攻略(html/hta)
·shtml网页SSI使用详解
·HTML表格使用
·HTML中小meta的大作用
·CSS类及id的规范化命名
·CSS 循序渐进画个瓢
·CSS 循序渐进表里春秋
∷∷ 热 门 推 荐 ∷∷