html & css/개념
표 태그
by Doo Hee
2023. 6. 19.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
/* th {
border: 1px solid black;
}
td {
border: 1px solid black;
} */
table {
width: 100%;
}
</style>
</head>
<body>
<!-- 표: table -->
<!-- 행: tr(table row) -->
<!-- 셀: td(데이터), th(열제목) -->
<!-- 어디까지가 head이고, 어디까지가 body인지를 코드로 알려줘야한다. -->
<!-- thead - 제목이 들어가는 모든 tr태그들 -->
<!-- tbody - 데이터가 들어가는 모든 tr태그들 -->
<table>
<thead>
<tr>
<th>이름</th>
<th>연락처</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
<tr>
<td>유재석</td>
<td>010-0000-0000</td>
<td>ruy@naver.com</td>
</tr>
<tr>
<td>김종국</td>
<td>010-0000-0001</td>
<td>kjk@naver.com</td>
</tr>
<tr>
<td>송지효</td>
<td>010-0000-0003</td>
<td>sjh@naver.com</td>
</tr>
</tbody>
</table>
<br />
<table>
<thead>
<tr>
<th>학년</th>
<th>반</th>
<th>학생수</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1학년</td>
<td>1반</td>
<td>10명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>2반</td>
<td>10명</td>
</tr>
<tr>
<!-- <td>1학년</td> -->
<td>3반</td>
<td>10명</td>
</tr>
</tbody>
<!-- 합계 부분을 따로 만들어야 한다. -->
<tfoot>
<tr>
<td colspan="2">합계</td>
<!-- <td></td> -->
<td>30명</td>
</tr>
</tfoot>
</table>
</body>
</html>
