table 태그 : 표(Table)를 출력하기 위한 태그
- 하위태그 : tr
- border 속성 : 0(외곽선 미출력 -기본) 또는 1(외곽선 출력)를 속성값으로 설정
상위태그에 적용된 디자인 속성은 하위태그로 상속되어 적용 - summary 속성 : 표에 대한 설명을 속성값으로 설정
tr 태그 : 행(Row)를 출력하기 위한 태그
- 하위태그 : th 또는 td
- 모든 tr 태그의 셀의 갯수는 동일하도록 설정하는 것을 권장한다.
th, td 태그 : 열(Column)을 출력하기 위한 태그
- th 태그 또는 td 태그의 태그내용을 이용하여 값 출력 ---> 셀(Cell)
- th 태그는 태그내용을 가운데 정렬하여 굵게 출력 ---> 컬럼명 출력(열의 제목)
- td 태그는 내용이 들어가는 셀을 출력
- 셀의 폭은 태그내용에 의해 자동 변경된다.
- rowspan 속성 : 병합할 행의 갯수를 속성값으로 설정 (가로로 셀을 합칠 때)
- colspan 속성 : 병합할 열의 갯수를 속성값으로 설정 (세로로 셀을 합칠 때)
* HTML5에서는 표를 구조적으로 표현하기 위해 thead 태그, tbody 태그, tfoot 태그를 사용한다.
- thead 태그 : 표의 가장 위
- tbody 태그 : 표의 중간
- tfoot 태그 : 표의 마지막
caption 태그 : 표 제목을 출력하기 위한 태그
예제
위의 태그를 활용하여 만든 간단한 예제. 직관적인 화면 출력으로 결과를 명확히 보기 위해 CSS로 스타일을 만들었다.
<!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>
<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">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>
'Web > HTML' 카테고리의 다른 글
| 이미지 링크 / map, area (0) | 2023.06.07 |
|---|---|
| a 태그 / href, id, anchor, target (0) | 2023.06.07 |
| 정의 작성 / dl, dt, dd (0) | 2023.06.06 |
| 목록 작성 / ul, ol, li (0) | 2023.06.06 |
| 이미지 출력 / img, 경로(절대경로, 상대경로) (0) | 2023.06.06 |
