HTML의 <table> 태그는 표를 정의하는 데 사용됩니다. <table> 태그를 통해 데이터가 행과 열로 구성된 표 형태로 구조화됩니다. <table> 태그와 함께 사용되는 주요 태그와 속성들은 다음과 같습니다.
<table> 태그의 기본 구조
<table>
<caption>표 제목</caption>
<thead>
<tr>
<th>열 제목 1</th>
<th>열 제목 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>셀 1</td>
<td>셀 2</td>
</tr>
<tr>
<td>셀 3</td>
<td>셀 4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>요약 셀 1</td>
<td>요약 셀 2</td>
</tr>
</tfoot>
</table>
주요 태그 및 속성 설명
-
<table>: 표의 시작과 끝을 정의합니다.<table> <!-- 표의 내용 --> </table> -
<caption>: 표의 제목을 정의합니다. 이 태그는<table>태그 바로 아래에 위치해야 합니다.<caption>표 제목</caption> -
<thead>: 표의 머리글 행을 정의합니다. 일반적으로 열 제목을 포함합니다.<thead> <tr> <th>열 제목 1</th> <th>열 제목 2</th> </tr> </thead> -
<tbody>: 표의 본문을 정의합니다. 실제 데이터 행을 포함합니다.<tbody> <tr> <td>셀 1</td> <td>셀 2</td> </tr> <tr> <td>셀 3</td> <td>셀 4</td> </tr> </tbody> -
<tfoot>: 표의 바닥글 행을 정의합니다. 요약 또는 계산된 데이터를 포함할 수 있습니다.<tfoot> <tr> <td>요약 셀 1</td> <td>요약 셀 2</td> </tr> </tfoot> -
<tr>: 표의 행을 정의합니다.<thead>,<tbody>,<tfoot>내부에 위치할 수 있습니다.<tr> <td>셀 1</td> <td>셀 2</td> </tr> -
<th>: 표의 머리글 셀을 정의합니다. 기본적으로 굵은 글씨체와 가운데 정렬이 적용됩니다.<th>열 제목 1</th> -
<td>: 표의 데이터 셀을 정의합니다.<tr>태그 내에서 사용됩니다.<td>셀 1</td>
속성 예시
colspan: 셀이 가로로 몇 개의 열을 병합할지를 지정합니다.<td colspan="2">병합된 셀</td>rowspan: 셀이 세로로 몇 개의 행을 병합할지를 지정합니다.<td rowspan="2">병합된 셀</td>
전체 예제
아래는 모든 태그와 속성을 포함한 <table>의 예제입니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,tr,td{
border: 1px dotted blueviolet;
width: 650px;
height: 50px;
text-align: center;
border-color: red; /* 우선순위가 더 높음 */
border-collapse: collapse;
}
</style>
</head>
<body>
<a name="top"></a><br/>
<a href="#bottom">하단</a><br/>
<a href="#middle">중간</a>
<h1>Table tag</h1>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
<hr>
<table>
<th>제목1</th><th>제목2</th><th>제목3</th><th>제목4</th>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td colspan="3">6</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td rowspan="2">11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
<pre>
2024년 파리올림픽 펜싱 종목에서 한국에 첫 금메달을 안긴 국가대표 오상욱이 메달과 함께 받은 의문의 상자 내용물을 공개했다.
오상욱은 지난 28일 자신의 인스타그램에 “이 메달이랑 같이 준 건 얻다(어디에다) 쓰는 거죠?”라는 글과 함께 포스터 사진을 올렸다.
이날 오상욱은 프랑스 파리 그랑팔레에서 열린 파리 올림픽 남자 사브르 개인전 결승에서 파레스 페르자니(튀니지)를 15-11로 물리치고 우승을 차지했다. 그는 금메달과 함께 길쭉한 모양의 금빛 상자도 함께 받았다.
한 기자가 오상욱을 향해 ‘내용물이 어떤 건지 아느냐'고 묻자 그는 “자세하게는 모르지만, 아마 이 경기가 열린 그랑팔레와 관련한 포스터로 알고 있다”며 “소셜네트워크서비스(SNS)를 통해 어떤 것인지 공개하겠다”고 말한 바 있다.
영국 매체 ‘메트로’에 따르면 <a name="middle">해당</a> 포스터는 프랑스 일러스트레이터 위고 가토니가 제작했다.
그는 6개월간 2000시간 이상을 공들여 제작했으며 포스터에는 올림픽 공식 마스코트가 8개가 숨겨져 있다고 한다.
오상욱은 이날 포스터를 공개하면서 “늦은 시간까지 응원해 주셔서 너무 감사합니다”라는 글을 올려 국민에게 감사 인사를 전했다.
오상욱은 펜싱 단체전도 앞두고 있다. 오상욱과 구본길, 박성원이 나서는 한국 남자 사브르는 세계 랭킹 1위로 대회 4연패를 노리고 있다.
<hr>
<a name="bottom"></a><br>
<a href="#top">상단</a>
<a href="#middle">중간</a>
</pre>
</body>
</html>실행예시
넙-죽