th element - by. UXKM

2024-06-04

th element 설명

<th> 요소는 HTML 테이블에서 제목이 되는 헤더 셀(header cell)을 정의할 때 사용합니다.
HTML 테이블를 구성하는 셀(cell)은 두 종류로 구분할 수 있으며, 하나는 <th> 요소를 사용한 헤더 정보를 저장하는 헤더 셀과 또 다른 하나는 <td> 요소를 사용한 일반적인 데이터를 저장하는 데이터 셀입니다.
<th> 요소 내의 텍스트는 기본적으로 굵은 폰트로 중앙 정렬되며, <td> 요소 내의 텍스트는 일반적인 두께의 폰트로 좌측 정렬됩니다.

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

HTML5에서는 <th> 요소의 align, axis, bgcolor, char, charoff, height, nowrap, valign, width 속성을 더 이상 지원하지 않습니다.

CSS 기본값 :

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

8.9.1. th 속성

[abbr] <th abbr="텍스트">

해당 요소의 abbr 속성은 헤더 셀 내부의 콘텐츠에 대한 짧은 설명을 명시합니다.
일반 웹 브라우저에서는 해당 요소에 scope 속성을 명시해도 아무런 시각적 효과도 나타나지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용될 수 있습니다.

[colspan] <th colspan="숫자">

해당 요소의 colspan 속성은 해당 헤더 셀이 확장될 열(column)의 개수를 명시합니다. 기본값은 1입니다.
이때 colspan 속성값을 0으로 명시하면, 해당 셀은 자신이 포함된 열 그룹(colgroup)의 마지막 열까지 확장됩니다.

[rowspan] <th rowspan="숫자">

해당 요소의 rowspan 속성은 해당 헤더 셀(cell)이 확장될 행(row)의 개수를 명시합니다. 기본값은 1입니다.
rowspan 속성값을 0으로 명시하면, 해당 셀은 자신이 포함된 테이블 영역(thead, tbody, tfoot)의 마지막 행까지 확장됩니다.

[headers] <th headers="header id">

해당 요소의 headers 속성은 해당 헤더 셀과 연관된 하나 이상의 헤더 셀(header cell)을 명시합니다.
header id값은 해당 헤더 셀과 연관된 헤더 셀(header cell)들의 id 속성값을 공백으로 구분한 리스트입니다.
일반 웹 브라우저에서는 해당 요소에 headers 속성을 명시해도 시각적으로 어떠한 효과도 보여주지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용됩니다.

[scope] <th scope="col | row | colgroup | rowgroup">

해당 요소의 scope 속성은 테이블에서 헤더 셀과 데이터 셀을 연결하는 방법을 명시합니다.
일반 웹 브라우저에서는 해당 요소에 headers 속성을 명시해도 시각적으로 어떠한 효과도 보여주지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용됩니다.

col : 해당 셀이 열(column)을 위한 헤더 셀임을 명시함.
row : 해당 셀이 행(row)을 위한 헤더 셀임을 명시함.
colgroup : 해당 셀이 열의 그룹을 위한 헤더 셀임을 명시함.
rowgroup : 해당 셀이 행의 그룹을 위한 헤더 셀임을 명시함.