jsは単行で異なる色で表示することを実現します.
2203 ワード
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb3212">
<title> </title>
<!-- javascript -->
<script type = "text/javascript">
window.onload = function color(){//
var table = document.getElementById("person");// table id
var rows = table.getElementsByTagName("tr");// table tr
for(var i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].style.backgroundColor = "#EAF2D3";// #EAF2D3
}
else{
rows[i].style.backgroundColor = "White";// white
}
}
}
</script>
<!-- css -->
<style type = "text/css">
#person
{
border-style:1px solid;
border-color:blue;
font-weight:bold;
font-family: ,Arial, Helvetica, sans-serif;
border-collapse:collapse;
margin:auto;
}
#person th
{
border:1px solid;
padding:3px 7px 2px 7px;
background-color:#A7C942;
color:#ffffff;
text-align:center;
}
#person td
{
border-style:solid;
border-width:1px;
text-align:center;
}
</style>
</head>
<body>
<table id = "person" align = "center" width = "90%" height = "200">
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td>33333333</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>44444444</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>55555555</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>66666666</td>
<td> </td>
</tr>
</table>
</body>
</html>