[前端]表格隔行换色和细线边框实例
- 隔行换色
当表格行数较多的时候，每一行都是同一种颜色不方便阅读。通常的解决方法是采用隔行变色，使得奇数行和偶数行的颜色背景不一样，方便阅读。这种效果非常常见，实现起来也非常简单，给奇数行和偶数行分别设置不同的选择器，css设置不同的背景颜色即可.
![[前端]表格隔行换色和细线边框实例_第1张图片](http://img.e-com-net.com/image/info8/54b966a7729e4f6fb46c34f4d3866c28.jpg)
细线边框
表格默认边框比较粗，可以给表格设置一个背景颜色，cellspacing设为1像素，td颜色设为白色覆盖掉背景颜色，cellspacing空出1像素实现细线边框样式.
![[前端]表格隔行换色和细线边框实例_第2张图片](http://img.e-com-net.com/image/info8/f307a9dc8ba24743abf3a9fb6e69c5dc.jpg)
代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表格隔行换色实例title>
<style type="text/css">
body{
width: 960px;
margin:0 auto;
text-align: center;
font-family: 微软雅黑;
}
.even{
background-color: #8DEEEE;
}
.tb_td{
background-color:#ffffff;
}
style>
head>
<body>
<H1>HTML表格隔行换色实例H1>
<table width="90%" cellspacing="1px" cellpadding="5px">
<tr class="tb_head" >
<th>学号th>
<th>姓名th>
<th>班级th>
<th>性别th>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="old">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
<tr class="even">
<td>1108140119td>
<td>王子td>
<td>计算机111td>
<td>男td>
tr>
table>
<H1>细线表格样式H1>
<table bgcolor="#cccccc" width="90%" cellpadding="10" cellspacing="1px" id="table2" >
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr><tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
<tr>
<td class="tb_td">1108140119td>
<td class="tb_td">王子td>
<td class="tb_td">计算机111td>
<td class="tb_td">男td>
tr>
table>
body>
html>![[前端]表格隔行换色和细线边框实例_第3张图片](http://img.e-com-net.com/image/info8/ba8ed5232687437c861627baf0be9849.jpg)