테이블 만들기

<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은 열을 병합한다.

HTML & CSS 01-06-04

<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 속성으로 열 수를 지정한다.