表格是网页中十分重要的组成元素。表格用来存储数据,包含标题、表头、行和单元格。在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 type="text/css">
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>