코딩의 시작, TCP School

HTML <th> 태그

정의 및 특징

<th> 태그는 HTML 테이블에서 제목이 되는 헤더 셀(header cell)을 정의할 때 사용합니다.

HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.

<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

colspan 속성과 rowspan 속성을 사용하면 콘텐츠를 여러 셀에 걸쳐 나타낼 수 있습니다.

예제

<table>
    <tr>
        <th>밥류</th>
        <th>면류</th>
        <th>분식류</th>
    </tr>
    <tr>
        <td>김밥</td>
        <td>라면</td>
        <td>떡볶이</td>        
    </tr>
</table>

코딩연습 ▶

지원하는 브라우저 및 버전

태그명
<th>	1.0	지원함	지원함	1.0	지원함	지원함

HTML5에서 변경된 사항

HTML5에서는 다음과 같은 <th> 태그의 모든 레이아웃 관련 속성을 더 이상 지원하지 않습니다.

- align, axis, bgcolor, char, charoff, height, nowrap, valign, width

사용할 수 있는 속성

속성명	속성값	설명
abbr	텍스트	헤더 셀 내부의 콘텐츠에 대한 짧은 설명을 명시함.
align	left center right justify char	헤더 셀 내부의 콘텐츠에 대한 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음.
axis	카테고리명	헤더 셀이 포함될 카테고리를 명시함. HTML5에서는 더 이상 지원하지 않음.
bgcolor	rgb(x,x,x) #xxxxxx 색상명	헤더 셀의 배경색을 명시함. HTML5에서는 더 이상 지원하지 않음.
char	문자	헤더 셀 내부의 콘텐츠를 정렬할 때 기준이 되는 문자를 명시함. HTML5에서는 더 이상 지원하지 않음.
charoff	숫자	헤더 셀 내부의 콘텐츠 중에서 char 속성에 명시된 문자를 기준으로 정렬될 문자수를 명시함. HTML5에서는 더 이상 지원하지 않음.
colspan	숫자	해당 헤더 셀이 확장될 열(column)의 개수를 명시함.
headers	header id	해당 헤더 셀과 연관된 하나 이상의 헤더 셀(header cell)을 명시함.
height	픽셀 %	헤더 셀의 높이를 명시함. HTML5에서는 더 이상 지원하지 않음.
nowrap	nowrap	헤더 셀 내부의 콘텐츠가 자동으로 다음 행으로 넘어가지 않음을 명시함. HTML5에서는 더 이상 지원하지 않음.
rowspan	숫자	해당 헤더 셀(cell)이 확장될 행(row)의 개수를 명시함.
scope	col colgroup row rowgroup	테이블에서 헤더 셀과 데이터 셀을 연결하는 방법을 명시함.
sorted	reversed 숫자 reversed 숫자 숫자 reversed	열(column)이 정렬되는 방향을 명시함.
valign	top middle bottom baseline	헤더 셀 내부의 콘텐츠에 대한 수직 방향의 정렬 방법을 명시함. HTML5에서는 더 이상 지원하지 않음.
width	픽셀 %	헤더 셀의 너비를 명시함. HTML5에서는 더 이상 지원하지 않음.

CSS 기본값

th {

display: table-cell;

vertical-align: inherit;

font-weight: bold;

text-align: center;

}

DOM 인터페이스

interface HTMLTableHeaderCellElement : HTMLTableCellElement {

attribute DOMString scope;

attribute DOMString abbr;

};

연관 페이지

HTML 테이블 수업 ⇒

CSS 테이블 수업 ⇒

연습문제

◀ 이전 다음 ▶

Search

<th>