下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#table1 {
width: 100%;
}
thead {
background-color: black;
color: white;
text-indent: 14px;
text-align: left;
}
tbody tr:nth-child(odd) {
background-color: rgba(0, 255, 0, 0.1); /* green, 10% alpha */
}
tbody tr:nth-child(even) {
background-color: rgba(255, 0, 0, 0.3); /* red, 30% alpha */
}
</style>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
<tr>
<td>Row 4, Column 1</td>
<td>Row 4, Column 2</td>
</tr>
<tr>
<td>Row 5, Column 1</td>
<td>Row 5, Column 2</td>
</tr>
<tr>
<td>Row 6, Column 1</td>
<td>Row 6, Column 2</td>
</tr>
<tr>
<td>Row 7, Column 1</td>
<td>Row 7, Column 2</td>
</tr>
<tr>
<td>Row 8, Column 1</td>
<td>Row 8, Column 2</td>
</tr>
</tbody>
</table>
</body>
</html>
源码下载：
alternating-row-colors-in-a-table-in-html5.zip
分享到：
相关推荐
为了解决这一问题，我们可以使用JavaScript（JS）来实现表格行的交替颜色，提高用户的阅读体验。本教程将深入讲解如何用JS控制表格的交替颜色，使其呈现出更美观的视觉效果。 首先，我们需要理解HTML表格的基本结构...
本文将详细介绍如何在 ASP（Active Server Pages）环境中实现表格行背景颜色的交替变换，通过一个具体的示例来展示整个过程。 #### 核心知识点： 1. **ASP 基础**：了解 ASP 的基本概念及工作原理。 2. **创建 ...
利用CSS控制表格table的交替颜色 源码 有图片
在网页设计中，为了增强用户体验和视觉吸引力，各种动态效果被广泛应用，其中之一就是代码文字颜色交替变换。这个特效尤其适用于商城网站，可以吸引用户注意力，提高页面的互动性。在这个"js代码文字颜色交替变换"的...
本话题主要探讨的是如何在易语言的超级列表框中实现行颜色的交替，以提高用户界面的可读性和美观性。 在易语言中实现超级列表框行颜色交替，通常需要借助于自定义消息和发送消息的技术。自定义消息是程序间或同一...
js 实现 设置表格的交替行颜色! 值得下载看看!资源免费,大家分享!!
本教程将详细讲解如何使用CSS来控制表格的交替颜色，使得数据更易读，提升用户体验。 首先，我们需要了解表格的基本HTML结构。一个简单的表格通常由`<table>`标签开始，然后是`<tr>`（表格行）标签，每个`<tr>`标签...
总结来说，通过结合使用jQuery和JavaScript的原生功能，我们可以轻松实现数据排序和表格颜色交替显示。同时，对于动态加载或分页的数据，借助如jQuery DataTables这样的插件，这些功能的实现更加智能化和便捷。了解...
"表格颜色自动隔行变色"是一种常见的美化技巧，它可以使表格看起来更清晰、更易读，帮助用户快速区分不同行的数据。这个功能在Excel、WPS表格、Google Sheets等常见表格软件中都有提供。下面我们将深入探讨这一主题...
行颜色交替通常通过设置项背景色来实现，以创建一种类似电子表格的视觉效果，使得用户能够更快地识别每一行。 实现超级列表框行颜色交替的方法有多种，以下是一些常用的技术： 1. **使用 OwnerDraw 模式**：超级...
这种效果常见于许多应用程序中，如电子表格或数据表，通过改变行的颜色，使用户更容易区分不同的行，提高阅读和浏览的舒适度。 实现这个功能的关键在于理解易语言的事件驱动编程模型。易语言中的控件都有相应的事件...
在本项目"HTML5+css3实现卡通风格的一年四季交替变换动画特效源码"中，开发者通过巧妙地运用这两种技术，创造了一个具有生动视觉效果的动画场景，模拟了一年四季的季节更迭。 首先，HTML5是超文本标记语言的第五代...
在HTML中，我们可以通过CSS（Cascading Style Sheets）来为表格添加颜色，以增强视觉效果和用户体验。本资源"向HTML表格添加颜色网页源代码.rar"显然是一个包含示例代码的压缩包，旨在帮助用户了解如何使用CSS为HTML...
综合以上，这个压缩包可能是一个教学资源或项目文件，用于指导如何在不同环境中实现表格的奇偶行颜色交替效果，无论是网页设计、项目管理还是其他类型的数据可视化。通过解压并查看这些文件，用户可以学习到具体的...
在描述中提到的“DataGrid数据行颜色交替”，是指一种常见的用户界面优化技巧，即行间色彩分隔，也被称为Zebra Striping。这种设计可以使用户更轻松地区分表格中的不同行，提高阅读和扫描数据的效率。在.NET CF的...
为了让表格看起来更加美观、易于阅读，我们可以对`DataGridView`进行一些自定义设置，比如设置交替行颜色。下面将详细介绍如何实现“交替颜色的DataGridView”。 #### 一、DataGridView控件简介 `DataGridView`是...
美化表格 可设置交替色 高亮选中行 代码
通过以上步骤，Word 2007中的Excel表格就能实现奇偶行交替的背景颜色，使得表格更加易读。值得注意的是，这种方法依赖于Word 2007对Excel表格的支持，以及Excel的公式功能，体现了Word 2007在表格处理上的灵活性和...