TABLE 바로쓰기.

얼마전 포스트에서 공개(?) 한것처럼 요새 코딩할때 표준을 지켜볼려고 꾸준히 노력중이다.

지금 다니는 회사와서 첨으로 일주일 이상가는 대형프로젝트가 시작됬는데

이번에도 표준을.. 아이다.. 표준이라기보다 Firefox와 IE 두군데에서 잘 보이는 페이지들을 결과로 내놓기위해 애쓰고있다.

뻘짓한다. 라는 눈총이 아쉽긴하지만 그래도 가는거야~~!!
(그런데 사실 하늘이 두쪽나도 우리사이트의 이용자가 Firefox를 이용한다거나.
 스크린 리더로읽히는 일은 없긴하다.ㅜㅜ)

오호 제목은 table바로쓰기라고 해놓고 잡설만..

table을 바로쓴다는건 사실 용도에 맞게 사용하는게 바로쓰기의 기본이겠지만..

요즘의 사이트에서 table을 사용하지않고 그 화려한 화면을 채우는건... 너무 힘들듯하다..

레이아웃을 위해사용할때는 개인적인 생각으로는 필요없는 칸들을 최소로 해주는게 제일 중요할듯하다.

나만해도.. 테이블안의 문장들 앞에 여백주는것에까지 빈칸들로 만들어 넣어버리니.. ㅡㅜ

이제 테이블 본연의 표형태의 데이터를 표현함에 있어 새로 알게된 몇가지를 보자.

우리가 평소 사용하는 <table> <tr> <td> tag외에

<caption> <thead> <tfoot> <tbody> <th> 그리고 <table>의 속성중 summary를 알아보자.

====================================================================================
<TABLE SUMMARY="연습을 위한 테이블입니다." BORDER="1">
    <CAPTION>예제 테이블</CAPTION>
    <THEAD>
        <TR>
            <TH ID="NAME">별명</TH>
            <TH ID="IN">수입</TH>
            <TH ID="OUT">지출</TH>
        </TR>
    </THEAD>
    <TFOOT>
        <TR>
            <TD>합계</TD>
            <TD>2,000</TD>
            <TD>1,200</TD>
        </TR>
    </TFOOT>
    <TBODY>
        <TR>
            <TD HEADERS="NAME">바람돌이</TD>
            <TD HEADERS="IN">1,000</TD>
            <TD HEADERS="OUT">500</TD>
        </TR>
        <TR>
            <TD HEADERS="NAME">쑤니오빠</TD>
            <TD HEADERS="IN">1,500</TD>
            <TD HEADERS="OUT">700</TD>
        </TR>
    </TBODY>
</TABLE
====================================================================================

보는것처럼 순수 데이터만을 표시하고 있는상태이다.

<CAPTION>
테이블 제목을 나타내는데 사용.
눈으로 보기에도 한눈에 볼수있고 스크린 리더 사용시에도 제목을 읽어주니 도움이 많이되겠다.
하지만 일반적인 페이지에서 테이블에 제목을 넣기란 거의 불가능해보이니
<TABLE>태그의 SUMMARY속성에 설명을 넣는게 도움도 되고 좀더 현실적이겠다.

<TH>
헤더를 표시할때 사용한다.
<TD>태그와 달리 굵게보이고 가운데 정열이 되며 ID를 사용하여 <TD>태그와 연계시(예제 참조)
스크린 리더가 읽어줄때 해당헤더를 함께 읽어준다.
예제의 경우라면 아래처럼 읽는다.
별명 바람돌이 수입 천 지출 오백 별명 쑤니오빠 수입 천오백 지출 칠백.
실제 동작을 확인해보고 싶었는데 참고서적에서 소개하는 센스리더와 드림보이스는 다운받을수가 없었다 ㅜㅜ
센스리더는 게시물이 없고.. 드림보이스는 장애인증을 받은사람만 다운이 가능하다.
<TH>태그 사용시 또 다른 장점은 <TD>태그와 구분이 되어있으니 스타일 적용시 편리하다.

<THEAD>,<TFOOT><TBODY>
테이블 구조를 정의해주는 태그.
우리가 데이터를 표현하기위해 사용하는 테이블을 쓸때는 위구조를 항상 가지고 있다.
내 경우는.. 몰라서 않썼지..
사용은 예제를 보고 이 태그들로 구조를 정의해놓는 경우 일반적인 사이트의 경우라도
구조별로 스타일을 일괄적으로 적용이 가능해 (물론 CLASS를 사용해도 된다.) 편리하다.
그리고 <TBODY>보다 앞에 헤더와 풋터를 사용하는게 스크린 리더를 위해서도 좋다.

사실 <THEAD>,<TFOOT><TBODY> 세가지를 써보고 오호~ 싶어서 시작한 글인데.
에이 테이블관련해서 정리해보자! 라고 하다보니 글이 많이 길어졌고..
길어진 글을보니 책을 그대로 옮긴게 아닌가 싶다. ㅜㅜ

여튼 표준을 위한 작은 노력으로 개인적으로는 기본을 지키고 있다는 좋은 느낌과

더불어 모두가 이용하는 사이트에서는 다른사람에게도 큰도움이 된다니 일석이조로구나~!


끝으로 우리가 이미지 잘라서 화면 구성할때 100%테이블을 쓴다.
포토샵에서도 이미지 잘라서 HTML로 저장하면 친절하게 테이블로 만들어주는데.
혹 이방법이 아니올시다.. 라면 어떤 대안이 있는지 아직 찾지못하겠다...
이부분에 관해 아는 포스트나.. 스레드에 대해 알려주면 맘으로 후사하겠다 (--)(__)


참고서적 :실용예제로 배우는 웹표준