교재 96쪽과 97쪽의 표를 만드는 과제입니다. 쉬운 97쪽 부터 만드시고 96쪽은 그 다음에 만드시는 것을 추천드립니다.table 을 만들 때 가장 유념하셔야 하는 "병합"의 성질이 HTML에서는 어떻게 적용되는지를 생각하시면 제일 좋은데요. 96쪽의 예시를 할 때 조금 더 쉽게 설명드리겠습니다.
table 태그를 선언한뒤 탭 그리고 엔터키로 공간을 펼쳐주세요. 그다음 h1 태그로 큼직하게 table 태그 안에 넣어줍니다. table의 제목에 해당하는 caption 태그로 표의 제목을 입력합니다. 가운데 정렬되어 있는 모습을 볼 수 있습니다.
만약 테이블에 테두리 스타일이 적용되지 않았다면 head 태그 안에 link 로 style.css 를 꼭 넣어주셔야 합니다.
<table>
<h1>상품 구성</h1>
<caption>
선물용과 가정용 상품 구성
</caption>
</table>body 태그 안에서 헤더 메인 푸터 영역을 나누듯 나눠서 작업한다는 것이 아주 큰 특이점입니다. table head, table body, table foot 의 줄임말입니다.
<table>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>각 영역별 작업을 할 때는 한줄 한줄씩 작업 한다는 것을 꼭 유념해주시길 바랍니다. 이때 tr 태그를 사용합니다. 그리고 table headline 을 뜻하는 th, 그리고 table description 의 td 를 사용해서 작성합니다. td와 th 의 차이점은 네 아시다시피 굵기 차이입니다.
<thead>
//tr을 사용하지 않은 아주 못된 예
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
//tr을 사용한 옳은 예
<tr>
<th>용도</th>
<th>중량</th>
<th>개수</th>
<th>가격</th>
</tr>
</thead>이런식으로 tr을 사용하지 않으면 아랫줄에서 한 줄에 총 몇칸이 있는지 인지하지 못합니다. 꼭 정규식을 지켜서 tr 안에 td 또는 th를 사용해주세요.
2번째부터 5번째 줄까지는 tbody 안에 작성해주고 97페이지 표에는 tfoot이 없습니다.
<tbody>
<tr>
<td>선물용</td>
<td>3kg</td>
<td>11-16과</td>
<td>35,000원</td>
</tr>
<tr>
<td>선물용</td>
<td>5kg</td>
<td>18-26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11-16</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18-26</td>
<td>37,000원</td>
</tr>
</tbody>페이지 97의 전체 코드입니다.
--table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테이블</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<table>
<h1>상품 구성</h1>
<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>5kg</td>
<td>18-26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11-16</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18-26</td>
<td>37,000원</td>
</tr>
</tbody>
</table>
</body>
</html>96페이지가 어려운 이유는 이곳저곳에서 엑셀 등에서 자주 본 표의 "병합" 기능 때문입니다. HTML 에서의 병합은 사실상 합치기 개념보다는 "늘림"에 가깝습니다. 늘어난 태그가 늘어난 부분의 태그를 오른쪽으로 밀어버립니다. 그래서 항상 윗줄의 왼쪽이 우선순위를 가져간다고 보시면 됩니다.
예시를 보고 가시죠. 아래의 사진처럼 1번은 5번자리까지 늘리게 되면 5번이 사라지는게 아니라 오른쪽으로 넘어다고 생각해주시면 됩니다. 그리고 익숙해질때까지 병합전의 모습을 먼저 만든 뒤에 작업해나가시면 이해가 빠릅니다.
96쪽의 표에서 동일한 내용이 들어가 병합되어 있는 부분을 병합전의 모습처럼 하나씩 다 써줍니다. 동백방은 방이름이 1개 이지만 동일한 방의 대상이 2가지가 있기 때문에 병합된 모습입니다. 이것을 2줄로 나눠줘야 하기 때문에 thead 1줄, tbody 4줄, tfoot 1줄로 총 6줄 짜리의 표입니다.
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td>4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>동백방</td>
<td>동성 도미토리</td>
<td>4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>동백방</td>
<td>가족 1팀</td>
<td>4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
<td>1인 20,000원</td>
</tr>
</tbody>유채방, 동백방의 크기가 모두 동일합니다. 세로로 3칸을 늘려주면 됩니다. 이때 사용되는 개념이 td 또는 th 태그의 colspan, rowspan 속성입니다. 개념이 뭔지 헷갈릴 땐 하나씩 써보시면 됩니다.
제일 위의 유채방의 4인실을 만져줍니다. rowspan에 3을 넣어주면 어떻게 변하는지 보시죠.
2,3번째의 크기에 해당하는 td가 오른쪽으로 밀려난 것을 볼 수 있습니다.
이제 2번째의 크기, 3번째의 크기에 해당하는 태그는 지워줘도 됩니다.
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>동백방</td>
<td>동성 도미토리</td>
--> 삭제 <td>4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>동백방</td>
<td>가족 1팀</td>
--> 삭제 <td>4인실</td>
<td>1인 20,000원</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
<td>1인 20,000원</td>
</tr>
</tbody>
2, 3번째 쭐의 동백방 2개를 하나로 만들어보겠습니다. 항상 윗쪽, 왼쪽이 우선순위입니다. 이젠 2번째 줄의 동백방에 rowspan값으로 2를 넣어줍니다. 아래의 동백방이 오른쪽으로 밀려났습니다. 얘도 이젠 지워줘도 됩니다.
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
<td>1인 20,000원</td>
</tr>
<tr>
--> 삭제 <td>동백방</td>
<td>가족 1팀</td>
<td>1인 20,000원</td>
</tr>
1인 20,000원으로 모든 줄이 동일한 가격입니다. 그러면 가장 윗줄인 유채방의 가격을 rowspan="4" 로 설정해줍니다. 아래의 오른쪽으로 넘어간 가격들은 다 지워줍니다.
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
--> 삭제 <td>1인 20,000원</td>
</tr>
<tr>
<td>가족 1팀</td>
--> 삭제 <td>1인 20,000원</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
--> 삭제 <td>1인 20,000원</td>
</tr>
</tbody>
이제 마지막은 tfoot 영역입니다. 항상 펼쳐서 작업후 tr태그로 시작하는것 잊지 않기!
<tfoot>
<tr>
<td>바깥채 전체를 렌트합니다</td>
</tr>
</tfoot>
하나만 넣었더니 이런 모습입니다.
바닥 부분을 한 줄로 주욱 늘려주시려면 colspan 속성을 사용합니다. 값으로 1, 2, 3, 4를 넣어보시며 어떤 변화가 있는지 직접 확인해보시는게 가장 바람직합니다.
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 렌트합니다</td>
</tr>
</tfoot>
이렇게 테이블을 완성하시면 되는데, 제가 놓친 사소한 디테일이 보이시나요??
tfoot안의 태그는 td => th로 고쳐서 꼭 굵게 표현 해주시면 되겠습니다.
<tfoot>
<tr>
<th colspan="4">바깥채 전체를 렌트합니다</td>
</tr>
</tfoot>이런저런 테이블을 만들어보며 익숙해지시면 편합니다.
--table.html 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테이블</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main>
<table>
<h1>상품 구성</h1>
<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>5kg</td>
<td>18-26과</td>
<td>52,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>3kg</td>
<td>11-16</td>
<td>30,000원</td>
</tr>
<tr>
<td>가정용</td>
<td>5kg</td>
<td>18-26</td>
<td>37,000원</td>
</tr>
</tbody>
</table>
<div style="margin-top: 100px; border: 2px solid tomato">
<table>
<caption>
요안도라 객시
</caption>
<thead>
<tr>
<th>방 이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
</tr>
<tr>
<td>가족 1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 렌트합니다</td>
</tr>
</tfoot>
</table>
</div>
</main>
</body>
</html>
