[html] table 태그 기본 구조 (접근성, 시맨틱)

테이블 태그는 데이터를 담고 있는 표를 만들기 위한 목적으로 사용하는 태그입니다.

하지만 예전에는 테이블 요소를 레이아웃의 용도로 많이 사용했습니다. 하지만 접근성의 문제가 생기지 않으려면 

테이블 요소들은 레이아웃이 아닌 도표의 의미가 필요할 때에만 사용해야 합니다.

홈페이지 전체 구성이나 배치를 위해선 table 태그가 아닌 각각 의미에 맞는 태그를 사용해야 합니다.

 

<tr></tr> = 행

<td></td> = 셀

 

colspan = 가로로 합치는 것, 열(col)들을 병합(span:걸치다)하는 속성입니다.

rowspan = 세로로 합치는 것, 행(row)들을 병합하는 속성입니다.

* 이 속성은 th, td에 사용할 수 있으며, 속성 값으로 병합할 셀의 숫자를 적으시면 됩니다.

대신 셀 병합을 할 경우, 병합된 개수만큼의 셀은 빼야 합니다.

ex) <td colspan="2"></td>, <td rowspan="2"></td> 

 

colspan과 rowspan은 표가 복잡해질수록, 조금 헷갈릴 수도 있으니 표를 직접 보면서 작성하세요.

 

* align 속성

셀 안의 내용을 좌우로 정렬해주는 속성입니다.

<td> 태그에 기술한 내용이 테이블의 셀에 나타날 때 항상 왼쪽에 위치하는 것을 볼 수 있습니다.

문자의 위치 기본값이 왼쪽으로 정해져 있기 때문입니다.

위치를 바꾸기 위해선 'align'속성을 tr, td, th 태그 안에 지정하면 특정 셀에 대해 내부에 기술한 텍스트가 정렬된 것을 볼 수 있습니다.

ex) <tr align="left"></tr>

 

 

 

 

테이블 기본 구조
<table>

   <caption></caption>

    <thead>

     <tr>

         <th></th>

         <th></th>

      </tr>

    </thead>

    <tbody>

        <tr>

            <td></td>

            <td></td>

        </tr>

        <tr>

             <td></td>

             <td></td>

          </tr>

     </tbody>

     <tfoot>

         <tr>

              <td></td>

          </tr>

     </tfoot>

</table>

접근성 고려하기
*caption (테이블 제목+요약정보)

 

시각적으로 숨기고 싶을 때 css로 처리하는 방법입니다.
1. text-indent:-10000px
2. position:absolute
3. CSS clip 사용

* scope
시각장애인들은 웹페이지를 이용할 때 스크린 리더기를 이용합니다.
소리를 통해 듣기 때문에 표 같은 경우는 순서가 가장 중요합니다.
scope=‘col’ -> 열
scope=‘row’ -> 행

scope는 행과 열의 구조의 단순한 표일 경우 사용을 하게 되고,
id, headers는 복잡한 표일 경우 사용합니다.

* HTML5에서는 td태그에서 scope 속성이 표준이 아니라는 점 참고