<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
width: 100%;
}
</style>
</head>
<body>
<!-- <table>
<thead>
<tr>
<th>์ด๋ฆ</th>
<th>์ฐ๋ฝ์ฒ</th>
<th>์ด๋ฉ์ผ</th>
</tr>
</thead>
<tbody>
<tr>
<td>์ ์ฌ์</td>
<td>010-0000-0000</td>
<td>ryu@email.com</td>
</tr>
<tr>
<td>๊น์ข
๊ตญ</td>
<td>010-0000-0000</td>
<td>kim@email.com</td>
</tr>
<tr>
<td>์ก์งํจ</td>
<td>010-0000-0000</td>
<td>song@email.com</td>
</tr>
</tbody>
</table> -->
<table>
<thead>
<tr>
<th>ํ๋
</th>
<th>๋ฐ</th>
<th>ํ์์</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1ํ๋
</td>
<td>1๋ฐ</td>
<td>18๋ช
</td>
</tr>
<tr>
<!-- <td>1ํ๋
</td> -->
<td>2๋ฐ</td>
<td>19๋ช
</td>
</tr>
<tr>
<!-- <td>1ํ๋
</td> -->
<td>3๋ฐ</td>
<td>18๋ช
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">ํฉ๊ณ</td>
<!-- <td></td> -->
<td>55๋ช
</td>
</tr>
</tfoot>
</table>
<script></script>
</body>
</html>- table ํ๊ทธ; ํ
- ํ์ ํ๊ทธ ์กด์ฌ
- thead; ์ด ๋ง๋ค ์ ๋ชฉ
- tr ๋ด๋ถ์ td ๋์ ์ th ํ๊ทธ ์ฌ์ฉ! (๋ช ํํ, bold์ฒด)
- tbody; ์ค์ data ๋ค์ด๊ฐ๋ ๊ณณ
- tr ํ๊ทธ; ํ๋์ ํ์ ๋ง๋ค์ด์ค
- td ํ๊ทธ; ๊ฐ๊ฐ์ ์
- tr ํ๊ทธ; ํ๋์ ํ์ ๋ง๋ค์ด์ค
- tfoot; ํ ์ ์ฒด ์ง๊ณ
- tr ํ๊ทธ ์์ td ํ๊ทธ ์ด์ฉ
- head ํ๊ทธ ์์ style ํ๊ทธ ์ด์ฉํ์ฌ ๋์์ธ ์ ํ๊ธฐ (inline/internal CSS)
- border-collapse ๋์์ธ ์์ฑ; ๋ชจ๋ border ์ฃผ๋ฉด ๊ฒน๊ฒนํ ์์
- collapse๋ก ๊ฐ ์ค์ ํ๋ฉด ๋ชจ๋ ํ ๋ผ์ธ์ผ๋ก ๋ถ๊ฒ ๋จ
- ์
๋ณํฉ
- ์ ๋ณํฉํ๊ณ ์ ํ๋ ์ฒซ๋ฒ์งธ ์ ์ row/colspan ์์ฑ ์ฌ์ฉ
- ๋ณํฉ๋๋ ๋๋จธ์ง ์ ๋ค์ ์ญ์