<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{margin: 50px auto; width:500px}
table{margin: 20px auto;
border-collapse:seperate;
text-align:center}
tr{height:50px;}
</style>
<script src ="../js/jquery-3.2.1.js"></script>
<!--
위치 필터 선택자 : 위치와 관련된 필터 선택자
요소 : odd( 홀수번째 위치한 문서 객체를 선택, 1,3,5..)
요소 : even( 홀수번째 위치한 문서 객체를 선택, 0,2,4,6..)
-->
</head>
<script>
$(function(){
$('tr:odd').css('background','red');
$('tr:even').css('background','green');
$('tr:first').css('background','black').css('color','white');
});
</script>
<body>
<table>
<caption> 추천 도서 표 </caption>
<thead>
<tr>
<th>짝/홀</th>
<th>책 제목</th>
<th>작가</th>
<th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<td>홀</td>
<th>총</th>
<th>2권</th>
<td>30,000원</td>
</tr>
</tfoot> <!--표의 헤더 영역부분 -->
<tbody>
<tr>
<td>짝</td>
<th>스티브잡스</th>
<td>월터아이작슨 저, 안진환 역</td>
<td>25,000원</td>
</tr>
<tr>
<td>홀</td>
<th>나를 지키는 말 88</th>
<td>손화신, 쌤앤파커스</td>
<td>25,000원</td>
</tr>
<tr>
<td>짝</td>
<th>언어의 마술사</th>
<td>해냄인터내셔널</td>
<td>25,000원</td>
</tr>
</tbody><!-- 표의 내용 영역 부분 -->
</table>
</body>
</html>
' sundries' 카테고리의 다른 글
| 1-20 클래스 속성 추가, 제거 (addClass, removeClass) (0) | 2018.01.11 |
|---|---|
| 1-19 요소 (0) | 2018.01.11 |
| 1-17 select option selected (0) | 2018.01.11 |
| 1-16 입력 양식 필터 input type=text (0) | 2018.01.11 |
| 1-15 입력, 양식 필터 / 속성 선택자 input type=text (0) | 2018.01.11 |
