반응형
⚫style 태그 : HTML 문서에 CSS 스타일을 적용하기 위한 태그
⚫HTML5에서는 표를 구조적으로 표현하기 위해 thead 태그, tbody 태그, tfoot 태그 사용(table 태그와 함께 사용)
🔘caption 태그 : 표에 대한 제목을 출력하기 위한 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
<!-- style 태그 -->
<style>
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>tbody 태그</h1>
<hr>
<!-- summary 속성 : 표에 대한 설명을 속성값으로 설정 -->
<table summary="객실 안내">
<!-- caption 태그 -->
<caption>객실표</caption>
<thead>
<tr>
<th>건물명</th><th>방이름</th><th>크기</th><th>가격</th>
</tr>
</thead>
<tbody>
<tr>
<!-- rowspan 속성 : 행 단위로 병합 처리할 셀의 갯수를 속성값으로 설정 -->
<td rowspan="3">요안도라</td><td>유채방</td><td>4인실</td><td rowspan="2">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>
<tr>
<td colspan="4">바깥채 전체를 독채로 대여합니다.</td>
</tr>
</tfoot>
-->
</table>
</body>
</html>
실행결과⬇️
반응형
'Frontend > HTML' 카테고리의 다른 글
| [HTML]08_anchor 태그 (0) | 2023.12.25 |
|---|---|
| [HTML]07_a 태그 (0) | 2023.12.25 |
| [HTML]05_table 태그 (0) | 2023.12.25 |
| [HTML]04_dl 태그 (0) | 2023.12.24 |
| [HTML]03_ul태그 & ol 태그 & li 태그 (0) | 2023.12.24 |
