메뉴 건너뛰기

HEUKMYO

web publishing

140620_table

2014.06.20 11:30 read.47

접근성을 고려한 table 코딩


<table border="1" width="100%" summary="상하반기 태블릿 PC와 스마트폰 판매현황"> -summary 표의 요약 내용을 적어줌

    <caption>태블릿 PC와 스마트폰 판매현황</caption> - caption 표의 제목

    <colgroup>

        <col width="20%" />

        <col width="20%" />

        <col width="20%" />

    </colgroup>

    <thead>

        <tr>

            <th scope="col">구분</th> - scope 표의 내용을 읽을 때 scope="col" 열제목일때

            <th scope="col">태블릿 PC</th>

            <th scope="col">스마트폰</th>

        <tr>

    </thead>

    <tfoot> - 이 먼저 오게 만들어옴 결과부터 먼조 알수 있도록

        <tr>       

            <th scope="row">상반기 판매수</th> - scope="row" 행제목일때

            <td>2만대</td>

            <td>2만대</td>

        </tr>

    </tfoot>

    <tbody>

        <tr>       

            <th scope="row">상반기 판매수</th> - scope="row" 행제목일때

            <td>2만대</td>

            <td>2만대</td>

        </tr>

        <tr>       

            <th scope="row">상반기 판매수</th> - scope="row" 행제목일때

            <td>2만대</td>

            <td>2만대</td>

        </tr>

    </tbody>

</table>


 scope="col"과  scope="row"의 차이점

커서가 행이동을 했을때 scope="row"의 부분을 읽어준다


제목이 합쳐져 있는 경우 scope="colgrooup"을 사용한다.

headers=""  id="" 지정한 제목만 읽을 수 있게한다(복잡한 테이블을 사용할때)

위로