이번 시간에는 HTML에서 표를 마크업해보자. 우리가 작성하려는 표는 다음과 같다.
표를 작성하기에 앞서 태그들을 먼저 알아보자. 표를 작성하려면 가장 먼저 <table> 태그를 작성해야 한다. 그 아래에 <tr> 태그를 통해 한 줄 씩 채워나가는 방식이다. <tr>태그 안에는 <th>와 <td>로 내용을 채운다. 위를 마크업 하면 다음과 같다.
<h1>윤해리 시간표</h1>
<table>
<thead>
<tr>
<th></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>
<th scope="row">1교시</th>
<td rowspan="2">초등 국어</td>
<td rowspan="2">초등 수학</td>
<td>바른 생활</td>
<td rowspan="2">초등 국어</td>
<td rowspan="2">초등 수학</td>
</tr>
<tr>
<th scope="row">2교시</th>
<!-- <td>초등 국어</td> -->
<!-- <td>초등 수학</td> -->
<td>과학</td>
<!-- <td>초등 국어</td> -->
<!-- <td>초등 수학</td> -->
</tr>
<tr>
<th scope="row">3교시</th>
<td>음악</td>
<td>체육</td>
<td>컴퓨터</td>
<td>음악</td>
<td>체육</td>
</tr>
<tr>
<th scope="row">4교시</th>
<td>초등 수학</td>
<td>초등 국어</td>
<td>안전 생활</td>
<td>초등 수학</td>
<td>초등 국어</td>
</tr>
<tr>
<th scope="row">점심시간</th>
<td colspan = "5"></td>
<tr>
<th scope="row">5교시</th>
<td>초등 수학</td>
<td>초등 국어</td>
<td>초등 국어</td>
<td>초등 수학</td>
<td>초등 국어</td>
</tr>
</tbody>
</table>
매우 길지만 차근차근 알아보자. table 태그의 직계자손으로 thead와 tbody를 선언해주었는데 이는 컴퓨터에게 어디가 본문이고 제목인지를 강조하는 역할이다.
thead부분에서 tr을 추가하여 한 행을 시작하겠다고 컴퓨터에게 알려주고 th를 통해 데이터를 채워 넣었다. th는 대표느낌이다. thead부분은 전부 대표적인 느낌이므로 th로만 채워주었다. scope속성은 th에만 쓰이며 단순히 범주를 명확하게 해주는 역할이다. col과 row를 표시하여 어디의 범주인지를 알려주었다.
두번째 행부터는 tbody 속에 추가하였다. 참고로 열의 갯수가 6개이므로 각각의 tr을 데이터를 6개를 가져야한다. 그러나 두번째 tr을 보면 참조표시로 td를 삭제하였다. 그 이유는 첫번째 tr에서 초등 국어와 초등 수학 부분이 행을 두개나 차지하기 때문이다. 행이 합쳐지는 것은 rowspan 속성을 통해 설정가능하다. 점심시간의 경우 모든 열을 통합해야하므로 colspan속성값을 5를 입력하였다.
위 코드를 웹에서 보면 위와 같다. 스타일을 따로 지정하지 않아서 구분선은 없으나 목표로 했던 마크업은 이루어 냈음을 알 수 있다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'Language > HTML' 카테고리의 다른 글
| <HTML 기초> 11. 기타 태그 (0) | 2020.11.10 |
|---|---|
| <HTML 기초> 10. 미디어 삽입 (0) | 2020.11.05 |
| <HTML 기초> 08. 텍스트창 · 버튼 (0) | 2020.10.29 |
| <HTML 기초> 07. 라디오 · 체크 박스 (0) | 2020.10.27 |
| <HTML 기초> 06. 인풋 · 레이블 (0) | 2020.10.22 |
