HTML 테이블 (Table)
테이블(Table)이란 표를 의미하며, <table>태그는 표를 만들어주는 태그이다.
<table> 구성 태그
<tr>태그는 테이블에서 열을 구분한다.<th>태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.<td>태그는 테이블의 열을 각각의 셀(cell)로 나누어 준다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
<tr>
<th>참치</th>
<th>고래</th>
</tr>
<tr>
<td>상어</td>
<td>문어</td>
</tr>
<tr>
<td>오징어</td>
<td>고등어</td>
</tr>
</table>
▶ 실행결과
| 참치 | 고래 |
|---|---|
| 상어 | 문어 |
| 오징어 | 고등어 |
CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있다.
border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 된다.
<table>태그와 <th>태그, <td>태그가 모두 자신만의 테두리를 가지고 있기 때문에 모든 태그에 border 속성을 주게 되면 테두리가 2줄로 나타나게 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="border: 2px solid red; border-collapse: unset">
<tr style="background:#424380; color: #fff;">
<th style="border: 2px solid blue">참치</th>
<th style="border: 2px solid blue">고래</th>
</tr>
<tr>
<td style="border: 2px solid blue">상어</td>
<td style="border: 2px solid blue">문어</td>
</tr>
<tr>
<td style="border: 2px solid blue">오징어</td>
<td style="border: 2px solid blue">고등어</td>
</tr>
</table>
▶ 실행결과
| 참치 | 고래 |
|---|---|
| 상어 | 문어 |
| 오징어 | 고등어 |
이때 border-collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table style="border: 2px solid red; border-collapse: collapse">
<tr style="background:#424380; color: #fff;">
<th style="border: 2px solid blue">참치</th>
<th style="border: 2px solid blue">고래</th>
</tr>
<tr>
<td style="border: 2px solid blue">상어</td>
<td style="border: 2px solid blue">문어</td>
</tr>
<tr>
<td style="border: 2px solid blue">오징어</td>
<td style="border: 2px solid blue">고등어</td>
</tr>
</table>
▶ 실행결과
| 참치 | 고래 |
|---|---|
| 상어 | 문어 |
| 오징어 | 고등어 |
테이블의 열 합치기
colspan 속성을 사용하면 테이블의 열(column)을 합칠 수 있다.
1 2 3 4 5 6 7 8 9 10 11
<table> <tr> <td>참치</td> <td colspan="2">고래</td> </tr> <tr> <td>상어</td> <td>문어</td> <td>꽁치</td> </tr> </table>
▶ 실행결과
참치 고래 상어 문어 꽁치 테이블의 행 합치기
rowspan 속성을 사용하면 테이블의 행(row)을 합칠 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<table> <tr> <td>참치</td> <td>고래</td> <td>날치</td> </tr> <tr> <td rowspan="2">상어</td> <td>문어</td> <td>꽁치</td> </tr> <tr> <td>고등어</td> <td>돌고래</td> </tr> </table>
▶ 실행결과
참치 고래 날치 상어 문어 꽁치 고등어 돌고래 테이블의 열과 행 합치기
colspan 속성과 rowspan 속성을 함께 사용하면, 더욱 복잡한 테이블도 표현할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<table> <tr> <td colspan="6">1</td> </tr> <tr> <td colspan="6">2</td> </tr> <tr> <td rowspan="3">3</td> <td rowspan="3">4</td> <td colspan="2">5</td> <td>6</td> <td>7</td> </tr> <tr> <td colspan="3">8</td> <td>9</td> </tr> <tr> <td colspan="4">10</td> </tr> </table>
▶ 실행결과
1 2 3 4 5 6 7 8 9 10 테이블의 캡션(caption) 설정
<caption>태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.1 2 3 4 5 6 7 8 9 10 11 12 13
<table> <caption>해양 생물</caption> <tr> <td>참치</td> <td>고래</td> <td>날치</td> </tr> <tr> <td>상어</td> <td>문어</td> <td>꽁치</td> </tr> </table>
▶ 실행결과
해양 생물 참치 고래 날치 상어 문어 꽁치