如何实现html表格里隔行换色
来源：asp之家 时间：2007-10-19 13:42:00
今天来讲一下一些实现html中表格隔行换色的方法，即每隔一个行表格的背景色就不同，有静态html/css实现的，也有asp动态实现的。这个功能，我们在做文章列表或产品列表的时候，经常会用到。好处是当文章列表长的时候，通过适当交替的背景色能增加视觉舒适度，同时设计得当也会给页面美工增色不少。
先谈谈换色原理：我们知道在HTML代码中<td></td>为单元格，<tr></tr>为一行；而HTML代码中有bgcolor属性可以设置单元格或行的背景色，如bgcolor=#ff0000就是表示红色。我们只要隔行换个bgcolor的值就实现了隔行换色的功能了！
静态html代码实例：
<table width=80％>
<tr>
<td bgcolor=#ff0000>第一行</td>
</tr>
<tr>
<td bgcolor=#cccccc>第二行</td>
</tr>
</table>
这里代码中只列了一个单元格，所以对一个单元格设置背景色就等于对一行设置了背景色。
如果一行有很多的单元格的话，我们要给每个单元格设置背景色比较麻烦，所以我们一般设置背景色时是对<tr>添加bgcolor属性：
<table width=80％>
<tr bgcolor=#ff0000>
<td >第一行， 第一单元格</td> <td >第一行，第二单元格</td>
</tr>
<tr bgcolor=#cccccc>
<td >第二行，第一单元格</td> <td >第一行，第二单元格</td>
</tr>
</table>
当然这里你也可以使用CSS样式来控制表格的各种属性。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 如何实现html表格里隔行换色 - asp之家</TITLE>
<style type="text/css">
table{
width:80％;
}
.a1{
background:#ff0000;
}
.a2{
background:#cccccc;
}
</style>
</HEAD>
<BODY>
<table >
<tr class="a1" >
<td >第一行， 第一单元格</td> <td >第一行，第二单元格</td>
</tr>
<tr class="a2">
<td >第二行，第一单元格</td> <td >第一行，第二单元格</td>
</tr>
</table> </BODY>
</HTML>
标签：换色,表格,html
0
投稿猜你喜欢
从MySQL4.0向MySQL5迁移数据
2007-11-19 13:11:00
泛域名设置问题
2008-03-25 10:03:00
oblog4.6转换ucenterHome1.5过程全记录，提供老用户无法登陆的补丁
2009-10-29 12:04:00
图像替换新技术:状态域方法[译]
2009-08-06 16:41:00
浅析阿里巴巴前端招聘考题
2008-01-19 09:52:00
如何编写一个创建FTP站点的函数？
2009-11-07 18:51:00
从事设计行业的十年
2008-04-01 09:44:00
如何用MySQL-Front远程连接MySql?
2010-12-03 16:02:00
WorkBench管理操作MySQL
2010-10-14 14:21:00
asp ajax跨域提交数据
2011-04-11 10:56:00
ThinkPHP基于think-queue的队列插件实现消息推送
2023-05-25 05:59:12
Sql Server在安装时提示挂起的解决方法
2009-01-13 13:55:00
又一个仿alert提示效果
2007-12-24 17:34:00
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
2011-06-06 10:28:00
asp如何制作一个小巧的购物车？
2010-07-07 12:25:00
EXECUTE IMMEDIATE用法小结
2009-09-26 18:32:00
比较详细的Asp伪静态化方法及Asp静态化探讨
2011-04-14 10:41:00
js打开新窗口方法代码收集
2007-09-05 19:20:00
快速解决SQL server 2005孤立用户问题
2009-01-04 14:02:00
由日文出错的Bug，重新认识 Replace 函数
2009-07-07 22:28:00