HTML <caption>: 표 설명 요소
Baseline넓은 지원
모든 주요 브라우저가 지원하는 기능입니다.
HTML <caption> 요소는 표에 설명 또는 제목을 추가합니다.
<table>
<caption>우리 매장 원산지 표기</caption>
<thead>
<tr>
<th>종류</th>
<th>품목</th>
<th>원산지</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">과일</th>
<td>사과</td>
<td rowspan="2">국산</td>
</tr>
<tr>
<td>배</td>
</tr>
<tr>
<td>파인애플</td>
<td>수입산</td>
</tr>
<tr>
<th>곡물</th>
<td>쌀</td>
<td>국산</td>
</tr>
<tr>
<th>해산물</th>
<td>고등어</td>
<td>원양산</td>
</tr>
</tbody>
</table>th,
td {
border: 1px solid #777;
padding: 8px;
}
th {
background: #efefef;
color: #333;
}불러오는 중...
특성
전역 특성만 포함합니다.
사용 일람
<caption> 요소를 사용할 경우, 반드시 <table>의 첫 번째 자식 요소로 배치해야 합니다. 위치를 아래로 바꾸고자 하면 <table>에 CSS caption-side 속성을 설정하세요.
<table>의 background-color는 <caption>을 포함하지 않습니다. <caption>에 따로 background-color를 설정하세요.
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
caption | |||||||||
align | |||||||||
같이 보기
- 표 컨테이너:
<table> <caption>위치 설정: CSScaption-side