1. Table 태그 : 명확한 표의 형식에만 사용하는 태그
사용 예시 )
<table>
<caption> 선물용과 가정용 상품 구성</caption>
<thead>
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11~16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>4kg</td>
<td>11~16과</td>
<td>21,000원</td>
</tr>
</tbody>
</table>
2. caption
<caption></caption> : 표 제목 , 위쪽 중앙에 표시, 생략가능
3. scope
<scope></scope> : 열 제목, 행 제목 셀<th>에 정의하는 속성
행 제목 : <th scope="row">
열 제목 : <th scope="col">
낭독기에선 scope가 정의된 셀과 함께 td를 읽어준다.
4. <tr></tr>
행을 만드는 태그
5. <td></td>
행안의 셀을 만드는 태그
colspan="n" 속성
6. <th></th>
제목 행에 셀을 만드는 태그
내용이 진하게 표시, 중앙 배열
7. 속성 rowspan, colspan
속성 rowspan="n" 아래와 같이 행을 합칠 때 사용
속성 colspan="n" 아래와 같이 열을 합칠 때 사용
사용 예시 ) <td rowspan="합칠 셀의 개수">셀의 내용</td>
8. 열을 묶는 태그
<colgroup>, <col> : 배경, 너비 등을 특정 열에 지정할 때 사용
사용예시 )
<table>
<caption>선물용과 가정용 상품 구성</caption>
<colgroup>
<col style="background-color:#eee;">
<col>
<col span="2" style="width:150px;"> // 스타일 속성이 같은 세번째, 네번째 열을 묶어서 너비 지정
<colgroup>
<thead>
(... 이하 생략)
댓글