테이블 관련 태그
이 기사에서는 테이블 관련 태그에 대해 설명합니다.
이는 HTML에서 표와 표 제목을 설명하는 방법을 예제와 함께 설명합니다.
YouTube Video
테이블 관련 태그
<table> 태그
1<table>
2 <tr>
3 <th>Header 1</th>
4 <th>Header 2</th>
5 </tr>
6 <tr>
7 <td>Data 1</td>
8 <td>Data 2</td>
9 </tr>
10</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
-
<table>태그는 데이터를 행과 열로 구성하고 표시하는 테이블을 만드는 데 사용됩니다.<table>태그는 데이터를 시각적으로 구성하고 여러 행과 열로 이루어진 테이블을 만듭니다. 행은<tr>태그로 정의하고, 헤더 셀은<th>태그, 데이터 셀은<td>태그로 정의합니다. -
CSS를 사용하여 테이블의 스타일과 레이아웃을 사용자 정의할 수 있습니다.
<tr> 태그
1<tr>
2 <td>Row 1, Cell 1</td>
3 <td>Row 1, Cell 2</td>
4</tr>-
<tr>태그는 테이블에서 행을 정의하는 데 사용됩니다.<tr>태그는 테이블의 각 행을 생성하는 데 사용되며, 이 행은 셀(<td>,<th>)을 포함합니다. -
각 행은 여러 개의 셀을 포함하여 테이블의 전체 구조를 형성할 수 있습니다.
<th> 및 <td> 태그
1<th>Header 1</th>
2<td>Data 1</td><th>태그는 표의 헤더 셀을 정의합니다. 일반적으로 헤더 행에서 사용되며, 셀의 내용은 굵게 표시되고 가운데 정렬됩니다.<td>태그는 일반 테이블 데이터 셀을 정의하며, 일반적인 테이블 데이터를 표시합니다.
colspan 및 rowspan 속성
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td colspan="2">Spanning Cell</td>
11 </tr>
12 <tr>
13 <td rowspan="2">Spanning Cell</td>
14 <td>Data 1</td>
15 </tr>
16 <tr>
17 <td>Data 2</td>
18 </tr>
19 </tbody>
20</table>| Header 1 | Header 2 |
|---|---|
| Spanning Cell | |
| Spanning Cell | Data 1 |
| Data 2 | |
colspan과 rowspan은 테이블 셀이 여러 열이나 행에 걸쳐 사용할 때 사용하는 속성입니다.
colspan속성은 셀이 여러 열에 걸쳐 확장될 수 있도록 합니다.rowspan속성은 셀이 여러 행에 걸쳐있도록 허용합니다.
<thead>, <tbody>, <tfoot> 태그
1<table>
2 <thead>
3 <tr>
4 <th>Header 1</th>
5 <th>Header 2</th>
6 </tr>
7 </thead>
8 <tbody>
9 <tr>
10 <td>Data 1</td>
11 <td>Data 2</td>
12 </tr>
13 <tr>
14 <td>Data 3</td>
15 <td>Data 4</td>
16 </tr>
17 </tbody>
18 <tfoot>
19 <tr>
20 <td>Footer 1</td>
21 <td>Footer 2</td>
22 </tr>
23 </tfoot>
24</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
| Footer 1 | Footer 2 |
-
<thead>태그는 표의 헤더 부분을 정의하는 데 사용됩니다. 일반적으로 이 태그에는 열 머리글이 포함됩니다.<thead>태그는 표의 상단에 위치하여 열 제목이나 머리글을 정의합니다. 이렇게 하면 데이터의 각 섹션을 명확하게 구분할 수 있습니다. -
<tbody>태그는 표의 본체 섹션을 정의합니다. 이는 데이터 행을 포함합니다.<tbody>태그는 표의 데이터 본체를 포함합니다. 이는<thead>및<tfoot>태그로 둘러싸인 행들 사이에 위치합니다. -
<tfoot>태그는 표의 바닥 부분을 정의하며, 합계나 주석을 포함합니다.<tfoot>태그는 표의 끝에 위치하며, 합계나 기타 주석을 표시하는 데 사용됩니다. 대량의 데이터 세트를 요약하거나 합계를 표시할 때 특히 유용합니다.
<caption> 및 <colgroup> 태그
1<table>
2 <caption>Sample Table Caption</caption>
3 <colgroup>
4 <col style="background-color: #f2f2f2">
5 <col style="background-color: #e6e6e6">
6 </colgroup>
7 <thead>
8 <tr>
9 <th>Header 1</th>
10 <th>Header 2</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr>
15 <td>Data 1</td>
16 <td>Data 2</td>
17 </tr>
18 <tr>
19 <td>Data 3</td>
20 <td>Data 4</td>
21 </tr>
22 </tbody>
23</table>| Header 1 | Header 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
-
<caption>태그는 캡션(제목)을 추가하여 표의 내용을 더 명확하게 만듭니다. 이는 보통 표의 상단에 위치하며, 표의 전반적인 내용을 요약하는 역할을 합니다. -
<colgroup>태그는 표 내의 열을 그룹으로 묶으며, 스타일이나 레이아웃을 적용하는 데 사용됩니다.<col>태그를 포함하여 특정 열에 대한 배경색이나 폭을 지정할 수 있습니다.
테이블 예제
1<table>
2 <caption>Table Title</caption>
3 <colgroup>
4 <col span="2" style="background-color: lightblue;">
5 </colgroup>
6 <thead>
7 <tr>
8 <th>Header 1</th>
9 <th>Header 2</th>
10 <th>Header 3</th>
11 <th>Header 4</th>
12 </tr>
13 </thead>
14 <tbody>
15 <tr>
16 <td>Data 11</td>
17 <td>Data 12</td>
18 <td>Data 13</td>
19 <td>Data 14</td>
20 </tr>
21 <tr>
22 <td>Data 21</td>
23 <td>Data 22</td>
24 <td>Data 23</td>
25 <td>Data 24</td>
26 </tr>
27 </tbody>
28 <tfoot>
29 <tr>
30 <td colspan="3">Table Footer Title</td>
31 <td>Table Footer Summary</td>
32 </tr>
33 </tfoot>
34</table>| Header 1 | Header 2 | Header 3 | Header 4 |
|---|---|---|---|
| Data 11 | Data 12 | Data 13 | Data 14 |
| Data 21 | Data 22 | Data 23 | Data 24 |
| Table Footer Title | Table Footer Summary | ||
-
<table>태그는 데이터를 행과 열에 표시하는 테이블을 생성하는 데 사용됩니다. -
<thead>태그는 테이블의 헤더 행을 그룹화합니다. 이는 일반적으로 헤더 역할을 하는<th>태그를 포함합니다. -
<tbody>태그는 테이블의 주요 내용을 그룹화합니다. 이는 일반적으로<td>태그로 구성된 데이터 행을 포함합니다. -
<tfoot>태그는 테이블의 풋터 행을 그룹화합니다. 합계 또는 주석을 표시하는 데 적합합니다. -
<colgroup>태그는 테이블의 열을 그룹화하며, 전체적으로 스타일을 적용하는 데 사용됩니다. -
<caption>태그는 테이블에 캡션 또는 제목을 추가하여 사용자가 테이블의 내용을 더 쉽게 이해할 수 있도록 합니다. -
colspan속성은 셀이 여러 열에 걸쳐 확장될 수 있도록 합니다. -
rowspan속성은 셀이 여러 행에 걸쳐있도록 허용합니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.