차림

2006년 9월 17일

접근성을 높이기 위한 표의 기본 형태

글자를 읽을 수 없어서 웹 문서를 읽어주는 도구를 쓰는 사람을 위해서는 표에 지정해 주어야 할 게 있다. 자료를 표로 나타날 때 내가 잘 쓰는 기본 형태를 표 1에, 그리고 그 소스를 그 밑에 나타냈다. 아직 복잡한 자료를 표로 나타낼 일이 없어서 이외에 다른 태그는 거의 쓰지 않는다. 좀 복잡한 표는 만화주제가에 있는 TV 시간표의 소스를 참고할 것.

표 1. 과일값 (단위 : 원)
가게사과복숭아
금마트5002,000600
은마트7001,500600
동마트4003,000500

<table cellspacing="1" summary="이 표는 동네 가게 세 군데의 과일값을 나타낸 것입니다.">
<caption>표 1. 과일값 (단위 : 원)</caption>
<tr>
  <th scope="col">가게</th>
  <th scope="col">사과</th>
  <th scope="col">배</th>
  <th scope="col">복숭아</th>
</tr>
<tr>
  <th scope="row">금마트</th>
  <td>500</td>
  <td>2,000</td>
  <td>600</td>
</tr>
<tr>
  <th scope="row">은마트</th>
  <td>700</td>
  <td>1,500</td>
  <td>600</td>
</tr>
<tr>
  <th scope="row">동마트</th>
  <td>400</td>
  <td>3,000</td>
  <td>500</td>
</tr>
</table>

summary는 표를 간단히 설명해 주는 것으로 글자로 나타나진 않지만 웹 문서를 읽어주는 도구를 쓸 때는 읽어준다고 한다. 하지만 이미 앞에서 어떤 표가 올지 설명하고 있다면 굳이 summary는 쓰지 않아도 될 것 같다.

목록