[HTML] 3-7. 테이블 작성하기. table,tr,th,td

<3-7. 테이블 > 






표(table 요소, tr요소, th요소, td요소)표를 작성할 때는 블록 레벨 요소인 table요소를 사용한다. 표의 기본 구조는 먼저 tr요소로 행(table row)을 정의하고 내용으로 제목 셀(table header cell)인 th요소와 데이터 셀(table data cell)인 td요소를 포함하여 전체를 table요소로 둘러싼다.
table요소에 summary속성을 사용하여 요약문을 작성하고, th요소에는 abbr속성으로 약어를 지정할 것을 권고한다.
표의 제목은 table요소의 시작태그 뒤에 caption요소를 사용한다.
표의 행을 그룹화하기 위해서 thead 요소, tbody 요소, tfoot 요소를 사용할 수 있다.
(html5에서는 summary속성을 사용하지 말고, figure와 figcaption을 활용한다. caption 요소에서 간단한 설명을 추가할 수도 있다.)

th에는 어떤 방향의 제목임을 알려주는 scope 속성을 지정할 수 있고, id 와 headers 를 이용해서 그 관계를 좀 더 명확히 할 수도 있다.


- 옛날에는 레이아웃을 짤 때 테이블 태그를 많이 썼으나 웹표준에서는 div나 sectioning 요소를 쓰고, 관리자 화면은 table을 다양하게 쓴다. 
- table caption : 테이블 설명
- thead : 제목 
  tbody
  tfoot
- 이전에는 tbody, tfoot순으로 썼으나, 지금은 꼭 순서를 맞춰서 쓴다. 
- th는 scope를 꼭 쓴다. 
 값 4가지 col / row / colgroup / rowgroup 
 col : 열  
 row : 행 


-------------------------------------------------------------------------------
1. 테이블 작성 예제
-------------------------------------------------------------------------------


<table border="1">
    <caption>웹 접근성 및 정보통신 접근성에 대한 주요 정의</caption>

    <thead>
        <tr>
            <th scope="col">구분</th>
            <th scope="col">정의</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><strong>장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침 </strong></td>
            <td>정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</td>
        </tr>
        <tr>
            <td><strong>웹 접근성 이니셔티브 </strong>(WAI: Web Accessibility Initiative)</td>
            <td>장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</td>
        </tr>
        <tr>
            <td><strong>Wikipedia</strong></td>
            <td>표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</td>
        </tr>
        <tr>
            <td><strong>한국정보화진흥원</strong></td>
            <td>어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</td>
        </tr>
    </tbody>
</table>


-------------------------------------------------------------------------------
2. id와 headers를 적용한 예제
-------------------------------------------------------------------------------
<table border="1">
    <caption>웹 접근성 및 정보통신 접근성에 대한 주요 정의를 나타낸 표</caption>
    <thead>
        <tr>
            <th scope="col" id="a1">구분</th>
            <th scope="col" id="a2">정의</th>
        </tr>    
    </thead>

    <tbody>
        <tr>
            <th id="d1"><strong>장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침</strong></th>
            <td headers="d1 a2">정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것</td>
        </tr>
        <tr>
            <th id="d2"><strong>웹 접근성 이니셔티브</strong>(WAI: Web Accessibility Initiative)</th>
            <td headers="d2 a2">장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것</td>
        </tr>
        <tr>
            <th id="d3"><strong>Wikipedia</strong></th>
            <td headers="d3 a2">표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것</td>
        </tr>
        <tr>
            <th id="d4"><strong>한국정보화진흥원</strong></th>
            <td headers="d4 a2">어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것</td>
        </tr>
    </tbody>
</table>

-------------------------------------------------------------------------------
3. 테이블의 셀 합치기, 셀의 크기 지정하기


2) 셀 크기 지정시 하나는 width를 비워두는게 안전하다 

-------------------------------------------------------------------------------
colspan과 rowspan
-------------------------------------------------------------------------------


<table border>
    <thead>
        <tr>
            <th scope="col">title 1</th>
            <th scope="col">title 2</th>
            <th scope="col">title 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">sub title 1-1</th>
            <td colspan="2">data 1-2</td>
            <!-- <td>data 1-3</td> -->
        </tr>
        <tr>
            <th scope="row">sub title 2-1</th>
            <td>data 2-2</td>
            <td>data 2-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 3-1</th>
            <td>data 3-2</td>
            <td>data 3-3</td>
        </tr>
    </tbody>
</table>




<table border>
    <thead>
        <tr>
            <th scope="col">title 1</th>
            <th scope="col">title 2</th>
            <th scope="col">title 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">sub title 1-1</th>
            <td rowspan="3">data 1-2</td>
            <td>data 1-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 2-1</th>
            <!-- <td>data 2-2</td> -->
            <td>data 2-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 3-1</th>
            <!-- <td>data 3-2</td> -->
            <td>data 3-3</td>
        </tr>
    </tbody>
</table>



-------------------------------------------------------------------------------
4. colgroup,col 요소로 셀의 width 적용
- html5 에서는 width="100%" 처럼 요소에서 지정하지 말고, 스타일시트(css) 를 활용하도록 한다.
-------------------------------------------------------------------------------


<table border width="100%">
    <colgroup>
        <col width="*">
        <col width="30%">
        <col width="30%">
    </colgroup>

    <thead>
        <tr>
            <th scope="col">title 1</th>
            <th scope="col">title 2</th>
            <th scope="col">title 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">sub title 1-1</th>
            <td>data 1-2</td>
            <td>data 1-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 2-1</th>
            <td>data 2-2</td>
            <td>data 2-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 3-1</th>
            <td>data 3-2</td>
            <td>data 3-3</td>
        </tr>
    </tbody>
</table>

<hr>

<table border class="table">
    <colgroup>
        <col class="cell1">
        <col class="cell2">
        <col class="cell3">
    </colgroup>

    <thead>
        <tr>
            <th scope="col">title 1</th>
            <th scope="col">title 2</th>
            <th scope="col">title 3</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">sub title 1-1</th>
            <td>data 1-2</td>
            <td>data 1-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 2-1</th>
            <td>data 2-2</td>
            <td>data 2-3</td>
        </tr>
        <tr>
            <th scope="row">sub title 3-1</th>
            <td>data 3-2</td>
            <td>data 3-3</td>
        </tr>
    </tbody>
</table>