<!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>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<form>
<h3> 차 종류 표 </h3>
<hr>
<table border="1">
<thead>
<tr>
<th colspan="6">한국의 차</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="6">뿌리차</th>
<td>인삼차</td>
<th rowspan="10">과일차</th>
<td>수정과</td>
<th rowspan="5">잎차</th>
<td>과일차</td>
</tr>
<tr>
<td>당귀차</td>
<td>유자차</td>
<td>감잎차</td>
</tr>
<tr>
<td>생강차</td>
<td>구기자차</td>
<td>솔잎차</td>
</tr>
<tr>
<td>칡차</td>
<td>대추차</td>
<td>국화차</td>
</tr>
<tr>
<td>둥글레차</td>
<td>오미자차</td>
<td>이슬차</td>
</tr>
<tr>
<td>마차</td>
<td>매실차</td>
<th rowspan="4">기타</th>
<td>두충차</td>
</tr>
<tr>
<th rowspan="3">곡물차</th>
<td>보리차</td>
<td>모과차</td>
<td>영지버섯차</td>
</tr>
<tr>
<td>옥수수차</td>
<td>산수유차</td>
<td>귤장차</td>
</tr>
<tr>
<td>현미차</td>
<td>탱자차</td>
<td>쌍화차</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
금일 수업의 핵심
Table로 원하는 표 구조 만들기
rowspan colspan 적절히 활용 할 수 있는지
댓글