Table — 데이터 표
관리자 데이터 목록, 비교표, 매출 요약 등 본격적인 데이터 표에 사용합니다. (마크다운 본문의 표는 n-prose 사용)
기본 사용
소스 코드 보기
타입 (배타)
한 번에 하나만 사용합니다.
| 타입 | 설명 |
|---|---|
| (기본) | 헤더 배경 + 행 아래 보더 |
table:striped | 짝수행 배경 — 줄무늬 |
table:bordered | 격자 보더 — 엑셀 스타일 |
table:minimal | 헤더 배경 제거 — 대시보드 스타일 |
table:striped
소스 코드 보기
table:bordered
소스 코드 보기
table:minimal
헤더 배경 없이 uppercase 레이블. 대시보드/메트릭스에 적합.
소스 코드 보기
옵션 (조합)
타입 위에 여러 개 조합해서 사용합니다.
| 옵션 | 효과 |
|---|---|
table-shape:rounded | 모서리 둥글게 |
table-hover:row | 행 호버 하이라이트 |
table-density:compact | 좁은 패딩 + 작은 글자 |
table-shape:rounded
소스 코드 보기
table-hover:row
소스 코드 보기
table-density:compact
대량 데이터에 적합.
소스 코드 보기
셀 옵션
특정 셀/열에만 적용하는 스코프 옵션입니다.
| 옵션 | 효과 |
|---|---|
cell:numeric | 우측 정렬 + tabular-nums (숫자 정렬에 적합) |
cell:center | 가운데 정렬 |
숫자 열에는 cell:numeric을 th와 td 모두에 적용하세요.
html
<thead>
<tr><th>항목</th><th class="cell:numeric">수량</th></tr>
</thead>
<tbody>
<tr><td>A</td><td class="cell:numeric">1,234</td></tr>
</tbody>조합 예시
Striped + Hover
소스 코드 보기
Minimal + Hover + Compact
소스 코드 보기
Bordered + Rounded + Hover
소스 코드 보기
추가 기능
캡션
표 위에 설명이 필요할 때 <caption> 태그를 사용합니다.
소스 코드 보기
tfoot (합계 행)
<tfoot> 내부의 td는 위쪽 보더와 semibold 폰트가 자동 적용됩니다.
반응형 (n-table-wrap)
컬럼이 많아 화면을 넘칠 때는 n-table-wrap으로 감싸 가로 스크롤을 활성화합니다.
html
<div class="n-table-wrap">
<table class="n-table table:bordered table-hover:row">…</table>
</div>소스 코드 보기