设置表格边框颜色
1、源码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>设置表格边框颜色</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="JS/jquery-2.0.2.js"></script>
<style type="text/css">
body{
width: 1250px;
height: 550px;
font-size: 12px;
color: #FF00FF;
}
.tab{
width:100%;
height:100%;
text-align: center;
}
.tab_th{
background-color: #CCCCCC;
}
.tr_odd{
background-color: #EBF2FE;
}
.tr_even{
background-color: #B4CDE6;
}
</style>
<script type="text/javascript">
$(function(){
$("tr:odd").addClass("tr_odd");
$("tr:even").addClass("tr_even");
});
</script>
</head>
<body>
<table class="tab" border="1" cellpadding="0" cellspacing="0"
style="border-color: #00FF00;">
<tr class="tab_th" style="background-color: #000000;color: #FFFFFF;">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>电话</th>
<th>地址</th>
</tr>
<tr>
<td>2013010101</td>
<td>张三丰</td>
<td>24</td>
<td>男</td>
<td>14578545452</td>
<td>湖南省</td>
</tr>
<tr>
<td>2013010102</td>
<td>李思思</td>
<td>21</td>
<td>女</td>
<td>13578545453</td>
<td>湖北省</td>
</tr>
<tr>
<td>2013010103</td>
<td>找钱进</td>
<td>20</td>
<td>男</td>
<td>15678545452</td>
<td>广东省</td>
</tr>
<tr>
<td>2013010104</td>
<td>李四花</td>
<td>22</td>
<td>女</td>
<td>14512454520</td>
<td>广西省</td>
</tr>
<tr>
<td>2013010105</td>
<td>魏忠贤</td>
<td>23</td>
<td>男</td>
<td>14845451512</td>
<td>山西省</td>
</tr>
<tr>
<td>2013010106</td>
<td>西门和</td>
<td>22</td>
<td>女</td>
<td>14854875020</td>
<td>山东省</td>
</tr>
<tr>
<td>2013010107</td>
<td>钱多多</td>
<td>24</td>
<td>男</td>
<td>15865456562</td>
<td>浙江省</td>
</tr>
<tr>
<td>2013010108</td>
<td>刘三级</td>
<td>22</td>
<td>男</td>
<td>17844545454</td>
<td>陕西省</td>
</tr>
<tr>
<td>2013010109</td>
<td>郑少秋</td>
<td>23</td>
<td>女</td>
<td>17845784572</td>
<td>河北省</td>
</tr>
<tr>
<td>2013010110</td>
<td>王晓华</td>
<td>22</td>
<td>女</td>
<td>17845454552</td>
<td>河南省</td>
</tr>
</table>
</body>
</html>
2、显示结果如下:
孜孜不倦,必能求索;风尘仆仆,终有归途。