CSS 테이블

테이블 테두리

CSS에서 테이블 테두리를 지정하려면 border 속성을 사용합니다.

아래 예제는 <table> 및 <td> 요소에 대한 실선 테두리를 지정합니다.

예제 1
table, th, td {
  border: 1px solid;
}

전체 너비 테이블

위 테이블은 경우에 따라 작아 보일 수 있습니다. 전체 화면(전체 너비)에 걸쳐야 하는 테이블이 필요한 경우, width: 100%를 <table> 요소에 추가합니다.

예제 2
table {
  width: 100%;
}

이중 테두리

위의 예제의 표에는 이중 테두리가 있습니다. 이는 테이블과 <th> 및 <td> 요소 모두 별도의 테두리를 가지고 있기 때문입니다.

테이블 테두리 숨기기

border-collapse 속성은 테이블 테두리를 단일 테두리로 접어야 하는지 여부를 설정합니다.

예제 3
table {
  border-collapse: collapse;
}

테이블 주위에 테두리만 두려면 <table>의 border 속성만 지정하십시오.

예제 4
table {
  border: 1px solid;
}

테이블 너비와 높이

테이블의 너비와 높이는 width 및 height 속성에 의해 정의됩니다.

아래 예제에서는 테이블의 너비를 100%로 설정하고 <th> 요소의 높이를 70px로 설정합니다.

예제 5
table {
  width: 100%;
}

th {
  height: 70px;
}

페이지의 절반만 포함하는 테이블을 만들려면 width: 50%를 사용합니다.

예제 6
table {
  width: 50%;
}

수평 정렬

text-align 속성은 <th> 또는 <td>에서 내용의 수평 정렬(예: left, right 또는 center)을 설정합니다.

기본적으로 <th> 요소의 내용은 가운데 정렬되고 <td> 요소의 내용은 왼쪽 정렬됩니다.

<td> 요소의 내용도 가운데 정렬하려면 text-align: center;를 사용합니다.

예제 7
td {
  text-align: center;
}

<th> 내용을 왼쪽 정렬하려면 text-align: left; 속성을 사용하여 요소의 정렬을 왼쪽 정렬하도록 합니다.

예제 8
th {
  text-align: left;
}

수직 정렬

vertical-align 속성은 <th> 또는 <td>에서 내용의 수직 정렬(top, bottom 또는 middle)을 설정합니다.

기본적으로 표의 내용 수직 정렬은 가운데입니다(<th> 요소와 <td> 요소 모두).

다음 예제에서는 <td> 요소의 수직 텍스트 정렬을 맨 아래로 설정합니다.

예제 9
td {
  height: 50px;
  vertical-align: bottom;
}

테이블 패딩

테이블의 테두리와 내용 사이의 공간을 제어하려면 <td> 및 <th> 요소의 padding 속성을 사용하십시오.

예제 10
table, td, th {  
  border: 1px solid #ddd;
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 15px;
}

수평 구분선

수평 구분선의 경우 border-bottom 속성을 <th> 및 <td>에 추가합니다.

예제 11
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

호버 테이블

<tr>의 :hover 선택기를 사용하여 마우스 위의 테이블 행을 강조 표시합니다.

예제 12
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {background-color: coral;}

줄무늬 테이블

줄무늬 테이블의 경우 nth-child() 선택기를 사용하여 모든 짝수(또는 홀수) 테이블 행에 배경색을 추가합니다.

예제 13
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

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

테이블 색상

아래 예제는 요소의 배경색과 텍스트 색상을 지정합니다.

예제 14
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #04AA6D;
  color: white;
}

반응형 테이블

화면이 너무 작아서 전체 내용을 표시할 수 없는 경우 반응형 테이블에 수평 스크롤 막대가 표시됩니다.

반응형으로 사용할 수 있도록 overflow-x: auto;가 있는 컨테이너 요소(예: <div>)를 <table> 요소 주위에 추가합니다.

예제 15
<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Note: OS X Lion(Mac)에서는 스크롤바가 기본적으로 숨겨져 있으며 overflow: scroll;이 설정돼있어도 사용할 때만 표시됩니다.