<!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>
</head>
<script>
$(function(){
$('tr:first').css('background','black').css('color','white');
$('td:eq(4)').css('background','#a4ff0b');
$('th:eq(4)').css('background','red');
});
</script>
<body>
<table>
<caption> 추천 도서 표 </caption>
<thead>
<tr>
<th>책 제목</th>
<th>작가</th>
<th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<th>총</th>
<th>2권</th>
<td>30,000원</td>
</tr>
</tfoot> <!--표의 헤더 영역부분 -->
<tbody>
<tr>
<th>스티브잡스</th>
<td>월터아이작슨 저, 안진환 역</td>
<td>25,000원</td>
</tr>
<tr>
<th>나를 지키는 말 88</th>
<td>손화신, 쌤앤파커스</td>
<td>25,000원</td>
</tr>
<tr>
<th>언어의 마술사</th>
<td>해냄인터내셔널</td>
<td>25,000원</td>
</tr>
</tbody><!-- 표의 내용 영역 부분 -->
</table>
</body>
</html>
<script>
$(function(){
$('tr:first').css('background','black').css('color','white');
$('td:first-child').css('background','red');
$('td:nth-child(2)').css('background','#a4ff0b');
$('td:last-child').css('background','#0555fa');
});
</script>
' sundries' 카테고리의 다른 글
| 1-21 클래스 속성 추가 each (0) | 2018.01.11 |
|---|---|
| 1-20 클래스 속성 추가, 제거 (addClass, removeClass) (0) | 2018.01.11 |
| 1-18 위치 필터 선택자 odd, even (0) | 2018.01.11 |
| 1-17 select option selected (0) | 2018.01.11 |
| 1-16 입력 양식 필터 input type=text (0) | 2018.01.11 |
