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>