如何实现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
  • asp之家 网络编程 m.aspxhome.com