Table
Import
<link rel="stylesheet" href="/guide/css/base/index.css" /> <link rel="stylesheet" href="/guide/css/components/table.css" />
Live
행에 마우스를 올려 Hover 상태를 확인하세요.
| 제목 1-1 | 제목 1-2 | 제목 1-3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
States
Default
| 제목 1-1 | 제목 1-2 | 제목 1-3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
Hover (2번째 행)
| 제목 1-1 | 제목 1-2 | 제목 1-3 |
|---|---|---|
| 내용 1-1 | 내용 1-2 | 내용 1-3 |
| 내용 2-1 | 내용 2-2 | 내용 2-3 |
| 내용 3-1 | 내용 3-2 | 내용 3-3 |
Specs
| 영역 | Background | Border | Font Size | Cell Height |
|---|---|---|---|---|
| thead | gray-50 | 모든 셀 1px solid gray-300 | 18px (body-base) | 48px |
| thead / tbody 경계 | — | tbody 첫 행 border-top 2px solid gray-600 | — | — |
| tbody (default) | #ffffff | 모든 셀 1px solid gray-300 (border-collapse로 자동 병합) | 16px (body-sm) | 48px |
| tbody (hover) | gray-100 | — | 16px (body-sm) | 48px |
Code
<table class="table">
<thead class="table__head">
<tr class="table__row">
<th class="table__cell table__cell--head">제목 1-1</th>
<th class="table__cell table__cell--head">제목 1-2</th>
<th class="table__cell table__cell--head">제목 1-3</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row">
<td class="table__cell">내용 1-1</td>
<td class="table__cell">내용 1-2</td>
<td class="table__cell">내용 1-3</td>
</tr>
</tbody>
</table>
Classes
| 클래스 | 타입 | 설명 |
|---|---|---|
| .table | 루트 | table 요소 — border-collapse · border gray-300 · width 100% |
| .table__head | 요소 | thead — bg gray-50 |
| .table__body | 요소 | tbody — 첫 행 border-top 2px gray-600 (thead 경계) · hover 시 bg gray-100 |
| .table__row | 요소 | tr 요소 |
| .table__cell | 요소 | td — border 1px solid gray-300 · height 48px · padding 12px · 중앙 정렬 |
| .table__cell--head | 수정자 | th 전용 — font-size 18px (body-base) |
colspan / rowspan 예시
각 셀에 border를 직접 선언하고 border-collapse로 병합하는 방식이라 colspan·rowspan 사용 시에도 격자선이 올바르게 표시됩니다.
| 구분 | 지역별 매출 | |
|---|---|---|
| 서울 | 부산 | |
| 1분기 | 100만 | 80만 |
| 120만 | 90만 | |
| 2분기 | 130만 | 95만 |
| 140만 | 100만 | |
<table class="table">
<thead class="table__head">
<tr class="table__row">
<th class="table__cell table__cell--head" rowspan="2">구분</th>
<th class="table__cell table__cell--head" colspan="2">지역별 매출</th>
</tr>
<tr class="table__row">
<th class="table__cell table__cell--head">서울</th>
<th class="table__cell table__cell--head">부산</th>
</tr>
</thead>
<tbody class="table__body">
<tr class="table__row">
<td class="table__cell" rowspan="2">1분기</td>
<td class="table__cell">100만</td>
<td class="table__cell">80만</td>
</tr>
<tr class="table__row">
<td class="table__cell">120만</td>
<td class="table__cell">90만</td>
</tr>
</tbody>
</table>