如何实现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
投稿猜你喜欢
使用Python脚本zabbix自定义key监控oracle连接状态
2021-01-02 05:23:54
mysql下为数据库设置交叉权限的方法
2024-01-26 14:16:10
MySQL一键安装Shell脚本的实现
2024-01-16 23:28:29
Dreamweaver4探谜系列(1)
2010-09-05 21:12:00
thinkphp在模型中自动完成session赋值示例代码
2024-05-03 15:51:32
Python构建简单线性回归模型
2021-03-22 19:58:42
SQL Server实现全文搜索查询详解
2024-01-23 05:19:13
php实现将数组或对象写入到文件的方法小结【三种方法】
2023-11-19 05:08:04
python中copy()与deepcopy()的区别小结
2022-02-22 19:39:14
Python3 模块、包调用&路径详解
2021-06-04 06:03:08
浅谈音视频 pts dts基本概念及理解
2023-11-13 03:31:26
Python操作word文档的示例详解
2021-11-10 02:54:51
Python实现模拟登录及表单提交的方法
2021-05-28 19:23:12
asp让网站自动识别手机访问跳转至手机网站
2014-12-06 09:36:02
Python 遍历循环详细
2023-04-07 17:20:24
numpy.transpose()实现数组的转置例子
2021-11-14 13:24:55
超级实用的8个Python列表技巧
2021-01-14 06:27:12
go语言实现猜数字小游戏的方法
2024-02-12 11:47:18
nodejs的错误处理过程记录
2024-05-02 17:37:19
基于OpenCV和Gradio实现简单的人脸识别详解
2022-10-21 22:59:11
