IT story

html 테이블 : thead vs th

hot-time 2020. 6. 15. 08:12
반응형

html 테이블 : thead vs th


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

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


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

더 : thead

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

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

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


<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>


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

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


<thead> 인쇄 된 버전에서 페이지 상단의 머리글 행을 반복하는 데 사용할 수 있다는 점에서 특별합니다.


<thead>

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

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

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

<th>

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

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

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


As far as I can tell from experience, there is no difference in rendering unless you're using CSS to specify a difference in rendering. A <td> inside of a <thead> will render the same as a <th> inside of a <table> or a <tbody>.


There are no hard rules here. The <thead> element is just another way to group your columns and rows, just like <tbody> and <tfoot> is. So you have more possibilities for scripting and formatting.

참고URL : https://stackoverflow.com/questions/5395228/html-tables-thead-vs-th

반응형