用CSS和表格代码实现每行交替颜色的效果比较

css|比较

用CSS写出表格每行交替颜色的效果

关于用CSS定义,来表现出表格每行不同的颜色,用来区分每行数据,方便阅读。其中有的是利用IE的BUG,在CSS里面添加动态的内容,IE会解析它,这个先不谈,因为和主题没有关系。

还看到几个很简单的方法,利用给不同的标签不同的背景色达到效果,先看这个方法的CSS

th {font-weight: normal; text-align:left; background: #CCCCCC}
td {background: #FAFAFA}

页面代码

<table>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
<tr>
<th>第一个颜色</th>
</tr>
<tr>
<td>第二个颜色</td>
</tr>
</table>

利用td和th,分别给予不同的背景色,来达到效果。但是,每个标签都有自己特殊的含义,如果用这个方法只是来分割数据,方便查看,那么th就失去它原本的意义,th它代表一列的主题,而在这里它只是为了赋予表格每一行不同的背景色。

web标准化,很重要的一点就是标签的语义化,这里只是想说这个方法确实比较巧妙,运用起来很简单,但违背了标准化最基本的东西,如果你不在乎,你完全可以这么用,甚至可以通过验证。

关于语义化的内容,以后肯定会提到很多,这里只是偶然看到了,然后开个头。

鼠标经过时改变背景颜色或图片

可以用于table的td,也可以用在div上,类似IBM的效果

鼠标经过时改变背景颜色

<table><tr><td width="100" height="100" bgcolor="#DDC676">ihandu</td></tr></table>

鼠标经过时改变背景图片

<table><tr><td width="100" height="100" background="/images/2.gif">ihandu</td></tr></table>

时间: 2024-12-23 18:51:41

用CSS和表格代码实现每行交替颜色的效果比较的相关文章

用CSS如何写出动态表格交替颜色的效果

css|动态  HTML代码<style type="text/css"><!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"#419C33":"#CCEBC7")} --></style></HEAD><table><tr><td> evilpaw1</td><td

用CSS写出的网页动态表格交替颜色的效果

css|动态|网页 <style type="text/css"><!-- tr {background-color:expression((this.sectionRowIndex%2==0)?"#419C33":"#CCEBC7")} --></style></HEAD><table><tr><td> evilpaw1</td><td>

实现 Table 的行交替颜色、选中行变色的一种方法。演示+源码

借用了一下园子里的新闻的标题 :) 使用css和js实现.   新闻标题 添加时间 人气 iPhone 3G拆解图 08-07-27 00,002 奥运核心资源被分食 搜狐央视网谁忽悠谁? 08-07-27 1,234,567 微软推增强浏览器插件IE7Pro 助IE一臂之力 08-07-27 00,123 智联招聘70%股权换1.1亿美元巨额融资 08-07-27 08,888 前Google员工推搜索引擎Cuill 3倍Google网页数 08-07-27 00,654 WCG中国区落幕 一

使用函数完成表格奇偶行的颜色设定

函数 对于表格,为了让用户浏览时不会看错行,一般使用奇偶行机制,可以采用后台经过判断奇偶来给table着色. 这里提供一种简便的方法,即是页面加载完毕后用js脚本判断,对表格进行着色.如下: <!-- 欢迎转载,请保留作者及其出处,谢谢 --><HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE

jquery实现表格中点击相应行变色功能效果【实例代码】_jquery

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

jQuery代码实现表格中点击相应行变色功能_jquery

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除.类似于: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link href=&

20 个精美的Ajax + CSS 的表格效果

20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据.现在让我们来看看这些表格: #1. TableclothTablecloth 由CSS Globe 开发,是一个轻量级的.易于使用的表格,以友好的方式将样式和行为添加到你当前的HTML 表格元素当中. #2. Ask the CSS Guy TableAsk the CSS Guy Table 演示了怎么样创建一个可以显示数据之间的关系的表格,例如在单

DIV+CSS模拟表格对角线

首先声明:这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点.如果对此深以为然的朋友,请一笑过之... 有时在插入文档时,要用到表格对角线,常见的作法是用图片的方式来处理,还有就是用vml来画对角线,能不能用html+css方式来实现呢?答案是肯定的,下面我们来摸拟一个表格对角线.其原理:用边框线来摸拟斜线,我们知道,如果将一个DIV的边框线设置得足够宽并定义了不同的颜色时,其相邻的两条边框线交界处就是斜线.知道了这个原理,我们就可以用bor

如何用CSS定义表格与模拟表格

css 在这里~首先要说明的~我不是推荐大家使用表格布局,而是跟大家说明在显示大批量的数据时~还有表格可以用,而用DIV可以模拟出绝大部分以前的表格布局跟数据显示,在后面会讲些代替表格的显示方式.同时,因为找详细的中文介绍.英文的水平又有限.看W3C那介绍~有些地方可能理解错误,如果有发现的朋友请帮忙指出. [1]表格应用 1表格的基本标签 2分析表格的基本标签3基本演示 [2]层模拟表格1模拟前的建议 2两列多行的数据显示 3三列多行的数据显示 表格应用 1.表格的基本标签: TABLE {