Table
▶ 데이터를 담은 표를 만들 때 사용하는 태그이다.
▶ 데이터를 적지 않는 부분이 있더라도 th태그와 td태그의 갯수는 반드시 동일해야한다.
① tr : 표의 열 하나를 만드는 태그이다.
② th : 테이블 헤더를 만드는 태그이다.
③ td : 테이블 데이터를 만드는 태그이다.
④ thead : 테이블의 헤더 부분이라는 것을 브라우저에 좀 더 명확하게 전달해준다.
⑤ tbody : 헤더 부분의 데이터라는 것을 브라우저에 좀 더 명확하게 전달해준다.
⑥ tfoot : 데이터의 총합, 결과를 나타내는 열이라는 것을 브라우저에 좀 더 명확하게 전달해준다.
<table> <!-- 테이블을 하나 만들것이라고 선언한다. -->
<thead> <!-- 테이블의 헤더라는 것을 명확하게 전달 -->
<tr> <!-- 가로줄을 하나 만든다. -->
<!-- 테이블 헤더를 입력한다. -->
<th> 품명 </th>
<th> 용량 </th>
<th> 가격 </th>
</tr>
</thead>
<tbody> <!-- 헤더에 해당하는 데이터라는 것을 명확하게 전달 -->
<tr>
<!-- 각 헤더에 맞는 데이터를 입력한다. -->
<td> 소고기 </td> <!-- '품명'에 해당하는 데이터 -->
<td> 300g </td> <!-- '용량'에 해당하는 데이터 -->
<td> 32590 </td> <!-- '가격'에 해당하는 데이터 -->
</tr>
<tr>
<!-- 각 헤더에 맞는 데이터를 입력한다. -->
<td> 닭고기 </td> <!-- '품명'에 해당하는 데이터 -->
<td> 700g </td> <!-- '용량'에 해당하는 데이터 -->
<td> 11900 </td> <!-- '가격'에 해당하는 데이터 -->
</tr>
</tbody>
<tfoot> <!-- 데이터의 결론을 나타낸 열이라는 것을 명확하게 전달-->
<td> 총 가격 </td>
<td></td> <!-- 입력할 데이터가 없더라도 데이터의 갯수는 맞춰야한다. -->
<td> 44490 </td>
</tfoot>
</table>
⑦ colspan="병합할 셀의 갯수" : th, td태그의 옵션이다. 입력한 갯수만큼 가로로 셀을 병합한다.
⑧ rowspan="병합할 셀의 갯수" : th, td태그의 옵션이다. 입력한 갯수만큼 세로로 셀을 병합한다.
⑨ scope="row | col" : th, td태그의 옵션이다. 사용 시 행, 열을 대표하는 헤더라는 것을 브라우저에 명확히 전달해준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 테이블 연습 </title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th scope="col">월</th> <!-- scope="col"을 사용하여 행을 대표하는 헤더라는 것을 명시하였다. -->
<th scope="col">화</th>
<th scope="col">수</th>
<th scope="col">목</th>
<th scope="col">금</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1교시</th> <!-- scope="row"을 사용하여 열을 대표하는 헤더라는 것을 명시하였다. -->
<td rowspan="2">왕초보 HTML & CSS</td> <!-- 이스케이프 코드(&) 사용 -->
<td>모각코</td>
<td rowspan="2">왕초보 HTML & CSS</td> <!-- rowspan을 사용하여 위아래로 2개의 셀이 병합되었다. -->
<td>모각코</td>
<td rowspan="2">왕초보 HTML & CSS</td>
</tr>
<tr>
<th scope="row">2교시</th>
<!-- <td>왕초보 HTML & CSS</td> --> <!-- 이미 병합 된 셀이기 때문에 td태그를 만들 필요가 없다. -->
<td rowspan="2">JS 스킬업</td>
<!-- <td>왕초보 HTML & CSS</td> -->
<td rowspan="2">JS 스킬업</td>
<!-- <td>왕초보 HTML & CSS</td> -->
</tr>
<td scope="row">3교시</td>
<td>js 시작반</td> <!-- 이미 병합 된 셀이기 때문에 td태그를 만들 필요가 없다. -->
<!-- <td rowspan="2">JS 스킬업</td> -->
<td>js 시작반</td>
<!-- <td rowspan="2">JS 스킬업</td> -->
<td>js 시작반</td>
</tbody>
<tr>
<th scope="row" colspan="6">점심시간</th>
</tr>
<tr>
<th scope="row">4교시</th>
<td>SASS 기초반</td>
<td rowspan="2">포트폴리오반</td>
<td rowspan="2">Open Seminar</td>
<td rowspan="2">포트폴리오반</td>
<td>SASS 기초반</td>
</tr>
<tr>
<th scope="row">5교시</th>
<td>모각코/td>
<!-- <td rowspan="2">포트폴리오반</td> -->
<!-- <td rowspan="2">Open Seminar</td> -->
<!-- <td rowspan="2">포트폴리오반</td> -->
<td>모각코</td>
</tr>
</table>
</body>
</html>'HTML' 카테고리의 다른 글
| <abbr></abbr>, <adress></adress>, <pre></pre>, <code> </code> (0) | 2021.12.27 |
|---|---|
| <audio></audio>, <video></video> (0) | 2021.12.27 |
| <button type=""></button> (0) | 2021.12.24 |
| <textarea></textarea> (0) | 2021.12.24 |
| <select name=""></select>, <option value=""><option/> (0) | 2021.12.24 |
