아래는 TextMate에서 제공하는 HTML의 기본 table snippet에 의해 삽입되는 코드이다.

<table border="0" cellspacing="5" cellpadding="5">
  <tr><th>Header</th></tr>
  <tr><td>Data</td></tr>
</table>

무척이나 단출하고 접근성을 염두에 둔 최소한의 요소들이 빠져있기 때문에 데이타 테이블을 짤 때 무심코 그냥 지나칠 수가 있다.
간단한 데이타 테이블이라도 접근성을 고려한다면 최소한 테이블 안에 caption 요소와 summary 속성을 추가하고 th 혹은 간혹 td 요소에는 scope 속성이 포함되어 있어야 한다.
그래서, 나름대로 수정한 table snippet (행의 갯수가 최소 4, 최대 7 기준):

<table id="${1}" summary="${2}"${4:${5: border="${6:0}"}${7: cellspacing="${8:5}" cellpadding="${9:5}"}}>
  <caption>${10}</caption>
  <thead>
    <tr>
      ${11:<td></td>
      }<th scope="col">${12:Table Header}</th>
      <th scope="col">${13:Table Header}</th>
      <th scope="col">${14:Table Header}</th>
      <th scope="col">${15:Table Header}</th>
      ${16:<th scope="col">${17:Table Header}</th>
      ${18:<th scope="col">${19:Table Header}</th>
    }}</tr>
  </thead>
  ${20:<tfoot>
    <tr>
      <th scope="row">${21:Table Footer}</th>
      <td colspan="${22:}">${23:Footer Data}</td>
    </tr>
  </tfoot>
  }<tbody>
    ${35:<tr>
      ${24:<th scope="row">${25:Header}</th>
      }<td>${26:Data}</td>
      <td>${27:Data}</td>
      <td>${28:Data}</td>
      ${29:<td>${30:Data}</td>
      ${31:<td>${32:Data}</td>
      ${33:<td>${34:Data}</td>
    }}}</tr>}
    ${0:}
  </tbody>
</table>

간혹 구조가 복잡한 데이타 테이블일 경우 scope 속성으로는 테이타 셀과 테이블 제목들과의 관계를 제대로 표현할 수가 없기 때문에 대신에 headers 속성을 써야 할 경우가 있는데, 현재 논의되고 있는 HTML 5.0의 표준 초고 문안에는 headers 속성이 포함되지 않을 예정이라서 개발자들 사이에 많은 논란이 되고 있다.

앞으로 headers 속성의 운명은 알 수가 없지만, 분명한 것은 지금 바로 적용될 수 있는 올바른 데이타 테이블의 구현 방법을 숙지하는 것이리라. W3C의 HTML 문서에 나와있는 화면 해독기를 고려한 Table 표현 방법이나 한 번 더 훑어보자.
데이타 테이블의 디자인 아이디어를 얻고 싶을 땐 Data Tables and Cascading Style Sheets Gallery가 도움이 된다.

테이블(table) 꼬리표는 1994년 HTML 2.0에서 소개되었다. 이들의 등장은 원래 산출 테이타들을 담아 놓을 목적이었으나, 잘 못된 습관으로 웹 페이지의 내용들을 레이아웃(layout)하기 위한 수단으로 오용되어 왔으며, 현재는 이것이 주 사용 목적이 되어버린 상태이다.
지금은 많은 웹 표준화 노력들로 그 수가 줄어들기는 했지만, 아직까지도 화면 글자 해독기의 접근을 방해하는 등의 웹 접근성을 떨어뜨리는 이들의 무분별한 사용은 여전하다.

웹 페이지의 레이아웃과 전달을 위해 Cascading Style Sheets(CSS)이라는 훌륭하고 바람직한 수단이 존재하고 있는 지금, 더 이상 레이아웃을 위한 테이블의 사용은 단지 불합리한 악습을 털어내지 못하는 의도적 무관심일 뿐이다.

그렇다면, 접근 용이한 테이타 테이블은 무엇이고, 어떻게 구현되어야 하는가?
아래의 글들에 그 내용과 본보기들이 잘 설명되어 있다.

• Web Usability – Accessible Data Tables
• Data Tables and Cascading Style Sheets Gallery

올바른 용법의 구현은 효율성 극대화의 원천이 된다.

여기서 Microsoft 헐뜯기 하나 더 – 예전 보다는 많이 줄어들었지만, 아직도 그들의 홈 페이지는 웹 페이지 구획을 위해 테이블 꼬리표들을 사용하고 있다.
이유는 분명하다. 그들의 대표 브라우져인 Internet Explorer 6는 아직도 발표된 지 벌써 8년이 지난 CSS2를 제대로 지원하지 않고 있다. 그렇다고 차기에 발표될 IE 7에서는 상황이 더 개선될 것이라는 기대를 할 수도 없는 상황이란다.