[CSS] 8. 테이블 스타일

1. 테이블 경계선

테이블에 다음과 같은 스타일을 주게 되면 table 요소의 경계선, th요소와 td요소의 경계선이 각각 별도로 생기게 되고 이중 경계선을 적용한 것 처럼 보인다.

1

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

cs

경계선을 통합하려면 border-collapse 속성을 사용해 단일 선으로 표시할 수가 있다.

1 2 3 4

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

cs

수평으로 경계선을 주고 싶으면 border-bottom 속성을 활용한다.

1 2

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

cs

2. 테이블 너비와 높이

테이블의 너비와 높이는 width 속성과 height 속성을 이용해 설정한다.

1 2 3

table, th, td { border: 2px solid black; } table { width: 100%; } th { height: 50px; }

cs

3. 테이블 텍스트 정렬

1) 수평 정렬

text-align 속성은 <th>나 <td>요소의 텍스트를 수평으로 정렬한다.

<th>요소의 기본 정렬은 가운데 정렬이고, <td>요소의 기본 정렬은 왼쪽 정렬이다.

left, center, right 등으로 설정할 수 있다.

다음은 <td>안의 텍스트들을 가운데 정렬하는 예이다.

1 2 3

table, th, td { border: 2px solid black; } table { border-collapse: collapse; } td { text-align: center; }

cs

2) 수직 정렬

vertical-align 속성은 <th>나 <td>요소의 텍스트를 수직으로 정렬한다.

기본적으로는 <th>, <td> 모두 중간에 텍스트가 표시된다.

top, middle, bottom 등으로 설정할 수 있다.

table, th, td { border: 2px solid black; height: 40px; }
table { border-collapse: collapse; }
th { vertical-align: top; }
td { vertical-align: bottom; }

4. 테이블 패딩

테이블 경계선과 내용 사이의 간격을 설정하기 위해 <th>, <td> 요소에 padding 스타일을 준다.

table, th, td { border: 2px solid black; }
table { border-collapse: collapse; }
th, td { padding: 15px; }

5. 테이블 배경색

background-color 속성으로 요소의 배경색을 바꾸며 color 속성으로 텍스트의 색상을 바꿀 수 있다.

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; border-bottom: 1px solid black; }
th { background-color: lightblue; color:white; }

스트라이프로 배경색 효과를 주고 싶다면 nth-child() 선택자를 활용한다.

괄호 안에 숫자가 온다면 n번째 자식인 요소를 찾게 된다. 

예를 들어 tr:nth-child(2)라고 하게 되면 <tr>의 첫번째 행은 과일, 색상, 개수가 적혀있는 행이고 두번째 행이 사과, 빨간색, 3이 적힌 행이므로 tr:nth-child(2)라는 코드는 사과가 적힌 행을 가르키게 되는 것이다.

또한 괄호 안에 (an + b)와 같이 수식 형태로 작성해 준다면 몇 번째 마다 주기가 돌아오도록 설정할 수도 있다.

첫번째 요소부터 시작해 3의 배수만큼 커지는 요소를 선택하고 싶을때 (3n + 1)이라고 적어주면 1, 4, 7, 10...과 같은 주기로 요소가 선택될 것이다.

그리고 아래와 같이 키워드로도 설정할 수가 있다.

이 예제는 괄호안에 odd라는 키워드를 넣어 짝수 요소에만 배경색 효과를 줄 수 있게 하였다.

tr:nth-child(odd) { background-color: lightgray; }

이 예제는 괄호안에 even이라는 키워드를 넣어 홀수 요소에만 배경색 효과를 줄 수 있게 하였다.

tr:nth-child(even) { background-color: lightgray; }

추가로 :hover 속성으로 마우스를 올렸을 때 배경색을 다르게 할 수도 있다.

tr:hover { background-color: lightgray; }