웹문서에서 자료를 정리할 때 자주 사용하는 요소가 <table>입니다. 표는 행(row)과 열(column)로 이루어져 있고 행과 열이 만나 이루는 영역을 셀(cell)이라고 부릅니다. 표를 만들려면 행과 열두 가지를 고려해야 하므로 하나의 표를 만들기 위해서는 여러 개의 태그가 사용됩니다.
<table>, <tr>, <td>, <th> 태그
기본적인 표의 모습은 가로 행과 세로 열이 있고 그 안에 내용이 입력되는 형태입니다.
순서를 기억해두면 표 만들기가 쉬울 것입니다.
우선, 구조적으로 HTML 테이블은 <table> 태그로 시작하며 가장 먼저 입력합니다
두 번째, 각 테이블 행은 <tr></tr> 태그로 정의합니다.
세 번째, 각 테이블 셀은 <td></td> 태그로 정의합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<table border="1" width=100 height=200>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
|
cs |
<출력 결과>
<td> 요소에는 텍스트, 이미지, 목록, 기타 테이블 등 모든 종류의 HTML요소가 포함될 수 있습니다.
<th> 태그로 표에 제목 셀 만들기
첫 번째 행이나 열에 셀의 제목을 넣는 경우가 많습니다.
제목의 경우 보통 다른 글자보다 굵게 표시하고 셀의 중앙에 배치하는데 <td> 태그 대신 <th> 태그를 사용하면 셀의 제목을 쉽게 만들 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" style="width: 300px; height: 200px;">
<br>
<tr>
<th>1행</th>
<td>1행 1열</td>
</tr>
<tr>
<th rowspan="2">2행</th>
<td>2행 2열</td>
</tr>
<tr>
<td>3행 2열</td>
</tr>
</table>
</body>
</html>
|
cs |
<출력 결과>
<th> 태그를 사용한 1행과 2행의 글자가 굵게, 가운데 정렬된 것을 확인할 수 있습니다.
colspan, rowspan 속성 - 행 또는 열 합치기
기본적인 표 만들기 형태를 넘어 열이나 행을 합치려면 어떻게 해야 할까요?
여러 열로 확장되는 셀을 구성하기 위해서는 colspan속성을, 여러 행으로 확장되는 셀을 구성하기 위해서는 rowspan속성을 사용하면 됩니다.
해당 기능은 <td>나 <th> 태그 안에서 이뤄집니다.
기본적인 문법은 아래와 같습니다.
|
1
2
3
4
5
6
7
8
|
colspan
<th colspan="합칠 셀의 갯수"> 내용 </td>
<td colspan="합칠 셀의 갯수"> 내용 </td>
---
rowspan
<th rowspan="합칠 셀의 갯수"> 내용 </td>
<td rowspan="합칠 셀의 갯수"> 내용 </td>
|
cs |
여러 열을 하나로 합치려면 <td> 태그나 <th> 태그 안에서 colspan속성을 사용합니다.
왼쪽에서 오른쪽으로 셀을 확장하는 경우 colspan을 사용하면 됩니다.
여러 행을 하나로 합치려면 <td> 태그나 <th> 태그 안에서 rowspan속성을 사용합니다.
위에서 아래로 row를 확장하는 경우는 rowspan을 사용하면 됩니다.
다음은 속성을 사용하여 행과 열을 합친 예제입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table border="1" style="width: 300px; height: 200px;">
<tr>
<td>가</td>
<td>나</td>
<td>다</td>
<td rowspan="4">라</td>
</tr>
<tr>
<td>마</td>
<td colspan="2" rowspan="3">바</td>
</tr>
<tr>
<td>사</td>
</tr>
<tr>
<td>아</td>
</tr>
<tr>
<td colspan="2">자</td>
<td colspan="2">차</td>
</tr>
<tr>
<td colspan="4">카</td>
</tr>
</table>
</body>
</html>
|
cs |
<출력 결과>
<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기
일부 표에서는 제목이 표시된 셀과 표 아래쪽에 합계, 요약내용이 담긴 셀이 존재하기도 합니다.
이런 표의 경우 제목이 있는 부분과 실제 내용이 있는 본문, 요약 부분이 있는 부분으로 구조를 나누는 것이 좋습니다.
이럴 때 사용하는 <thead> 태그는 HTML 테이블에서 헤더 내용을 그룹화하는 데 사용됩니다.
<thead> 요소는 <tbody>및 <tfoot> 요소와 함께 사용되어 테이블의 각 부분 (머리글, 본문, 바닥 글)을 지정합니다.
브라우저는 이 요소를 사용하여 머리글 및 바닥 글과 독립적으로 테이블 본문을 스크롤할 수 있습니다.
또한 여러 페이지에 걸쳐있는 큰 테이블을 인쇄할 때 이러한 요소를 사용하면 각 페이지의 맨 위와 맨 아래에 테이블 머리글과 바닥 글을 인쇄 할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>표 만들기</title>
<style>
table, th, td {
border:1px solid #ccc;
}
th, td {
width:80px; /* 셀의 너비 */
padding:10px; /* 셀 테두리와 내용 사이의 간격(패딩) */
}
thead, tfoot {
background : #eeeeee; /* thead와 tfoot의 배경 색 */
}
</style>
</head>
<body>
<table>
<caption>제주특별자치도 학교현황(2015.4.1 기준)</caption>
<thead>
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr>
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5,547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1,720</td>
<td>37,686</td>
<td>2,632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21,274</td>
<td>1,412</td>
</tr>
<tr>
<th>고등학교</th>
<td>29</td>
<td>676</td>
<td>22,019</td>
<td>1,433</td>
</tr>
<tr>
<th>특수학교</th>
<td>3</td>
<td>90</td>
<td>428</td>
<td>160</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>300</td>
<td>3,437</td>
<td>86,954</td>
<td>6,111</td>
</tr>
</tfoot>
</table>
</body>
</html>
|
cs |
<출력 결과>
예제의 결과를 표의 구조로 나누어 보았습니다.
CSS를 사용해 표의 제목과 요약, 본문에 각각 스타일을 적용할 수 있습니다.
또한 자바스크립트를 이용해 <thead> 부분과 <tfoot>은 표의 아래에 고정하고 <tbody> 부분만 스크롤되도록 만들 수도 있습니다.
'HTML' 카테고리의 다른 글
| 링크 태그 다루기 / <a href> (0) | 2020.04.12 |
|---|---|
| 폼 태그 다루기 / <Form> (0) | 2020.03.22 |
| 이미지 태그 다루기 / <img> (0) | 2020.03.22 |
| 목록 태그 다루기 (0) | 2020.03.22 |
| HTML 색 (0) | 2020.03.22 |
