- 테이블 요소 태그는 HTML에서 테이블 UI를 구현하는데 필요한 태그들이다.
- 테이블 요소 태그 목록
| 태그명 |
뜻 |
| table |
테이블 UI임을 나타내는 시작 요소 및 컨테이너 역할, 모든 테이블 태그들은 table 태그 안에 위치한다. |
| thead |
테이블의 머리글(주로 컬럼명) 요소들을 감싼다. |
| tbody |
테이블의 본문 요소들을 감싼다. |
| tr |
테이블의 한 행을 감싼다. |
| th |
테이블의 머리글(주로 컬럼명) 요소 |
| td |
테이블의 본문 요소 |
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
| 태그명 |
위 사진에서의 위치 |
| table |
테이블 표 전체 |
| thead |
테이블 머리글(컬럼명)에 해당하는 요소들을 감싸는 영역 (주황색으로 색칠된 부분) |
| tbody |
테이블 머리글 아래에 위치한 본문 요소들을 감싸는 영역 (노랑, 흰, 연두색 영역) |
| tr |
테이블의 한 행을 감싸는 역할 (가로 한줄들) |
| th |
테이블의 머리글(컬럼명) 요소 (월요일, 화요일, 수요일, 목요일, 금요일) |
| td |
테이블 본문 요소(교시와 과목명들) |
- 위 시간표를 HTML 코드로 간단하게 구현해보자.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
th {
width: 150px;
}
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>월요일</th>
<th>화요일</th>
<th>수요일</th>
<th>목요일</th>
</tr>
</thead>
<tbody>
<tr>
<td>1교시</td>
<td>국어</td>
<td>창체</td>
<td>미술</td>
<td>수학</td>
</tr>
<tr>
<td>2교시</td>
<td>국어</td>
<td>역사</td>
<td>수학</td>
<td>수학</td>
</tr>
<tr>
<td>3교시</td>
<td>과학</td>
<td>음악</td>
<td>국어</td>
<td>자율</td>
</tr>
</tbody>
</table>
</body>
</html>
셀 병합
- 위의 테이블에서 다음과 같이 셀을 병합하려고 한다.
- 월요일, 화요일을 월/화, 수요일, 목요일을 수/목으로 이름을 바꾸어 두개 칸으로 사용하고 싶다.
- 학급 반 별로 요일 교시별 수업을 한눈에 보고싶다.
- 만약 테이블에서 셀을 원하는 수만큼 병합하려면
colspan, rowspan 속성을 사용하여 병합할 수 있다.
- 가로로 병합하려면
colspan, 세로로 병합하려면 rowspan을 사용한다.
- 가로로 2칸을 병합:
<td colspan=”2”>
- 세로로 3칸을 병합:
<td rowspan=”3”>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
}
th {
width: 150px;
}
th,
td {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>학급 (반)</th>
<th>교시</th>
<th colspan="2">월/화</th>
<th colspan="2">수/목</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">1반</td>
<td>1교시</td>
<td>국어</td>
<td>창체</td>
<td>미술</td>
<td>수학</td>
</tr>
<tr>
<td>2교시</td>
<td>국어</td>
<td>역사</td>
<td>수학</td>
<td>수학</td>
</tr>
<tr>
<td>3교시</td>
<td>과학</td>
<td>음악</td>
<td>국어</td>
<td>자율</td>
</tr>
<tr>
<td rowspan="3">2반</td>
<td>1교시</td>
<td>사회</td>
<td>체육</td>
<td>지리</td>
<td>국어</td>
</tr>
<tr>
<td>2교시</td>
<td>자율</td>
<td>국어</td>
<td>영어</td>
<td>일본어</td>
</tr>
<tr>
<td>3교시</td>
<td>미술</td>
<td>국어</td>
<td>수학</td>
<td>창체</td>
</tr>
</tbody>
</table>
</body>
</html>