<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<!--script type="text/javascript" src="temp.js"></script-->
<style type="text/css">
body,html {margin:10px; padding:0; font-family:Dotum; font-size:12px; line-height:normal; color:#333;}
table {border:0 none; border-collapse:collapse; table-layout:fixed; border-spacing:0;}
table.basic {border-top:2px solid #FF6600;}
table.basic th, table.basic td {border:0 none; border-bottom:1px solid #FF6600; border-right:1px solid #FF6600;}
table.basic .end td {border-bottom:2px solid #993333;}
table.basic .bg1 td {background:#00FF66;}
table.basic .bg2 td {background:#FFCC66;}
table.basic .bg3 td {background:#fff;}
table.basic .over td {background:#000; color:#fff;}
table.basic th.right, table.basic td.right {border-right:0 none !important;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".basic tr:odd").addClass("bg1"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 홀수번째에 bg1클래스 부여
$(".basic tr:even").addClass("bg2"); //basic이라는 클래스네임을 가진 요소의 tr 요소 중 짝수번째에 bg2클래스 부여
$(".basic tr:last").addClass("end"); //basic이라는 클래스네임을 가진 요소의 tr 요소중 마지막 요소에 end 클래스 부여
$(".basic td:nth-child(3)").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 3번째 요소들에 right 클래스 부여
$(".basic tr:even td:nth-child(4)").addClass("right"); //응용
$(".basic th:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 th 요소중 마지막 요소(들)에 right 클래스 부여
$(".basic td:last-child").addClass("right"); //basic이라는 클래스네임을 가진 요소의 td 요소중 마지막 요소(들)에 right 클래스 부여
$(".basic tr").mouseover(function() {$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
});
</script>
</head>
<body>
<table width="100%" border="1" class="basic">
<tr>
<th scope="col">테스트</th>
<th scope="col">테스트</th>
<th scope="col">테스트</th>
<th scope="col">테스트</th>
<th scope="col">테스트</th>
<th scope="col">테스트</th>
</tr>
<tr>
<td>dddd</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
<tr>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
<td>sdsdfg f fwefw efw ref</td>
</tr>
</table>
</body>
</html>
