table 의 summary, caption, scope, id, headers
구조
| 과일 | 순위 |
가격 |
갯수 |
비교 |
|
사과 |
미정 |
500000개 |
제철이아님 | |
|
참외 |
4위 |
5000 만원 |
제철 | |
-속성 scope 구조
|
scope="col" |
scope="col" |
scope="col" |
scope="col" |
scope="col" |
|
scope="row" |
||||
|
scope="row" |
||||
-속성 scope 코드
<table cellpadding="0" cellspacing="0" border="0" width="100%" summary="table 웹표준 코딩에 관한 샘플입니다.">
<caption>table 웹표준 코딩에 관한 샘플</caption>
<thead>
<tr>
<th scope="col">과일</th>
<th scope="col">순위</th>
<th scope="col">가격</th>
<th scope="col">갯수</th>
<th scope="col">비교</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">사과</th>
<td>미정</td>
<td> 500000 개</td>
<td>제철이 아님</td>
</tr>
<tr>
<th scope="row" >참외</th>
<td>4 위</td>
<td>5000 만원</td>
<td>제철이 아님</td>
</tr>
</tbody>
</table>
-속성 headers 구조
|
id="S" |
id="A" | id="B" | id="C" | id="D" |
|
id="E" headers="E" |
headers="S A B E" |
headers="C E F" |
headers="D E" | |
|
id="F" headers="E" |
headers="S A F" |
headers="S B F" |
headers="D F" | |
-속성 headers 코드
<table cellpadding="0" cellspacing="0" border="0" width="100%" summary="table 웹표준 코딩에 관한 샘플입니다.">
<caption>table 웹표준 코딩에 관한 샘플</caption>
<thead>
<tr>
<th id="S">과일</th>
<th id="A">순위</th>
<th id="B">가격</th>
<th id="C">갯수</th>
<th id="D">비교</th>
</tr>
</thead>
<tbody>
<tr>
<th headers="S" id="E">사과</th>
<td headers="S A B E" colspan="2">미정</td>
<td headers="C E F" rowspan="2"> 500000 개</td>
<td headers="D E">제철이 아님</td>
</tr>
<tr>
<th headers="S" id="F">참외</th>
<td headers="S A F">4 위</td>
<td headers="S B F" >5000 만원</td>
<td headers="D F">제철이 아님</td>
</tr>
</tbody>
</table>
※ scope와 headers는 같은 역할로 둘 중 하나만 선택하여 테이블의 구조에 따라 사용하면 된다.
