표
어떤 정보들은 격자 형태입니다. 기차 시간표, 요금제 표, 리그 테이블, 영양 정보: 이들 각각은 행과 열을 가지고 있으며, 의미는 이들이 어떻게 정렬되는지에서 비롯됩니다. HTML은 정확히 이러한 종류의 콘텐츠를 위한 전용 요소 집합을 가지고 있으며, 이를 사용하면 격자를 화면과 페이지를 큰 소리로 읽는 소프트웨어 모두에서 읽을 수 있게 유지할 수 있습니다.
표의 기본
**표**는 스프레드시트와 같은 모양의 행과 열의 격자입니다. 4개의 요소로 만듭니다. <table>은 전체 격자를 감싸줍니다. 각 <tr>은 한 행입니다(tr은 table row의 약자입니다). 행 내에서 각 <td>는 데이터의 한 셀입니다(td는 table data입니다). 셀이 열이나 행을 레이블하면 대신 <th>를 사용합니다(th는 table header입니다). 브라우저는 이를 굵게 표시하고 중앙 정렬하여 데이터와 구분되게 보여줍니다.
<table>
<tr>
<th>요일</th>
<th>운영 시간</th>
</tr>
<tr>
<td>월요일</td>
<td>8:00 ~ 18:00</td>
</tr>
<tr>
<td>토요일</td>
<td>9:00 ~ 14:00</td>
</tr>
</table>위에는 2개의 헤더 셀, 그 다음에는 2개의 데이터 행입니다. 브라우저가 격자를 그리고, 각 열을 콘텐츠에 맞게 크기 조정하며, 2개의 <th> 셀을 굵게 표시합니다.
<table>, 각 행을 위한 <tr>, 셀을 위한 <td>, 헤더 셀을 위한 <th>입니다. 헤더 셀은 굵게 표시되고 중앙 정렬되어 데이터와 구분됩니다. 한 번에 한 행씩 만들면 열이 자동으로 정렬됩니다. 표 구조화
행의 순서는 사람들이 읽는 순서이므로, <th> 셀로 만든 **헤더 행**을 맨 위에 놓으십시오. 그러면 모든 행을 같은 길이로 유지하십시오: 헤더 행에 3개의 셀이 있으면, 그 아래의 모든 <tr>도 3개의 <td> 셀이 필요합니다. 셀이 빠진 행은 격자에 간격을 남기고 열이 정렬되지 않습니다. 여기서 배울 새로운 것은 없고, 이미 알고 있는 행들에 주의만 기울이면 됩니다.
<table>
<caption>지역별 분기 매출</caption>
<thead>
<tr>
<th>지역</th>
<th>Q1</th>
<th>Q2</th>
</tr>
</thead>
<tbody>
<tr>
<th>북부</th>
<td>£12,000</td>
<td>£15,400</td>
</tr>
<tr>
<th>남부</th>
<td>£9,800</td>
<td>£11,200</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>£21,800</td>
<td>£26,600</td>
</tr>
</tfoot>
</table><th> 셀의 헤더 행으로 시작하십시오. 그러면 모든 행을 같은 길이로 유지하십시오: 위에 3개의 헤더가 있으면 아래의 각 행에 3개의 <td> 셀이 필요합니다. 빠진 셀은 격자의 간격이며, 이것이 초기에 사람들을 혼동시키는 것입니다. 접근 가능한 표
접근 가능한 표는 화면 낭독기(페이지를 큰 소리로 읽는 소프트웨어)로 페이지를 보는 대신 듣는 사람을 포함하여 모두에게 이해되는 표입니다. 할 수 있는 가장 유용한 것은 이미 도구 상자에 있습니다: 모든 헤더 셀에 <td>가 아닌 <th>를 사용하십시오. 화면 낭독기는 그 청취자에게 어느 셀이 레이블이고 어느 것이 데이터인지 알려줄 수 있으므로, "£15" 같은 값이 속한 열과 함께 발표됩니다. 모든 셀이 평문 <td>인 표는 숫자의 납작한 벽으로 읽히며 그것들을 고정할 것이 없습니다.
접근성은 표만으로 더 넓습니다; 접근성 장이 나머지 그림을 다룹니다.
<th>를, 데이터에는 <td>를 사용하십시오. 화면 낭독기는 이 분할에 의존하여 각 값을 속한 헤더와 함께 읽으므로, £15는 자신의 열과 함께 도착합니다. 이를 건너뛰면 전체 표가 느슨한 숫자의 벽으로 도착합니다. 표는 레이아웃이 아닌 데이터용입니다
CSS가 레이아웃을 처리할 수 있기 전의 시대가 있었는데, 그때 사람들은 표 밖에서 전체 페이지 레이아웃을 만들었습니다: 왼쪽에 메뉴를 놓고 오른쪽에 콘텐츠를 놓기 위한 <table>이었습니다. 시각적으로 작동하므로 여전히 오래된 페이지와 일부 이메일 템플릿에서 볼 수 있습니다. 복사하지 마십시오. 표는 **표 형식 데이터**용입니다. 행과 열의 격자에 속하는 정보입니다. 페이지의 조각을 배열하는 것은 CSS의 일입니다. 데이터를 보관하는 대신 물건을 배치하기 위해 표를 사용하면 화면 낭독기를 사용하는 누군가에게 페이지를 읽기가 더 어려워지고 나중에 조정하기가 더 어려워집니다.
<!-- 잘못됨: 사이드바를 기사 옆에 배치하는 데 사용된 표 -->
<table>
<tr>
<td><nav>...</nav></td>
<td><article>...</article></td>
</tr>
</table>
<!-- 올바름: 실제 요소, CSS가 열을 처리함 -->
<nav>...</nav>
<article>...</article>이것은 HTML이란에서 설정된 구조와 표현의 분리와 같습니다: HTML의 구조, CSS의 레이아웃. 의미로 요소를 선택하는 것에 대해서는 의미론적 HTML를 보십시오.