HTML <th> 태그

정의와 사용법

<th> 태그는 HTML 테이블의 제목 셀을 정의합니다.

HTML 테이블은 두 가지 셀이 있습니다:

  • 제목 셀 - 제목 정보를 포함합니다 (사용 <th> 요소 생성)
  • 데이터 셀 - 데이터를 포함합니다 (사용 <td> 요소 생성)

기본적으로,<th> 요소 내의 텍스트는 두껍고 가운데 정렬됩니다.

기본적으로, <td> 요소 내의 텍스트는 일반적이고 왼쪽 정렬됩니다.

추가로 참조:

HTML 강의:HTML 테이블

HTML DOM 참조 가이드:TableHeader 객체

CSS 강의:폼 스타일 설정

예제

예제 1

세 줄, 두 개의 제목 셀과 네 개의 데이터 셀을 포함한 간단한 HTML 테이블:

<table>
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 2

정렬 방법 <th> 의 내용 (CSS를 사용하여):

<table style="width:100%">
  <tr>
    <th style="text-align:left">월</th>
    <th style="text-align:left">저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 3

CSS를 사용하여 테이블 제목 셀에 배경색을 추가하는 방법은 무엇인가요？

<table>
  <tr>
    <th style="background-color:#FF0000">월</th>
    <th style="background-color:#00FF00">저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
 </table>

개인적으로 시도해 보세요

예제 4

CSS를 사용하여 테이블 제목 셀의 높이를 설정하는 방법은 무엇인가요？

<table>
  <tr>
    <th style="height:100px">월</th>
    <th style="height:100px">저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 5

테이블 타이틀 셀에서 단행문을 정의하는 방법 (CSS를 사용하여):

<table>
  <tr>
    <th>월</th>
    <th style="white-space:nowrap">신차 저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 6

가로 정렬하는 방법: <th> 의 내용 (CSS를 사용하여):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">월</th>
    <th style="vertical-align:bottom">저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 7

테이블 타이틀 셀의 너비를 설정하는 방법 (CSS를 사용하여):

<table style="width:100%">
  <tr>
    <th style="width:70%">월</th>
    <th style="width:30%">저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 8

테이블 타이틀을 생성하는 방법:

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
    <th>전화</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 9

타이틀을 포함한 테이블을 생성하는 방법:

<table>
  <caption>월간 저축</caption>
  <tr>
    <th>월</th>
    <th>저축</th>
  </tr>
  <tr>
    <td>1월</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>2월</td>
    <td>￥4500</td>
  </tr>
</table>

개인적으로 시도해 보세요

예제 10

다중 행 또는 열을 건너뛰는 테이블 셀을 정의하는 방법:

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
    <th colspan="2">전화</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

개인적으로 시도해 보세요

속성

속성 값 설명
abbr 텍스트 타이틀 셀 내용의 줄이징 버전을 정의.
colspan 숫자 정의 타이틀 셀이 어떤 열을 건너뛰어야 하는지.
headers header_id 셀과 관련된 하나 또는 여러 개의 타이틀 셀을 정의.
rowspan 숫자 정의 타이틀 셀이 어떤 행을 건너뛰어야 하는지.
scope
  • col
  • colgroup
  • row
  • rowgroup
 헤더 셀은 열 헤더, 행 헤더인지 아니면 그룹의 열 또는 행의 헤더인지입니다.

전역 속성

<th> 태그는 또한 HTML에서 전역 속성。

이벤트 속성을 지원합니다

<th> 태그는 또한 HTML에서 이벤트 속성。

기본 CSS 설정

대부분의 브라우저는 다음 기본 값으로 표시합니다 <th> 요소:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
{}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원