位置：首页>> 网络编程>> 网页设计>> 如何实现html表格里隔行换色

如何实现html表格里隔行换色

　来源：asp之家　发布时间：2007-10-19 13:42:00　

标签：换色,表格,html

今天来讲一下一些实现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>

<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>

2 3 下一页

投稿

如何实现html表格里隔行换色

猜你喜欢