<table>
<caption>테이블 만들어보기</caption>
table 태그는 테이블을 생성할 때 사용한다.
표는 표 용도로만 사용해야 한다. 레이아웃에 표를 사용하면 안된다!
caption 태그는 표를 설명하거나 표의 제목을 나타낸다.(선택사항)
<table>
<caption>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</caption>
</table>
tr태그는 table row로써 표의 행을 나타낸다.(가로)
td태그는 table data cell로써 내용을 채운다.
emmet ex) table>caption+(tr>td*3)3
<table>
<caption>웹개발 공부 기록</caption>
<thead>
<tr>
<th scope="col">과목</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>60분</td>
<td>60분</td>
<td>0분</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>0분</td>
<td>30분</td>
<td>60분</td>
</tr>
<tr>
<th scope="row">JS</th>
<td>0분</td>
<td>0분</td>
<td>60분</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">총 시간</th>
<td>60분</td>
<td>90분</td>
<td>120분</td>
</tr>
</tfoot>
</table>
thead 태그 : 테이블의 헤더 부분 / tbody 태그 : 테이블의 본문 / tfoot 태그 : 테이블의 푸터 부분
th 태그 : 열 또는 행의 헤더. scope 속성으로 row(행),col(열) 중 선택
이렇게 굳이 thead나 tfoot, tbody 태그들을 작성하지 않아도 충분히 표를 구현할 수 있지만, 이것 또한 컴퓨터가 구조를 이해하여 사용자의 접근성을 향상시키는데 도움이 된다.
HTML & CSS 01-06-03<table>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>1</td>
</tr>
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td colspan="2" rowspan="2">4</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>
colspan은 행을 병합한다.
rowspan은 열을 병합한다.
<table>
<colgroup>
<col class="weekend">
<col span="5">
<col class="weekend">
</colgroup>
<thead>
<tr>
<th scope="col">일</th>
<th scope="col">월</th>
<th scope="col">화</th>
<th scope="col">수</th>
<th scope="col">목</th>
<th scope="col">금</th>
<th scope="col">토</th>
</tr>
</thead>
<tbody>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
<tr>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
<td>_</td>
</tr>
</tbody>
</table>
colgroup태그는 표에 열을 묶어서 속성을 부여하는 것이다. caption태그보다 뒤에 와야하고, 그 외 요소보다 앞에 와야한다.
col태그는 열의 묶음이다. span 속성으로 열 수를 지정한다.