[웹표준] Table 태그에 대해 알아보자 :: 마이구미

이번 글은 table에 관련된 웹 표준 및 접근성에 대해 알아볼 것이다.

이 글 이후부터 웹 표준 및 접근성에 대한 글을 다룰 예정이다.

웹 개발에서 있어서 웹 표준 및 접근성이 중요하다.

간단히 말하자면, 웹 표준은 어떤 브라우저에도 동일하게 보여져야한다.

웹 접근성은 어떤 사용자나 환경에서도 정보에 대한 접근과 이해가 보장되어야한다. (장애인들을 위함이다.)

본인은 크로스 브라우저만 고려하여 기능적인 부분만 잘 돌아가는 지만 항상 확인했다.

하지만 그건 나 스스로 웹 개발자라고 하기엔 부끄러운 생각이었다. (반성반성)

중요하다. 지금부터라도 잘 준수하자.

본론으로 넘어가자.

table 태그는 가급적으로 쓰지말고 div로 처리할 수 있으면 하는 게 좋다.

하지만 테이블 구조가 필요하다면 억지로 div로 만들지말고 그냥 써라.

table은 조금 오래된 방식이라 문서를 확실히 확인하자. 

HTML5에서 지원하지 않는 속성들이 많다.

그리고 쓰는 대신 지켜야할 건 지키자!

table 태그의 기본 예제이다.

<table border="1">
    <caption>2학기 성적</caption>
    <thead>
    <tr>
        <th scope='col' >이름</th>

        <th scope='col' >국어</th>

        <th scope='col' >수학</th>

        <th scope='col' >영어</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td scope='row' >김철수</td>

        <td>A+</td>
        <td>A+</td>
        <td>A+</td>
    </tr>
    <tr>
        <td scope='row'>이기명</td>

        <td>B</td>
        <td>A</td>
        <td>C+</td>
    </tr>
    <tr>
        <td scope='row'>박민지</td>

        <td>C+</td>
        <td>F</td>
        <td>F</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="4">2016년 2학기</td>
    </tr>
    </tfoot>
</table>

위 소스에서 봐야할 건 thead, tbody, tfoot, caption, scope이다.

thead, tbody, tfoot은 안 쓰는 경우도 많다.

필수는 아니지만 그래도 쓰는 것이 여러 방면으로 좋다.

쓰는 경우는 코드 가독성이나 스타일 적용에 편하게 사용하기 위해 사용한다.

또한 긴 표일 때 프린터 시 각 페이지마다 표의 제목줄이 자동 반복기능을 포함할 수 있다.

caption은 표의 설명에 쓰인다.

필수는 아니지만 웬만하면 명시하길 권고하고 있다.

scope 요놈은 필수다.

시각장애인들은 웹페이지를 이용할 때 스크린 리더기를 이용한다.

소리를 통해 듣기 때문에 표 같은 경우는 순서가 가장 중요하다.

그 순서를 명시하기 위해 사용하는 것이 scope 속성이다.

현재 이름, 국어, 수학, 영어은 열 기준이므로 scope 속성이 col로 지정하고, ( col은 해석하면 열, row는 행 )

김철수, 이기명, 박민지은 행 기준이므로 scope 속성이 row로 지정했다.

과목과 이름으로 scope를 지정해주었기 때문에 실질적인 내용에는 scope 속성이 들어가지 않아도 된다.

이로써,

이름이 김철수 -> 국어 A+ -> 수학 A+ -> 영어 A+ 순서대로 읽어주게 된다.

웹 표준과 웹 접근성

http://yunujoseph.kr/archives/1700

table tag reference

http://www.w3schools.com/tags/tag_table.asp