CSS 테이블

CSS를 사용하면 HTML 테이블의 외관을 크게 개선할 수 있습니다：

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

자신이 직접 시도해 보세요

테이블 테두리

CSS에서 테이블 테두리를 설정하려면 border 속성.

아래 예제에서 <table>, <th> 및 <td> 요소에 검은색 테두리를 지정합니다：

Firstname Lastname
Bill Gates
Steve Jobs

예제

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

자신이 직접 시도해 보세요

참고:위 예제의 테이블은 양쪽 테두리를 가지고 있습니다. 이는 table과 <th> 및 <td> 요소가 모두 독립적인 테두리를 가지고 있기 때문입니다.

전체 너비 테이블

일부 경우에, 위 테이블이 작아 보일 수 있습니다. 전체 화면(전체 너비)의 테이블이 필요하다면, <table> 요소에 width: 100%를 추가하십시오：

예제

table {
  width: 100%;
}

자신이 직접 시도해 보세요

양쪽 테두리

위 테이블은 양쪽 테두리를 가지고 있습니다. 이는 테이블과 th, td 요소가 모두 독립적인 테두리를 가지고 있기 때문입니다.

双边框 제거를 위한 예제를 보세요.

테이블 테두리 병합

border-collapse 속성을 사용하여 테이블 테두리를 단일 테두리로 병합할지 설정합니다：

Firstname Lastname
Bill Gates
Steve Jobs

예제

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

자신이 직접 시도해 보세요

테이블 주위에만 테두리를 원하면, 단순히 <table>에 설정하십시오: border 속성:

Firstname Lastname
Bill Gates
Steve Jobs

예제

table {
  border: 1px solid black;
}

자신이 직접 시도해 보세요

테이블 너비와 높이

테이블의 너비와 높이는 width 와 height 속성 정의.

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

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

table {
  width: 100%;
}
th {
  height: 50px;
}

자신이 직접 시도해 보세요

페이지의 절반만 차지하는 테이블을 만들기 위해 width: 50%를 사용하십시오：

예제

table {
  width: 50%;
}
th {
  height: 70px;
}

자신이 직접 시도해 보세요

수평 정렬

text-align 속성을 사용하여 <th> 또는 <td> 내용의 수평 정렬 방식(왼쪽, 오른쪽 또는 가운데)을 설정합니다.

기본적으로, <th> 요소 내의 내용은 가운데 정렬이며, <td> 요소 내의 내용은 왼쪽 정렬입니다.

<td> 요소 내의 내용도 가운데 정렬로 설정하려면 text-align: center를 사용하십시오：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

th {
  text-align: center;
}

자신이 직접 시도해 보세요

아래 예제에서 <th> 요소 내의 텍스트를 왼쪽 정렬로 설정합니다：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

th {
  text-align: left;
}

자신이 직접 시도해 보세요

수직 정렬

vertical-align 속성을 사용하여 <th> 또는 <td> 내용의 수직 정렬 방식(위, 아래 또는 가운데)을 설정합니다.

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

아래 예제에서 <td> 요소의 수직 텍스트 정렬 방식을 아래 정렬로 설정합니다：

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

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

자신이 직접 시도해 보세요

테이블 내부 여백

테이블의 테두리와 테이블 내용 간의 간격을 제어하려면 <td>와 <th> 요소에 padding 속성:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

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

자신이 직접 시도해 보세요

수평 구분선

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

th와 td에 border-bottom 속성을 사용하여 수평 구분선을 구현합니다:

예제

th, td {
  border-bottom: 1px solid #ddd;
}

자신이 직접 시도해 보세요

마우스 오버 테이블

tr:hover 선택자를 사용하여 마우스 오버 시 테이블 행을 강조합니다: :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

tr:hover {background-color: #f5f5f5;}

자신이 직접 시도해 보세요

스파이더 테이블

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

스파이더 테이블 효과를 구현하기 위해 사용합니다. nth-child() 선택자를 사용하여 모든 짝수(또는 홀수) 테이블 행에 background-color：

예제

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

자신이 직접 시도해 보세요

테이블 색상

아래 예제에서 <th> 요소의 배경색과 텍스트색상을 지정합니다:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

예제

th {
  background-color: #4CAF50;
  color: white;
}

자신이 직접 시도해 보세요

반응형 테이블

화면이 너무 작아 전체 내용을 표시할 수 없을 때, 반응형 테이블은 수평 스크롤바를 표시합니다:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

<table> 요소 주위에 overflow-x:auto 의 컨테이너 요소(예: <div>)를 사용하여 반응형 효과를 구현합니다:

예제

<div style="overflow-x:auto;">
<table>
... 테이블 내용 ...
</table>
</div>

자신이 직접 시도해 보세요

주의사항:OS X Lion에서(맥에서) 스크롤바는 기본적으로 숨겨져 있으며, 사용할 때만 표시됩니다("overflow:scroll"을 설정한 경우에도)

더 많은 예제

장식적인 테이블을 만듭니다
이 예제에서 장식적인 테이블을 생성하는 방법을 보여줍니다.
테이블 제목의 위치를 설정합니다
이 예제에서 테이블 제목을 배치하는 방법을 보여줍니다.

CSS 테이블 속성

속성 설명
border 간략 속성. 모든 경계선 속성을 하나의 선언으로 설정합니다.
border-collapse 테이블 경계선을 축소할지 여부를 정의합니다.
border-spacing 접근한 셀 간 경계선의 거리를 정의합니다.
caption-side 테이블 타이틀의 위치를 정의합니다.
empty-cells 테이블의 공백 셀에 경계선과 배경을 표시할지 여부를 정의합니다.
table-layout 테이블에 대한 레이아웃 알고리즘을 설정합니다.