css 를 이용하여 테이블을 미려하게 디자인해보자.
<style></style> 사이에 코드를 추가한다.
테이블 테두리를 만드는 속성
테두리는 border 속성으로 만든다.
table, th, td 요소에 적용할 수 있다. tr 요소에는 적용 안된다.
table 요소에 border를 적용하면 표 외각에 테두리가 그려진다.
table {
width: 100%;
border: 1px solid #dddddd; /* 테이블 외곽선이 그려진다 */
border-collapse: collapse; /* 테두리 사이의 간격 제거 */
}
th, td 요소에 border를 적용하면 각 셀에 테두리가 생긴다.
- border와 padding은 상속하지 않는 속성이다.
th, td {
border: 1px solid #dddddd; /* 각 셀의 외곽선 그리기 */
padding: 10px; /* 테두리와 내용 사이의 간격 */
text-align: center; /* 글자 가운데 정렬 */
vertical-align: middle; /* 셀 안의 내용 세로 정렬 : top, middle, bottom */
}
세로선 없이 가로선만 보이게 하고 싶을 때
table {
width: 100%;
border-top: 1px solid #dddddd;
border-collapse: collapse;
}
th, td {
border-bottom: 1px solid #dddddd;
padding: 10px;
}
제목 행에 배경색 추가하기
th {
background-color: #bbdefb;
}
짝수행에 배경색 추가하기
tr 요소에 nth-child (가상클랙스) 선택자를 이용하여 배경색을 추가한다.
:nth-child는 형제 요소 중에서 규칙을 만족하는 요소를 선택할 때 사용한다.
an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택된다.
- a와 b는 상수, n은 변수
- n은 정수 0, 1, 2, 3, ···
- even 대신에 2n 으로, odd 대신 2n + 1 로 해도 된다.
tbody tr:nth-child(even) {
background-color: #f1f1f1;
}
테이블 행(row)에 마우스 올림 효과
table > tbody > tr:hover {
background-color: #d1f1f1;
}
클랙스를 적용한 테이블 행에 마우스 올림 효과
table.YourClass tr:hover td {
background-color: #d1f1f1;
}
Link2Me
