HTML 표만들기 <table>
1. 표를 만드는데 사용되는 태그
- <table> : 표 전체를 담는 컨테이너
- <caption> : 표 제목
- <thead> : 헤딩 셀 그룹
- <tfoot> : 바닥 셀 그룹
- <tbody> : 데이터 셀 그룹
- <tr> : 행, 여러 <td>,<th> 포함
- <th> : 열 제목(헤딩) 셀
- <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
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 테이블 기본구조</title>
</head>
<body>
<h3>테이블 만들기</h3>
<table border="1" bordercolor="#FF6C6C">
<caption>1학기 성적</caption><!--잘 사용하지 않음-->
<tr><!--tr : 하나의 행-->
<th width="100">이름</th>
<th width="50">HTML</th>
<th width="50">CSS</th>
</tr>
<tr align="center"><!--td : 하나의 열-->
<td>홍길동</td>
<td>100</td>
<td>75</td>
</tr>
<tr align="center">
<td>홍길자</td>
<td>90</td>
<td>90</td>
</tr>
<!--정적페이지 : HTML(only)
동적페이지 : JSP, ASP, PHP ;DB연동-->
</table><hr>
<table border="1">
<caption>1학기 성적</caption>
<thead>
<tr>
<th width="100">이름</th>
<th width="50">HTML</th>
<th width="50">CSS</th>
</tr>
</thead>
<tfoot><!--사이에 껴 있지만 어디쓰든 제일 밑에 표시됨-->
<tr>
<th>합</th><th>190</th><th>165</th>
</tr>
</tfoot>
<tr align="center"><!--td : 하나의 열-->
<td>홍길동</td>
<td>100</td>
<td>75</td>
</tr>
<tr align="center">
<td>홍길자</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
2. 표의 특징
표는 여러 행으로 구성된다.
*행, <tr>..</tr>
한 행은 여러 셀로 구성된다.
*제목(헤딩) 셀, <th>
*데이터 셀, <td>
<thead>, <tbody>, <tfoot>은 여러 <tr> 포함이 가능하다.
3. 표 합치기
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>테이블 합치기</h3>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table><hr>
<table border="1">
<tr>
<td colspan="2" align="center">1행 1~2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table><hr>
<table border="1">
<tr>
<th width="100">이름</th><th width="50"></th><th width="50">연락처</th><th width="50"></th>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개서</th>
<td colspan="3"></td>
</tr>
</table><hr>
<table border="1">
<tr>
<td rowspan="2">1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<!--<td>2행 1열</td>-->
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
- colspan : 열, 가로를 합칠 때 사용한다.
- rowspan : 행, 세로를 합칠 때 사용한다.
'화면구현' 카테고리의 다른 글
| HTML 다운로드 링크 만들기 (0) | 2020.03.03 |
|---|---|
| HTML 하이퍼링크 (0) | 2020.03.03 |
| HTML 리스트 작성하기 (0) | 2020.03.03 |
| HTML 이미지 삽입 (0) | 2020.03.03 |
| 링크태그와 메타 데이터 삽입 (0) | 2020.03.03 |
rss