[CSS] 기본 속성 - 테이블

CSS 테이블

1. border
2. border-collapse
3. border-spacing
4. caption-side
5. empty-cells
6. table-layout

 

 

1. border

- 테이블의 테두리 설정

table, th, td { border: 2px solid orange; }

 

- <th>, <td> 각각 자신만의 테두리를 갖고 있기 때문에 두 줄씩 적용

=> 한 줄로 설정하려면 border-collapse 속성 사용

2. border-collapse

- collapse : 해당 테이블의 테두리를 한 줄로 표현

- 없으면 기본 설정으로 테이블 요소별 테두리 모두 표현

table, th, td { border: 2px solid orange; }
table { border-collapse: collapse; }

3. border-spacing

- 테이블 요소(th, td)간의 여백 설정

table, th, td { border: 1px solid black; }
table { width: 100%; border-collapse: seperate; border-spacing: 20px 30px; }

 

 

4. caption-side

- 테이블의 캡션 위치 설정

table, th, td { border: 1px solid black; }
.cap { caption-side: top; }

 

5. empty-cells

- 테이블 내의 빈 셀들의 테두리 및 배경색 설정

table.first { empty-cells: show; }
table.second { empty-cells: hide; }

 

6. table-layout

- 테이블에 사용되는 레이아웃 알고리즘 설정

table { width: 500px; table-layout: fixed; }	/* 테이블 크기 고정 */

 

text-align 속성

- 테이블 요소(th, td) 내부에서 텍스트의 수평 방향 정렬 설정

- <th> : 가운데 정렬, <td> : 왼쪽 정렬 이 기본 설정

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; }
td { text-align: center; }

 

 

vertical-align 속성

- 테이블 요소(th, td) 내부에서 텍스트의 수직 방향 정렬 설정

- <th>, <td> : 가운데 정렬 이 기본 설정

table, th, td { border: 1px solid black; }
table { border-collapse: collapse; width: 100%; }
th { vertical-align: top; height: 50px; }
td { vertical-align: bottom; height: 50px; }

 

 

다양한 형태의 테이블 예제

- <th>태그와 <td>태그에 border-bottom 속성을 사용해 수평 나눔선만으로 만든 테이블

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }

 

- :hover 선택자를 이용해 <tr>태그에 마우스를 올리면 행 전체가 하이라이트 되도록 만든 테이블

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; border-bottom: 1px solid #CD5C5C; }
tr:hover { background-color: #F5F5F5; }

 

- background-color 속성과 :nth-child 선택자를 사용해 얼룩무늬 효과를 설정한 테이블

table { border-collapse: collapse; width: 100%; }
th, td { padding: 10px; }
tr:nth-child(odd) { background-color: #F3F3F3; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_tables

코딩교육 티씨피스쿨