FrontEnd/Html
6.Table Tag
jmaster
2021. 12. 20. 10:47
Table tag (테이블 태그)
- HTML5에서는 표를 구조적으로 표현하기 위해 thead, tbody, tfoot 태그 추가
- style 태그 : 박스모델에 디자인을 제공하기 위한 태그
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
width: 100px;
padding: 20px;
text-align: center;
}
caption {
font-size: 24px;
line-height: 40px;
letter-spacing: 15px;
}
</style>
- summary 속성 : 표에 대한 설명을 속성값으로 설정
<table summary="객실 안내">
- caption 태그 : 표 제목 출력
<caption>객실표</caption>
- thead 태그 : 표 머릿부를 표현하기 위한 태그
<thead>
<tr>
<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
</tr>
</thead>
- tbody 태그 : 표 몸체부를 표현하기 위한 태그
<tbody>
<tr>
<!-- rowspan 속성 : 병합하고자 하는 행의 갯수를 속성값으로 설정 -->
<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">1인 20,000원</td>
</tr>
<tr>
<td>동백방</td><td>2인실</td>
</tr>
<tr>
<!-- colspan 속성 : 병합하고자 하는 열의 갯수를 속성값으로 설정 -->
<td>천혜향</td><td colspan="2">가족실 60,000원(최대 4인)</td>
</tr>
</tbody>
- tfoot 태그 : 표의 꼬릿부를 표현하기 위한 태그
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
</tr>
</tfoot>
- 전체 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
width: 100px;
padding: 20px;
text-align: center;
}
caption {
font-size: 24px;
line-height: 40px;
letter-spacing: 15px;
}
</style>
</head>
<body>
<h1>table 태그</h1>
<hr>
<table summary="객실 안내">
<caption>객실표</caption>
<thead>
<tr>
<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">1인 20,000원</td>
</tr>
<tr>
<td>동백방</td><td>2인실</td>
</tr>
<tr>
<td>천혜향</td><td colspan="2">가족실 60,000원(최대 4인)</td>
</tr>
</tbody>
</table>
</body>
</html>- 출력
