CSS实现table表格：隔行换色的效果

表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号<table>表示。定义表格光使用<table>是不够的，还需要定义表格中的行、列、标题等内容。推荐博文：《HTML中Table表格的使用》

在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。示例如下：

<style>/* 奇数行的颜色 */table tbody tr:nth-child(odd) {background-color: #EFF3F5;}/* 偶数行的颜色 */table tbody tr:nth-child(even) {background-color: #FFFFFF;}
</style>

实例效果：

【实例】使用CSS样式实现 table 表格隔行换色的效果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="author" content="pan_junbiao的博客"><title>隔行换色的效果</title><style>table {border-collapse: collapse;}table,table tr th,table tr td {border: 1px solid #ddd;text-align: center;padding: 10px;}/* 表头的颜色 */table tbody th{background-color:#64A1D7;}/* 奇数行的颜色 */table tbody tr:nth-child(odd) {background-color: #EFF3F5;}/* 偶数行的颜色 */table tbody tr:nth-child(even) {background-color: #FFFFFF;}</style></head><body><table><tr><th>序号</th><th>博客信息</th><th>博客地址</th></tr><tr><td>1</td><td>您好，欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>2</td><td>您好，欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>3</td><td>您好，欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>4</td><td>您好，欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr><tr><td>5</td><td>您好，欢迎访问 pan_junbiao的博客</td><td>https://blog.csdn.net/pan_junbiao</td></tr></table>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/45668.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！