HTML Table태그 사용법
- 표는
table태그로 만듭니다. - 행은
tr태그로 만듭니다. - 열의 제목이 들어가는 셀은
th로 만듭니다. - 내용이 들어가는 셀은
td태그로 만듭니다. - 각 열의 의미에 따라
thead, tbody, tfoot태그로 구분지을 수 있습니다. - 가로로 이웃한 셀을 합칠땐
colspan속성을 사용합니다. - 세로로 이웃한 셀을 합칠땐
rowspan속성을 사용합니다. - 표 제목은
caption태그로 만듭니다.
예제
1 | |
2 | <html lang="ko"> |
3 | <head> |
4 | <meta charset="utf=8"> |
5 | <title>HTML</title> |
6 | <style> |
7 | table { |
8 | width: 100%; |
9 | } |
10 | table, th, td { |
11 | border: 1px solid #bcbcbc; |
12 | } |
13 | </style> |
14 | </head> |
15 | <body> |
16 | <table> |
17 | <caption>제목</caption> |
18 | <thead> |
19 | <tr> |
20 | <th></th> |
21 | <th>Ipsum</th> |
22 | <th>Ipsum</th> |
23 | <th>Ipsum</th> |
24 | </tr> |
25 | </thead> |
26 | <tbody> |
27 | <tr> |
28 | <th>Ipsum</th> |
29 | <td>Dolor</td> |
30 | <td>Dolor</td> |
31 | <td rowspan="2">Dolor</td> |
32 | </tr> |
33 | <tr> |
34 | <th>Ipsum</th> |
35 | <td>Dolor</td> |
36 | <td>Dolor</td> |
37 | </tr> |
38 | <tr> |
39 | <th>Ipsum</th> |
40 | <td>Dolor</td> |
41 | <td>Dolor</td> |
42 | <td>Dolor</td> |
43 | </tr> |
44 | </tbody> |
45 | <tfoot> |
46 | <tr> |
47 | <td colspan="2">Table Foot</td> |
48 | </tr> |
49 | </tfoot> |
50 | </table> |
51 | </body> |
52 | </html> |
