테이블 스타일
표를 꾸밀때 사용
(id나 class를 이용해 수정도 가능)
속성
border 테이블의 경계선
border-collapse 이웃한 셀의 경계선을 합칠 것인지 여부
-(separate)이웃한 셀의 경계선을 합치지 않고 분리하여 표시한다(기본값)
width 테이블의 가로 길이
height 테이블의 세로 길이
border-spacing 테이블 셀 사이의 거리
empty-cells 공백 셀을 그릴 것인지 여부
table-align 테이블 셀의 정렬 설정
vertical-align 수직정렬 상(top) 중(middle) 하(bottom) 지정
테이블 예제]
nth-child
n번째 자식 선택자
:nth-child(N)= 부모안에 모든 요소 중 N번째 요소
옵션
odd : 홀수 선택
even : 짝수 선택
2n :두번째 마다 선택
2n + 1 : 2번째마다 선택 첫번째 요소부터
-2n + 5 : 첫번째요소부터 5번째 요소까지 2개마다 선택
n + 5 : 5번째 부터 모두 선택
A:nth-of-type(N)= 부모안에 A라는 요소 중 N번째 요소
:first-child= 부모안에 모든 요소 중 첫번째 요소
:last-child= 부모안에 모든 요소 중 마지막 요소
A:first-of-type= 부모안에 A라는 요소 중 첫번째 요소
A:last-of-type= 부모안에 A라는 요소 중 마지막 요소<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1번 스타일 -->
<style type="text/css">
#list1{
font-family: "Trebuchet MS",sans-serif;
width: 100%;
}
#list1 td, #list th{
border:1px dotted gray;
text-align: center;
}
#list1 th{
background-color: blue;
color:white;
}
#list1 tr:nth-child(2n+1) {
background-color: yellow;
}
/* #list1 tr:nth-child(odd) {
background-color: yellow;
} */
</style>
<!--2번 스타일-->
<style type="text/css">
#list{
font-family: "Trebuchet MS",sans-serif;
width: 100%;
}
#list td, #list th{
border:1px dotted gray;
text-align: center;
}
#list th{
background-color: blue;
color:white;
}
#list tr.alt td{
background-color: yellow;
}
</style>
</head>
<!-- body태그는 동일 -->
<body>
<table id="list1">
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
<tr>
<td>김철수</td>
<td>chul@google.com</td>
</tr>
<tr>
<td>김영희</td>
<td>young@google.com</td>
</tr>
<tr>
<td>홍길동</td>
<td>hong@google.com</td>
</tr>
<tr>
<td>김수진</td>
<td>sujin@google.com</td>
</tr>
</table>
</body>
</html>
결과는 동일
정리된 글 참고 : https://lalacode.tistory.com/6
뉴비 개발자 입니다. velog 주소 : https://velog.io/@jjinny_0609 Github 주소 :