tag >> table

1. 테이블 속성

접근성설명 : http://codepen.io/mctenshi/pen/LDuoc

스팩 : http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#attr-th-scope

th 속성	설명(시각장애인들을 위한 접근성을 고려할때는 필요한 태그)
scope="row"	가로(행)
scope="col"	세로(열)

2. 테이블 기본 

1. <table summary="테이블내용">
2.    <caption>Users</caption>
3.    <thead>
4.     <tr>
5.      <th scope="col"> thead th</th>
6.      <th scope="col> thead th</th>
7.      <th scope="col> thead th</th>
8.     </tr>
9.    </thead>
   
   
10.    <tfoot>
11.     <tr>
12.      <th scope="row"> tbody th</th>
13.      <td> tfoot </td>
14.      <td> tfoot </td>    
15.     </tr>
16.    </tfoot>
17.    
18.    <tbody>
19.     <tr>
20.      <th scope="row"> tbody th</th>
21.      <td> tbody td</td>
22.      <td> tbody td</td>    
23.     </tr>
24.     <tr>
25.      <th scope="row"> tbody th</th>
26.      <td> tbody td</td>
27.      <td> tbody td</td>
28.     </tr>
29.    </tbody>
30. </table>

 

3. id, hearder 사용

<table summary="평일, 금요일, 토요일, 연휴성수기의 정상요금과, 개인 또는 법인회원, 지정, 대여시 회원요금을 안내합니다.">

    <caption>객실요금안내</caption>

    <colgroup>

        <col width="20%">

        <col width="20%">

        <col width="20%">

        <col width="20%">

        <col width="20%">

    </colgroup>

    <thead>

        <tr>

            <th id="weekday" scope="col" rowspan="2">평일</th>

            <th id="normal" scope="col" rowspan="2">정상요금</th>

            <th id="member" scope="colgroup" colspan="3">회원요금</th>

        </tr>

        <tr>

            <th id="general" scope="col">개인/법인</th>

            <th id="appoint" scope="col">지정</th>

            <th id="rent" scope="col">대여</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th id="case1" scope="row" >평일</th>

            <td headers="case1 normal">400,000</td>

            <td headers="case1 member general">83,000</td>

            <td headers="case1 member appoint">80,000</td>

            <td headers="case1 member rent">93,000</td>

        </tr>

        <tr>

            <th id="case2" scope="row">주말(금)</th>

            <td headers="case2 normal">400,000</td>

            <td headers="case2 member general">103,000</td>

            <td headers="case2 member appoint">100,000</td>

            <td headers="case2 member rent">133,000</td>

        </tr>

        <tr>

            <th id="case3" scope="row">주말(토)</th>

            <td headers="case3 normal">400,000</td>

            <td headers="case3 member general">103,000</td>

            <td headers="case3 member appoint">100,000</td>

            <td headers="case3 member rent">163,000</td>

        </tr>

        <tr>

            <th id="case4" scope="row">연휴/성수기</th>

            <td headers="case4 normal">400,000</td>

            <td headers="case4 member general">107,000</td>

            <td headers="case4 member appoint">104,000</td>

            <td headers="case4 member rent">207,000</td>

        </tr>

    </tbody>

</table>