table_example.html

Download
html 340 lines 9.6 KB 
  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>HTML ํ…Œ์ด๋ธ” ์˜ˆ์ œ</title>
  7    <style>
  8        body {
  9            font-family: Arial, sans-serif;
 10            max-width: 900px;
 11            margin: 0 auto;
 12            padding: 20px;
 13        }
 14        h2 {
 15            border-bottom: 2px solid #333;
 16            padding-bottom: 10px;
 17        }
 18
 19        /* ๊ธฐ๋ณธ ํ…Œ์ด๋ธ” ์Šคํƒ€์ผ */
 20        table {
 21            width: 100%;
 22            border-collapse: collapse;
 23            margin-bottom: 30px;
 24        }
 25        th, td {
 26            border: 1px solid #ddd;
 27            padding: 12px;
 28            text-align: left;
 29        }
 30        th {
 31            background-color: #4CAF50;
 32            color: white;
 33        }
 34        tr:nth-child(even) {
 35            background-color: #f2f2f2;
 36        }
 37        tr:hover {
 38            background-color: #ddd;
 39        }
 40
 41        /* ์บก์…˜ ์Šคํƒ€์ผ */
 42        caption {
 43            font-size: 1.2em;
 44            font-weight: bold;
 45            padding: 10px;
 46            background-color: #f9f9f9;
 47        }
 48
 49        /* ๋ฐ˜์‘ํ˜• ํ…Œ์ด๋ธ” */
 50        .table-responsive {
 51            overflow-x: auto;
 52        }
 53
 54        /* ์ŠคํŠธ๋ผ์ดํ”„ ํ…Œ์ด๋ธ” */
 55        .striped tbody tr:nth-child(odd) {
 56            background-color: #fff;
 57        }
 58        .striped tbody tr:nth-child(even) {
 59            background-color: #f8f9fa;
 60        }
 61
 62        /* ํ…Œ์ด๋ธ” ํ’‹ ์Šคํƒ€์ผ */
 63        tfoot {
 64            font-weight: bold;
 65            background-color: #e9ecef;
 66        }
 67    </style>
 68</head>
 69<body>
 70    <h1>HTML ํ…Œ์ด๋ธ” ์˜ˆ์ œ</h1>
 71
 72    <!-- 1. ๊ธฐ๋ณธ ํ…Œ์ด๋ธ” -->
 73    <h2>1. ๊ธฐ๋ณธ ํ…Œ์ด๋ธ”</h2>
 74    <table>
 75        <tr>
 76            <th>์ด๋ฆ„</th>
 77            <th>๋‚˜์ด</th>
 78            <th>์ง์—…</th>
 79        </tr>
 80        <tr>
 81            <td>ํ™๊ธธ๋™</td>
 82            <td>25</td>
 83            <td>๊ฐœ๋ฐœ์ž</td>
 84        </tr>
 85        <tr>
 86            <td>๊น€์ฒ ์ˆ˜</td>
 87            <td>30</td>
 88            <td>๋””์ž์ด๋„ˆ</td>
 89        </tr>
 90        <tr>
 91            <td>์ด์˜ํฌ</td>
 92            <td>28</td>
 93            <td>๊ธฐํš์ž</td>
 94        </tr>
 95    </table>
 96
 97    <!-- 2. ์‹œ๋งจํ‹ฑ ํ…Œ์ด๋ธ” (thead, tbody, tfoot) -->
 98    <h2>2. ์‹œ๋งจํ‹ฑ ํ…Œ์ด๋ธ” (thead, tbody, tfoot)</h2>
 99    <table class="striped">
