웹접근성을 생각한 table태그 작성법

       table은 기본적으로 줄(row)와 행(colum)으로 구성되어 있음

 

       테이블 요소 태그 - tr th td

 

        셀병합

        1. 가로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 colspan="합쳐지는 칸수"

        2. 세로칸을 합칠 때는 합쳐지는 칸을 삭제 후 시작칸에 rowspan="합쳐지는 칸수"

        3. 가로, 세로칸 모두 합칠 때는 합쳐지는 가로, 세로 칸 모두 삭제 후 시작칸에 rowspan, colspan을 모두 적용

 

        thead - 테이블의 행 그룹 중 제목 셀그룹

                   테이블 내에 한 번 사용

        tbody - 테이블의 본문 행

        tfoot - 레코드 내용의 소계, 합계 등 정보에 해당하는 푸터 행

                  테이블 내에 한 번 사용

       thead를 이용하면 테이블의 본문이 긴 상태에서 출력할 때 제목 셀그룹을 반복적으로 출력할 수 있음

 

         

        colgroup>col - 표의 열을 묶는 그룹 (의미없는 스타일지정을 위해서 사용하지말것(css이용), 잘 이용하지않음)

 

        scope - 제목셀과 내용셀의 관계를 지정

                데이터의 의미와 관계를 파악하기 쉽게 만들어줌

                th에 scope속성을 지정하고 정렬방식에 따라 col/row 값을 적용

                해당 셀이 열의 제목인지 행의 제목인지 알 수 있다

<table border="1" class="tableB" summary="회원의 이름,성별,나이,거주지 정보">
        <caption class="h">회원정보</caption>
        <tr>
            <th scope="row">이름</th>
            <td>홍길동</td>
        </tr>
        <tr>
            <th scope="row">성별</th>
            <td>남</td>
        </tr>
        <tr>
            <th scope="row">나이</th>
            <td>20</td>
        </tr>
        <tr>
            <th scope="row">거주지</th>
            <td>서울</td>
        </tr>
    </table>

        웹접근성을 위해 summary, caption 꼭 사용해주기

        caption을 화면에 보이지않게하려면 클래스 지정해서 absolute로 화면밖으로 위치시키기(display:none사용X)

 

        복잡하게 병합된 테이블의 경우

        id, headers

        th는 id를 설정

        td는 headers를 사용

<table border="1" class="tableC" summary="당월 결제하실 회차, 원금, 혜택금액, 환율, 수수료 정보표">
        <caption class="h">당월 결제 금액</caption>
        <thead>
            <tr>
                <th colspan="5" id="a1">당월 결제하실 금액</th>
            </tr>
            <tr>
                <th id="b1">회차</th>
                <th id="b2">원금</th>
                <th id="b3">혜택금액</th>
                <th id="b4">환율</th>
                <th id="b5">수수료</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td headers="a1 b1">100</td>
                <td headers="a1 b2">200</td>
                <td headers="a1 b3">300</td>
                <td headers="a1 b4">400</td>
                <td headers="a1 b5">500</td>
            </tr>
            <tr>
                <td headers="a1 b1">600</td>
                <td headers="a1 b2">700</td>
                <td headers="a1 b3">800</td>
                <td headers="a1 b4">900</td>
                <td headers="a1 b5">1000</td>
            </tr>
        </tbody>
    </table>

 

    table 태그에 border 적용시 2줄로 나오는 현상을 방지해주는 css속성

    table{border-collapse: collapse;}