#TIL36

<table> 마크업

테이블의 개념

• 2차원의 그리드(Grid)
• 슬롯(slot)과 셀(cell) colspan 이나 rowspan 을 사용하면 하나의 셀이 여러 개의 슬롯을 포함할 수 있음
  개념상 하나의 셀은 하나의 슬롯에 위치하는 것으로 간주
• 헤더 셀(th)과 데이터 셀(td)
• 행(tr)과 열
• 행 그룹(thead, tbody, tfoot)과 열 그룹(colgroup)
  하나의 셀은 여러 개의 행 그룹에 걸칠 수 없으며 , 걸쳐 있다 해도 그 슬롯 모두가 같은 행 그룹 안에 있는 것으로 간주됨
  반면 , 하나의 셀은 여러 개의 열 그룹에 걸칠 수 있음

레이아웃 목적으로 <table> 을 사용하는 것은 비표준

• 시맨틱스가 올바르지 않으며 접근성 측면에서도 많은 손해
• 단락 구성 등의 레이아웃에는 스타일 시트를 사용하는 것이 좋음

HTML5 에서는 ‘summary’ 속성이 사라짐

• 테이블의 설명을 summary 속성이 아닌 본문으로 마크업 할 것을 추천

<tbody> 요소는 원래 필수

• <table> 요소 바로 아래에 <tr>을 넣는 것은 추천하지 않음
• HTML5 사양의 HTML 구문 요건에서는 table 요소 바로 아래에 tr 요소를 넣어서는 안 된다고 규정
• 기본적으로 행을 나타내는 <tr> 요소는 그것이 테이블의 헤더 행이 아닌 한 행 블록을 나타내는 <tbody> 요소 안에 넣어야 함

<caption>

• <table>의 최초 자식 요소로 사용
• 테이블의 제목을 나타내며 테이블에 관한 설명을 넣을 수 있음
• 콘텐츠 모델이 플로 콘텐츠이므로 단순 텍스트뿐만 아니라 <p>, <detail>, <strong> 요소 등을 넣을 수 있음
• <figure> 요소 안에 <table> 요소 만을 넣었을 경우 <caption> 요소를 넣을 필요는 없음(<figcaption> 요소가 역할을 대신함)

<colgroup>

• <table>의 자식 요소로, <caption> 요소보다 뒤에, <thead>, <tbody>, <tfoot>, <tr> 요소보다 앞에 사용
• 테이블 안에 있는 하나 이상의 열 그룹을 나타냄
• <colgroup> 요소 안에는 <col> 요소만 넣을 수 있음
• span 콘텐츠 속성에는 0보다 큰 정수를 지정
• <colgroup> 요소로 정의한 열 그룹에는 테이블 구조상 무언가 의미를 부여해야 함(스타일 만을 위해 사용 x)

<col>

• span 콘텐츠 속성이 지정되지 않은 <colgroup>의 자식 요소
• <col> 요소는 열을 나타냄
• <col> 요소는 <colgroup> 요소 안에서만 사용할 수 있음
• 다만, <colgroup> 요소에 span 콘텐츠 속성이 지정된 경우 , 그 안에 <col> 요소를 넣을 수 없음

<thead>

• <table>의 자식 요소로 하나만을 넣을 수 있음
• <caption>, <colgroup> 요소보다 뒤에 있으며 <tbody>, <tfoot>, <tr> 요소보다 앞이어야 함
• <thead> 요소는 테이블의 헤더가 되는 행 그룹
• <thead> 요소 안에 넣을 수 있는 셀 요소는 <th> 요소 뿐

<tbody>

• <tbody> 요소는 행 그룹을 나타내며, 테이블 안에서 의미 있게 여러 개의 행 그룹을 나누고 싶을 때 사용
• <tbody> 요소로 행 그룹을 마크업할 때 모든 <tr> 요소는 <tbody>, <thead>, <tfoot> 요소 중 하나에 넣어야 함
• <table> 바로 밑에 <tr> 요소 넣어서는 안됨

<tfoot>

• <tfoot> 요소는 테이블의 footer가 되는 행 그룹을 나타냄
• 테이블의 마지막에 표시하는 것이 어울리므로 테이블의 각 행을 정리하는 테이터를 넣을 때 사용
• 주문 정보나 회계 정보 등의 합계 표시 등에 사용하는 것이 좋음
• <tfoot> 요소의 마크업 위치와 관계없이 랜더링 결과는 테이블의 마지막에 표시

<tr>

• <tr> 요소는 테이블의 행을 나타냄
• 테이블 가로 1 행분의 셀을 나타내는 <td> 요소와 <th> 요소를 넣음
• <thead> 요소 안에서 사용한 경우 <th> 요소만 넣을 수 있음

<th>

• <th> 요소는 테이블의 헤더 셀을 나타냄
• <tr> 요소의 자식 요소로서 사용
• 프레이징 콘텐츠이므로 <a>, <abbr>, <b>, <mark>, <ruby>, <strong> 요소 등을 넣을 수 있으나 플로
  콘텐츠(<p> 요소 등)를 넣을 수 없으니 주의
• colspan, rowspan, headers, scope 속성이 규정되어 있음

<td>

• <td> 요소는 테이블의 데이터 셀을 나타냄
• <tr> 요소의 자식 요소로서 사용
• <td> 요소의 카테고리가 섹셔닝 루트이므로 <td> 요소 안에 <h1> 요소 등의 제목 요소를 넣어도 그 문서의 아웃라인에는 드러나지 않음
• colspan, rowspan 콘텐츠 속성으로 셀이 미치는 열이나 행의 범위를 지정