웹접근성 테이블

표준적으로 사용하고 있는 양식이니 참고하면 되겠다

summery의 경우 html5에서는 마크업오류가 발생하지만

일단 기본적으로는 사용하는 걸로 한다.

하지만 caption을 적절히 제공했을 경우에는 사용하지 않아도 무방하다

scope의 경우 스크린리더기가 컨텐츠를 읽는 방향 제시하기 때문에 적절히 작성해주도록 한다.

<table class="tb" summary="테이블내용 요약">
  <caption>
  테이블 제목
  </caption>
  <colgroup>
  <col width="25%" />
  <col width="25%" />
  <col width="25%" />
  <col width="" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">구분1</th>
      <th scope="col">구분2</th>
      <th scope="col">구분3</th>
      <th scope="col">구분4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

<table class="tb" summary="테이블내용 요약">
  <caption>
  테이블 제목
  </caption>
  <colgroup>
  <col width="25%" />
  <col width="25%" />
  <col width="25%" />
  <col width="" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col">구분1</th>
      <th colspan="3" scope="colgroup">구분2</th>
    </tr>
    <tr>
      <th scope="col">구분3</th>
      <th scope="col">구분4</th>
      <th scope="col">구분5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

<table class="tb" summary="테이블내용 요약">
  <caption>
  테이블 제목
  </caption>
  <colgroup>
  <col width="25%" />
  <col width="25%" />
  <col width="25%" />
  <col width="" />
  </colgroup>
  <thead>
    <tr>
      <th scope="col">구분1</th>
      <th scope="col">구분2</th>
      <th scope="col">구분3</th>
      <th scope="col">구분4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>내용</td>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

첨부파일참고