100        <caption>2024๋…„ 1๋ถ„๊ธฐ ๋งค์ถœ ํ˜„ํ™ฉ</caption>
101        <thead>
102            <tr>
103                <th>์ œํ’ˆ</th>
104                <th>1์›”</th>
105                <th>2์›”</th>
106                <th>3์›”</th>
107                <th>ํ•ฉ๊ณ„</th>
108            </tr>
109        </thead>
110        <tbody>
111            <tr>
112                <td>์ œํ’ˆ A</td>
113                <td>100</td>
114                <td>120</td>
115                <td>150</td>
116                <td>370</td>
117            </tr>
118            <tr>
119                <td>์ œํ’ˆ B</td>
120                <td>80</td>
121                <td>90</td>
122                <td>110</td>
123                <td>280</td>
124            </tr>
125            <tr>
126                <td>์ œํ’ˆ C</td>
127                <td>200</td>
128                <td>180</td>
129                <td>220</td>
130                <td>600</td>
131            </tr>
132        </tbody>
133        <tfoot>
134            <tr>
135                <td>์ด๊ณ„</td>
136                <td>380</td>
137                <td>390</td>
138                <td>480</td>
139                <td>1,250</td>
140            </tr>
141        </tfoot>
142    </table>
143
144    <!-- 3. ์…€ ๋ณ‘ํ•ฉ (colspan, rowspan) -->
145    <h2>3. ์…€ ๋ณ‘ํ•ฉ (colspan, rowspan)</h2>
146    <table>
147        <thead>
148            <tr>
149                <th>์นดํ…Œ๊ณ ๋ฆฌ</th>
150                <th>ํ•˜์œ„ ์นดํ…Œ๊ณ ๋ฆฌ</th>
151                <th>ํ•ญ๋ชฉ</th>
152                <th>๊ฐ€๊ฒฉ</th>
153            </tr>
154        </thead>
155        <tbody>
156            <tr>
157                <td rowspan="4">์ „์ž์ œํ’ˆ</td>
158                <td rowspan="2">์ปดํ“จํ„ฐ</td>
159                <td>๋…ธํŠธ๋ถ</td>
160                <td>1,500,000์›</td>
161            </tr>
162            <tr>
163                <td>๋ฐ์Šคํฌํƒ‘</td>
164                <td>1,200,000์›</td>
165            </tr>
166            <tr>
167                <td rowspan="2">๋ชจ๋ฐ”์ผ</td>
168                <td>์Šค๋งˆํŠธํฐ</td>
169                <td>1,000,000์›</td>
170            </tr>
171            <tr>
172                <td>ํƒœ๋ธ”๋ฆฟ</td>
173                <td>800,000์›</td>
174            </tr>
175            <tr>
176                <td colspan="3" style="text-align: right; font-weight: bold;">์ดํ•ฉ</td>
177                <td style="font-weight: bold;">4,500,000์›</td>
178            </tr>
179        </tbody>
180    </table>
181
182    <!-- 4. colgroup์œผ๋กœ ์—ด ์Šคํƒ€์ผ๋ง -->
183    <h2>4. colgroup์œผ๋กœ ์—ด ์Šคํƒ€์ผ๋ง</h2>
184    <table>
185        <colgroup>
186            <col style="background-color: #f8f9fa;">
187            <col style="background-color: #e9ecef;">
188            <col style="background-color: #dee2e6;">
189            <col style="background-color: #ced4da;">
190        </colgroup>
191        <thead>
192            <tr>
193                <th>์ˆœ์œ„</th>
194                <th>ํŒ€๋ช…</th>
195                <th>์Šน</th>
196                <th>ํŒจ</th>
197            </tr>
198        </thead>
199        <tbody>
200            <tr>
201                <td>1</td>
202                <td>ํŒ€ A</td>
203                <td>10</td>
204                <td>2</td>
205            </tr>
206            <tr>
207                <td>2</td>
208                <td>ํŒ€ B</td>
209                <td>8</td>
210                <td>4</td>
211            </tr>
212            <tr>
213                <td>3</td>
214                <td>ํŒ€ C</td>
215                <td>6</td>
216                <td>6</td>
217            </tr>
218        </tbody>
219    </table>
220
221    <!-- 5. ๋ฐ˜์‘ํ˜• ํ…Œ์ด๋ธ” -->
222    <h2>5. ๋ฐ˜์‘ํ˜• ํ…Œ์ด๋ธ”</h2>
223    <p>ํ™”๋ฉด์ด ์ข์œผ๋ฉด ๊ฐ€๋กœ ์Šคํฌ๋กค์ด ์ƒ๊น๋‹ˆ๋‹ค.</p>
224    <div class="table-responsive">
225        <table>
226            <thead>
227                <tr>
228                    <th>ID</th>
229                    <th>์ด๋ฆ„</th>
230                    <th>์ด๋ฉ”์ผ</th>
231                    <th>์ „ํ™”๋ฒˆํ˜ธ</th>
232                    <th>์ฃผ์†Œ</th>
233                    <th>๊ฐ€์ž…์ผ</th>
234                    <th>์ƒํƒœ</th>
235                </tr>
236            </thead>
237            <tbody>
238                <tr>
239                    <td>1</td>
240                    <td>ํ™๊ธธ๋™</td>
241                    <td>hong@example.com</td>
242                    <td>010-1234-5678</td>
243                    <td>์„œ์šธ์‹œ ๊ฐ•๋‚จ๊ตฌ</td>
244                    <td>2024-01-15</td>
245                    <td>ํ™œ์„ฑ</td>
246                </tr>
247                <tr>
248                    <td>2</td>
249                    <td>๊น€์ฒ ์ˆ˜</td>
250                    <td>kim@example.com</td>
251                    <td>010-2345-6789</td>
252                    <td>์„œ์šธ์‹œ ์„œ์ดˆ๊ตฌ</td>
253                    <td>2024-01-20</td>
254                    <td>ํ™œ์„ฑ</td>
255                </tr>
256            </tbody>
257        </table>
258    </div>
259
260    <!-- 6. scope ์†์„ฑ (์ ‘๊ทผ์„ฑ) -->
261    <h2>6. scope ์†์„ฑ (์ ‘๊ทผ์„ฑ)</h2>
262    <p>scope ์†์„ฑ์€ ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ฐ€ ํ…Œ์ด๋ธ”์„ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค.</p>
263    <table>
264        <thead>
265            <tr>
266                <th scope="col">์š”์ผ</th>
267                <th scope="col">๋‚ ์”จ</th>
268                <th scope="col">๊ธฐ์˜จ</th>
269            </tr>
270        </thead>
271        <tbody>
272            <tr>
273                <th scope="row">์›”์š”์ผ</th>
274                <td>๋ง‘์Œ</td>
275                <td>25ยฐC</td>
276            </tr>
277            <tr>
278                <th scope="row">ํ™”์š”์ผ</th>
279                <td>ํ๋ฆผ</td>
280                <td>22ยฐC</td>
281            </tr>
282            <tr>
283                <th scope="row">์ˆ˜์š”์ผ</th>
284                <td>๋น„</td>
285                <td>18ยฐC</td>
286            </tr>
287        </tbody>
288    </table>
289
290    <!-- 7. ๋ณต์žกํ•œ ํ…Œ์ด๋ธ” ์˜ˆ์ œ -->
291    <h2>7. ์‹œ๊ฐ„ํ‘œ (๋ณต์žกํ•œ ๊ตฌ์กฐ)</h2>
292    <table>
293        <caption>์ฃผ๊ฐ„ ์‹œ๊ฐ„ํ‘œ</caption>
294        <thead>
295            <tr>
296                <th></th>
297                <th scope="col">์›”</th>
298                <th scope="col">ํ™”</th>
299                <th scope="col">์ˆ˜</th>
300                <th scope="col">๋ชฉ</th>
301                <th scope="col">๊ธˆ</th>
302            </tr>
303        </thead>
304        <tbody>
305            <tr>
306                <th scope="row">09:00</th>
307                <td rowspan="2" style="background-color: #ffcdd2;">๊ตญ์–ด</td>
308                <td style="background-color: #c8e6c9;">์˜์–ด</td>
309                <td style="background-color: #bbdefb;">์ˆ˜ํ•™</td>
310                <td style="background-color: #c8e6c9;">์˜์–ด</td>
311                <td style="background-color: #fff9c4;">๊ณผํ•™</td>
312            </tr>
313            <tr>
314                <th scope="row">10:00</th>
315                <td style="background-color: #bbdefb;">์ˆ˜ํ•™</td>
316                <td style="background-color: #ffcdd2;">๊ตญ์–ด</td>
317                <td style="background-color: #fff9c4;">๊ณผํ•™</td>
318                <td rowspan="2" style="background-color: #e1bee7;">์ฒด์œก</td>
319            </tr>
320            <tr>
321                <th scope="row">11:00</th>
322                <td colspan="4" style="background-color: #f5f5f5; text-align: center;">์ ์‹ฌ์‹œ๊ฐ„</td>
323            </tr>
324            <tr>
325                <th scope="row">13:00</th>
326                <td style="background-color: #fff9c4;">๊ณผํ•™</td>
327                <td style="background-color: #e1bee7;">์ฒด์œก</td>
328                <td style="background-color: #c8e6c9;">์˜์–ด</td>
329                <td style="background-color: #bbdefb;">์ˆ˜ํ•™</td>
330                <td style="background-color: #ffcdd2;">๊ตญ์–ด</td>
331            </tr>
332        </tbody>
333    </table>
334
335    <footer style="margin-top: 40px; text-align: center; color: #666;">
336        <p>&copy; 2024 HTML ํ…Œ์ด๋ธ” ์˜ˆ์ œ</p>
337    </footer>
338</body>
339</html>