html 테이블 : thead vs th


155

THEAD를 사용하는 경우 TH를 사용할 필요가없는 것처럼 보입니다 ( 이 페이지 의 예제에 따르면 ).

그게 사실입니까? 그렇다면 THEAD와 TH의 장점 / 단점은 무엇입니까?

답변:


124

<thead>태그 그룹에 HTML 테이블의 헤더 내용을 사용한다. thead요소가 함께 사용되어야 tbody하고 tfoot소자.

더 : thead

당신이 사용하는 <thead>테이블 헤더로 지정하는 전체 행 (또는 행)를 캡슐화 할 수 있습니다. 사양에 따르면

"이 부서는 사용자 에이전트가 테이블 헤드 및 풋과 독립적으로 테이블 바디의 스크롤을 지원할 수있게합니다. 긴 테이블이 인쇄 될 때 테이블 헤드 및 풋 정보가 테이블 데이터를 포함하는 각 페이지에서 반복 될 수 있습니다."

<th>반면에는 특정 셀을 일반 데이터 셀이 아닌 헤더 셀로 스타일을 지정하는 데 사용됩니다.


22
나는 항상 둘 다 사용합니다.

11
"More : thead"에서 링크 한 고대 웹 사이트 중 하나입니다.
masterxilo

참조 : Mozilla의 문서 개발자
Adrien Be

3
@masterxilo 무엇을 기대 했습니까? HTML 자체는 꽤 대담합니다.
Dan Bechard

1
@Kano 아직 사용중인 30 년 된 RFC에 연결하는 사람에게 이의를 제기 하시겠습니까? 정보가 여전히 관련이있는 한 페이지의 나이는 어떻게됩니까?
jmbpiano

65

<th>실제로 <td>셀을 머리글 셀로 표시하려는 경우를 대신합니다 .

당신이 사용 <thead>하고 싶어하고 안에 <th>중첩하는 것을 잊지 마십시오 . 그렇지 않으면 코드가 유효하지 않을 수 있습니다. 예:<th><tr>

<table>
  <thead>
    <tr>
      <th>Season</th>
      <th>Goals</th>
      <th>Assists</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>2009-2010</th>
      <td>25</td>
      <td>43</td>
    </tr>
    <tr>
      <th>2011-2012</th>
      <td>40</td>
      <td>20</td>
    </tr>
  </tbody>
</table>


2
이것은 원래의 질문에 대한 답변이 아니며, 부록이 아니며 답변 대신 의견이어야합니다.
제랄드 슈나이더

7
나는 알고 있지만 의견을 게시하기에는 평판이 너무 낮아서 답변을 게시하려고했습니다. 미안하지만 내 잘못이지만 전체 스택 서비스 규칙은 때때로 나에게 이상합니다.
rflw

28
실제로이 답변은 TH와 THEAD를 사용하는 유일한 방법입니다. 그것을 위해 +1!
barrypicker

4
" th내부 thead및 내부에서도 이점을 사용할 수 있습니다 tbody. 두 요소 모두 자체 컨텍스트에서 유용합니다." 그 질문에 대답합니다 ... Gerald는 당신이 대답을 쓴 방식에 대해 까다 롭습니다. 그러나 실제로 여기에서 의미있는 예를 제공 한 유일한 대답입니다.
CPHPython

1
난 몰랐 th얻을 수 대담 , 별도의 CSS하지 않고, 기본적으로 에드 그 감사를!
CPHPython

11

th안에있을 수있는 것보다 더 구체적입니다 thead. th셀은 대응하는 헤더 지정하는 td세포. 실제로 셀의 id를 가리키는 셀에 headers속성을 추가 할 수 있습니다 (화면 판독기의 경우). 따라서 해당 열의 s 와 직접 관련이 있습니다 .tdththtd

그러나 thead모든 정보를 포함 할 수 있습니다. 일반적으로 그렇습니다. 여기에는 th셀 이 포함 되지만 표의 맨 위에 정보로 적절하다고 생각되는 항목 (자막 제외)이 포함될 수 있습니다. 잘).



6

<thead>

테이블 행은 각각 THEAD, TFOOTTBODY요소를 사용하여 테이블 헤드, 테이블 풋 및 하나 이상의 테이블 본문 섹션으로 그룹화 될 수 있습니다 . 이 분할을 통해 사용자 에이전트는 테이블 헤드 및 풋과 독립적으로 테이블 바디 스크롤을 지원할 수 있습니다. 긴 테이블이 인쇄되면 테이블 데이터가 포함 된 각 페이지에서 테이블 헤드 및 풋 정보가 반복 될 수 있습니다.

테이블 헤드 및 테이블 풋에는 테이블 열에 대한 정보가 포함되어야합니다. 테이블 본문에는 테이블 데이터 행이 포함되어야합니다.

존재하는 경우, 각 THEAD, TFOOT 및 TBODY는 행 그룹을 포함합니다. 각 행 그룹은 TR 요소로 정의 된 하나 이상의 행을 포함해야합니다.

<th>

테이블 셀에는 헤더 정보와 데이터라는 두 가지 유형의 정보가 포함될 수 있습니다. 이 구별을 통해 사용자 에이전트는 스타일 시트가없는 경우에도 헤더 및 데이터 셀을 명확하게 렌더링 할 수 있습니다. 예를 들어, 시각적 사용자 에이전트는 굵은 글꼴로 머리글 셀 텍스트를 표시 할 수 있습니다. 음성 합성기는 별개의 음성 변곡으로 헤더 정보를 렌더링 할 수있다.

TH 요소는 헤더 정보가 포함 된 셀을 정의합니다. 사용자 에이전트에는 TH 요소의 내용과 abbr 속성의 값이라는 두 가지 헤더 정보가 있습니다. 사용자 에이전트는 셀 내용 또는 abbr 속성 값을 렌더링해야합니다. 시각 매체의 경우, 셀의 전체 내용을 렌더링하기위한 공간이 충분하지 않을 때 후자가 적절할 수 있습니다. 비 시각적 매체의 경우, 약어는 표 머리글이 적용되는 셀의 내용과 함께 렌더링 될 때 표 머리글의 약어로 사용될 수 있습니다.

출처 : http://www.w3.org/TR/html4/struct/tables.html


3

경험을 통해 알 수 있듯이 렌더링의 차이를 지정하기 위해 CSS를 사용하지 않는 한 렌더링의 차이는 없습니다. 의 <td>내부 는 또는 내부 <thead>와 동일하게 렌더링됩니다 .<th><table><tbody>


thead 요소도 행을 포함합니다.
DanMan

1
난 당신이 의미하는 생각 <td>A가의 내부를 <thead>A와 같은 렌더링 <th>A는하지 않는 것이, <tr>않습니다.
frabjous

0

여기에는 어려운 규칙이 없습니다. <thead>요소처럼 그룹에 또 다른 방법으로 당신의 열과 행이 <tbody>하고 <tfoot>있다. 따라서 스크립팅 및 서식에 대한 더 많은 가능성이 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.