티스토리 뷰
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<title>table로 표 만들기</title>
</head>
<body>
<hr>
<h1>table, tr, th, td 태그로 표 만들기</h1>
<hr>
<p>
table 태그는 표를 시작하고 닫아준다.<br>
tr 태그는 표에서 한 줄을 시작하고 닫아준다.<br>
th 태그는 제목칸(볼드체, 내용은 가운데 정렬)을 만들어 주며<br>
td 태그는 일반칸을 만들어 준다.<br>
표는 처음 시작한 칸의 갯수가 끝까지 유지되어야 한다.
</p>
<table border = "1" style = "width : 600px; height : 300px;">
<tr>
<th>title A</th>
<td>1 cell</td>
<td>2 cell</td>
<td>3 cell</td>
</tr>
<tr>
<th>title B</th>
<td>4 cell</td>
<td>5 cell</td>
<td>6 cell</td>
</tr>
</table>
<hr>
<h2>가로로 칸 합치기 - <mark>colspan = "n"</mark></h2>
<p>
<b>가로로 합칠</b> 칸의 태그(td나 th) 뒤에 속성 <b>colspan</b>을 쓰고<br>
몇 칸을 하나로 합칠지 그 갯수를 따옴표 안에 속성값으로 넣어준다.
</p>
<table border = "1">
<tr>
<th colspan = "3">th 1 th 2 th 3</th>
</tr>
<tr>
<td colspan = "2">td 1 td 2</td>
<td>td 3</td>
</tr>
<tr>
<td>td 4</td>
<td colspan = "2">td 5 td 6</td>
</tr>
</table>
<hr>
<h2>세로로 칸 합치기 - <mark>rowspan = "n"</mark></h2>
<p>
<b>세로로 합칠</b> 칸의 태그(td나 th) 뒤에 속성 <b>rowspan</b>을 쓰고<br>
몇 칸을 하나로 합칠지 그 갯수를 따옴표 안에 속성값으로 넣어준다.
</p>
<table border = "1" style = "width : 100px; height : 100px;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br><br>
<h3>세로로 칸 합치기 1</h3>
<table border = "1" style = "width : 100px; height : 100px;">
<tr>
<th rowspan = "2">1<br>4</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<br><br>
<h3>세로로 칸 합치기 2</h3>
<table border = "1" style = "width : 100px; height : 100px;">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td rowspan = "2">5<br>8</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>9</td>
</tr>
</table>
<br><br>
<h3>문제. (3, 6, 9번 칸을 하나로) 세로로 칸 합치기 3</h3>
<table border = "1" style = "width : 100px; height : 100px;">
<tr>
<th>1</th>
<th>2</th>
<th rowspan = "3"><mark>3<br>6<br>9</mark></th>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
<br><br>
<h3>문제. 세로로 칸 합치기 4</h3>
<table border = "1" style = "width : 300px; height : 100px;">
<tr>
<th rowspan = "2">결<br><br>재</th>
<th>담 당</th>
<th>부원장</th>
<th>원 장</th>
</tr>
<tr>
<td>김영희</td>
<td>홍길동</td>
<td>이영수</td>
</tr>
</table>
</body>
</html>
'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글
| 연습해보기 (0) | 2018.08.14 |
|---|---|
| form-2 (0) | 2018.08.13 |
| form-1 (0) | 2018.08.13 |
| 테이블 셀 합치기 최종 문제 (0) | 2018.08.13 |
| test01.htm (0) | 2018.08.13 |