HTML <th> 태그
예시
3개의 행, 2개의 헤더 셀 및 4개의 데이터 셀이 있는 간단한 HTML 테이블:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그는 HTML 테이블 의 <th>헤더 셀을 정의합니다.
HTML 테이블에는 두 가지 종류의 셀이 있습니다.
- 헤더 셀 - 헤더 정보 포함(
<th>요소로 생성됨) - 데이터 셀 - 데이터 포함( <td> 요소로 생성됨)
요소 의 텍스트는 <th>기본적으로 굵게 표시되며 가운데에 표시됩니다.
<td> 요소의 텍스트는 기본적으로 일반이며 왼쪽 정렬됩니다.
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <th> | Yes | Yes | Yes | Yes | Yes |
속성
| Attribute | Value | Description |
|---|---|---|
| abbr | text | Specifies an abbreviated version of the content in a header cell |
| colspan | number | Specifies the number of columns a header cell should span |
| headers | header_id | Specifies one or more header cells a cell is related to |
| rowspan | number | Specifies the number of rows a header cell should span |
| scope | col colgroup row rowgroup |
Specifies whether a header cell is a header for a column, row, or group of columns or rows |
전역 속성
<th>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<th>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
<th> 내부의 콘텐츠를 정렬하는 방법(CSS 사용):
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th
style="text-align:left">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
테이블 헤더 셀에 배경색을 추가하는 방법(CSS 사용):
<table>
<tr>
<th
style="background-color:#FF0000">Month</th>
<th style="background-color:#00FF00">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
예시
표 헤더 셀의 높이를 설정하는 방법(CSS 사용):
<table>
<tr>
<th
style="height:100px">Month</th>
<th style="height:100px">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
예시
표 머리글 셀에 줄 바꿈을 지정하지 않는 방법(CSS 사용):
<table>
<tr>
<th>Month</th>
<th style="white-space:nowrap">My Savings for a new car</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
예시
<th> 내부 콘텐츠를 세로로 정렬하는 방법(CSS 사용):
<table style="width:50%;">
<tr
style="height:100px">
<th style="vertical-align:bottom">Month</th>
<th
style="vertical-align:bottom">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
예시
표 머리글 셀의 너비를 설정하는 방법(CSS 사용):
<table style="width:100%">
<tr>
<th style="width:70%">Month</th>
<th
style="width:30%">Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
예시
테이블 헤더를 만드는 방법:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
예시
캡션이 있는 테이블을 만드는 방법:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
둘 이상의 행 또는 열에 걸쳐 있는 테이블 셀을 정의하는 방법:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
관련 페이지
HTML 튜토리얼: HTML 테이블
HTML DOM 참조: TableHeader 객체
CSS 튜토리얼: 테이블 스타일 지정
기본 CSS 설정
대부분의 브라우저는 <th>다음 기본값으로 요소를 표시합니다.
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center;
}