[HTML5] 23. CSS3와 표 + 셀 여백 및 정렬 + 셀 크기 + 배경색과 테두리 효과

23. CSS3와 표 + 셀 여백 및 정렬 + 셀 크기 + 배경색과 테두리 효과

 

 

 

# CSS3와 표 테두리 제어

- border

: 표 테두리를 제어할 수 있음

 

ex 1) border-collapse : collapse;  -->  중복된 테두리 하나로 합치기

테두리가 없는 경우

 

테두리를 합치지 않은 경우

 

테두리를 합친 경우

 

 

 

 

# width, height 와 셀 크기 제어

ex 1) th의 height가 40px, width 가 100px이고 td의 height, width 가 각각 20, 100px인 경우

 

 

ex 2) <thead>와 <thead>의 자손 <th>

 

 

 

 

# 셀 정렬과 셀 여백

- padding

: 여백을 조절할 수 있음

 

- text-align

: right, left, center 등의 정렬을 설정할 수 있음

 

ex) 

+ 셀은 모두 오른쪽 정렬된 상태임

 

 

 

 

# 배경색과 테두리 효과

 

ex)

+ Line 29 ~ 31 을 통해 출력 화면의 배경에 짙은 회색을 입힘

 

 

 

 

# 줄무늬 생성

ex) 짝수 번째 행(<tr>)의 배경색을 aliceblue 색으로 설정하기

 

 

 

 

# 마우스 컨트롤과 행의 배경색 설정

 

ex) 마우스가 올라오면 행의 배경색이 pink로 변하도록 설정

+ Line 22를 통해 마우스 컨트롤에 대응하여 배경색이 바뀌도록 설정함