`
jeelee
  • 浏览: 637033 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 控制表格行的颜色

CSS 
阅读更多
鼠标经过表格变色样式:
<style>  
  table   {   background-color:#000000;   cursor:hand;   width:100%;   }  
  td   {  
  /*设置onmouseover事件*/  
  onmouseover:   expression(onmouseover=function   (){this.style.borderColor   ='blue';this.style.color='red';this.style.backgroundColor   ='yellow'}); 
  /*设置onmouseout事件*/  
  onmouseout:   expression(onmouseout=function   (){this.style.borderColor='';this.style.color='';this.style.backgroundColor   =''});  
  background-color:#ffffff;  
  }  
  </style>
控制表格隔行变色:
    简单应用:
        <style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
    高级应用:每个单元格变色
        <style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>
添加CSS文件引用:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />
分享到:
评论

相关推荐

    利用CSS控制表格table的交替颜色

    本文将详细介绍如何通过CSS控制表格`&lt;table&gt;`的交替颜色,并提供具体的代码示例。 ### 一、基本原理 在HTML中,`&lt;table&gt;`元素用于创建表格,而`&lt;tr&gt;`代表表格的一行,`&lt;td&gt;`则表示表格中的一个单元格。CSS提供了...

    用CSS控制表格的交替颜色.rar

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、XHTML等)...请根据文件名`6`探索这些资源,进一步理解和掌握CSS控制表格交替颜色的技巧。记住,不断练习和实验是提高CSS技能的关键。

    精美的css控制表格样式

    本主题聚焦于如何使用CSS来控制表格的样式,以实现“精美的”视觉效果。表格在网页中常用于展示数据,如报告、统计数据或产品目录,而通过恰当的CSS应用,我们可以让这些表格更加吸引人,提高用户体验。 1. **基础...

    css 单击表格变换颜色

    在本主题“css 单击表格变换颜色”中,我们将深入探讨如何使用CSS来实现用户在点击表格单元格时改变其背景颜色的效果,为用户提供更好的交互体验。 首先,我们需要了解HTML表格的基本结构。一个简单的HTML表格由`...

    css+div控制表格 标签代码

    标题“css+div控制表格 标签代码”表明我们将探讨如何利用CSS来改变和优化HTML表格的样式,使其符合网页设计的一般需求。 表格在网页中常用于展示结构化数据,其基本HTML标签包括`&lt;table&gt;`、`&lt;tr&gt;`(行)、`&lt;th&gt;`...

    CSS表格样式1

    6. **表格条纹**:使用`:nth-child`伪类可以创建交替的行颜色效果,增强视觉层次感。 7. **响应式设计**:对于移动设备,可能需要使用媒体查询(`@media`)调整表格的显示方式,如调整列宽或堆叠布局。 8. **排序和...

    js css精美表格

    在创建精美表格时,我们可以利用CSS来定义表格的边框、颜色、字体、对齐方式、背景图像等,以提升表格的视觉吸引力。例如,通过设置`border-collapse`属性可以合并单元格边框,`text-align`调整文本对齐,`...

    8款好看的css表格.rar

    1. **布局与结构**:CSS允许我们将表格的布局控制得更加灵活。可以设置单元格的宽度、高度、内边距和外边距,调整行和列的对齐方式,以及实现响应式设计,使表格在不同屏幕尺寸下都能良好显示。 2. **颜色与背景**...

    21个新奇漂亮的AjaxCSS表格设计

    - **Collapsible tables with DOM and CSS**:通过DOM操作和CSS控制表格的展开和折叠,适合于复杂数据展示。 - **Table Sorter plug-in for jQuery**:支持多列排序、标签的rowspan和colspan属性,具备丰富的功能...

    html纯css实现表格样式

    CSS 则通过选择器和属性来控制表格的样式。以下是一些关键知识点: 1. **基础表格样式**:首先,可以使用 `border-collapse` 属性设置表格边框合并,例如 `border-collapse: collapse;`。这将使相邻单元格的边框...

    css表格样式打包下载

    当涉及到表格时,CSS使得我们可以自定义表格的样式,使其在网页中更具吸引力和功能性。以下是一些关于CSS表格样式的知识点: 1. **基本样式设置**:首先,可以使用`border-collapse`属性来合并单元格边框,例如`...

    CSS在表格边框上的美学应用

    表格边框的控制主要包括边框宽度、边框颜色和边框样式。这些属性可以分别应用到表格的上、下、左、右边框,或者同时应用到所有边框。 1. **边框宽度**: - `border-top-width`:设置表格顶部边框的宽度。 - `...

    用CSS样式定义的圆角表格

    这些标签通过CSS中的`display`属性被设置为块级元素,从而可以控制它们的尺寸和位置。 - 通过调整每个`&lt;b&gt;`标签的边距和高度,可以创建出具有不同圆角弧度的视觉效果。这种技巧在没有现代CSS圆角属性的情况下非常...

    CSS美化友好的表格

    默认情况下,浏览器会以一种平淡无奇的方式显示表格,但通过CSS,我们可以改变表格的边框、颜色、字体和对齐方式。例如,使用`border-collapse`属性可以设置表格边框合并,`border-color`可以改变边框颜色,`font-...

    利用CSS仿Excel表格的效果

    在网页设计中,为了模拟Excel表格的样式和功能,我们可以借助CSS(层叠样式表)来实现。CSS是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言,它能让我们精确控制网页元素的布局和外观。...

    CSS精美表格

    2. 单元格间距:使用`border-collapse`属性控制表格边框是否合并,`cellspacing`属性在HTML中设置单元格之间的空隙。 3. 表格内填充:使用`padding`属性调整单元格内部内容与边框之间的距离。 4. 背景色:使用`...

    网页表格经典css样式

    CSS(层叠样式表)是控制网页样式和布局的关键技术,它允许我们精确地定制网页元素的外观,包括表格。本资源"网页表格经典css样式"提供了一系列经典的表格设计样式,适合初学者学习和参考。 首先,我们要理解表格的...

    纯CSS 做的虚线表格

    `是关键,它允许我们统一控制表格边框的间距和样式,确保虚线边框看起来整洁一致。而`td, th`选择器则选定了所有表格单元格`&lt;td&gt;`和表头单元格`&lt;th&gt;`,应用虚线边框。 不过,有时我们可能只想在某些行或列显示虚线...

    CSS.table.rar_Table_css table_table css_表格css

    在本主题中,我们聚焦于如何使用CSS来美化和增强HTML表格的表现力,尤其是实现表格颜色的动态变化,提升用户体验。以下是一些关于"CSS.table.rar_Table_css table_table css_表格css"中涉及的关键知识点: 1. **...

Global site tag (gtag.js) - Google Analytics