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 와 직접 관련이 있습니다 .td
th
th
td
그러나 thead
모든 정보를 포함 할 수 있습니다 ... 일반적으로 그렇습니다. th
셀을 포함 하지만 표 상단의 정보로 적절하다고 생각되는 항목 (자막 제외)도 포함 할 수 있습니다. 잘).
<thead>
인쇄 된 버전에서 페이지 상단의 머리글 행을 반복하는 데 사용할 수 있다는 점에서 특별합니다.
<thead>
테이블 행은 각각 THEAD
, TFOOT
및 TBODY
요소를 사용하여 테이블 헤드, 테이블 풋 및 하나 이상의 테이블 본문 섹션으로 그룹화 될 수 있습니다 . 이 분할을 통해 사용자 에이전트는 테이블 헤드 및 풋과 독립적으로 테이블 바디 스크롤을 지원할 수 있습니다. 긴 테이블이 인쇄되면 테이블 데이터가 포함 된 각 페이지에서 테이블 헤드 및 풋 정보가 반복 될 수 있습니다.
테이블 헤드 및 테이블 풋에는 테이블 열에 대한 정보가 포함되어야합니다. 테이블 본문에는 테이블 데이터 행이 포함되어야합니다.
존재하는 경우, 각 THEAD, TFOOT 및 TBODY는 행 그룹을 포함합니다. 각 행 그룹은 TR 요소로 정의 된 하나 이상의 행을 포함해야합니다.
<th>
테이블 셀에는 헤더 정보와 데이터라는 두 가지 유형의 정보가 포함될 수 있습니다. 이 구별을 통해 사용자 에이전트는 스타일 시트가없는 경우에도 헤더 및 데이터 셀을 명확하게 렌더링 할 수 있습니다. 예를 들어, 시각적 사용자 에이전트는 굵은 글꼴로 머리글 셀 텍스트를 표시 할 수 있습니다. 음성 합성기는 별개의 음성 변곡으로 헤더 정보를 렌더링 할 수있다.
TH 요소는 헤더 정보가 포함 된 셀을 정의합니다. 사용자 에이전트에는 TH 요소의 내용과 abbr 속성의 값이라는 두 가지 헤더 정보가 있습니다. 사용자 에이전트는 셀 내용 또는 abbr 속성 값을 렌더링해야합니다. 시각 매체의 경우, 셀의 전체 내용을 렌더링하기위한 공간이 충분하지 않을 때 후자가 적절할 수 있습니다. 비 시각적 매체의 경우, 약어는 표 머리글이 적용되는 셀의 내용과 함께 렌더링 될 때 표 머리글의 약어로 사용될 수 있습니다.
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
'IT story' 카테고리의 다른 글
파이썬에서 변수가 사전인지 확인하는 방법? (0) | 2020.06.15 |
---|---|
모달의 부트 스트랩 3 및 유튜브 (0) | 2020.06.15 |
생성자 함수가 Promise를 반환하도록하는 것은 나쁜 습관입니까? (0) | 2020.06.15 |
데이터베이스와 스키마의 차이점 (0) | 2020.06.15 |
도커 스웜, 쿠 버네 티스, 메 소스 및 코어 OS 함대 (0) | 2020.06.15 |