HTML Tables
HTML 테이블은 웹 페이지에서 데이터를 구조화하고 표시하기 위한 요소입니다.
테이블은 행과 열로 구성되며, 각 셀은 데이터 또는 다른 HTML 요소(이미지, 링크, 목록, 기타 표 등)를 포함할 수 있습니다.
일반적으로 테이블은 데이터를 조직화하고 표 형식으로 표시하기 위해 사용됩니다.
Define an HTML Table
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>A basic HTML table
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
To understand the example better, we have added borders to the table.
HTML 테이블은 <table> 요소로 시작하며, <tr> 요소로 행을 정의하고, 각 행은 <td> 요소로 셀을 정의합니다.
Table Headers
테이블의 첫 번째 행은 일반적으로 <th> 요소를 사용하여 테이블의 열 제목을 정의합니다.
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TH elements define table headers</h2>
<table style="width:100%">
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>TH elements define table headers
| Person 1 | Person 2 | Person 3 |
|---|---|---|
| Emil | Tobias | Linus |
| 16 | 14 | 10 |
To understand the example better, we have added borders to the table.
HTML Table Tags
HTML 테이블을 생성하고 구성하는 데 사용되는 주요 태그
<table>
테이블을 정의하는 태그입니다. 모든 테이블 요소는 <table> 태그 내에 위치해야 합니다.
<th>
테이블의 헤더 셀을 정의하는 태그입니다. 일반적으로 첫 번째 행이나 열에 위치하며, 열 제목을 표시합니다.
<tr>
테이블의 행을 정의하는 태그입니다. <tr> 태그 내에 <td>나 <th> 태그로 셀을 정의합니다.
<td>
테이블의 일반 데이터 셀을 정의하는 태그입니다. <tr> 태그 내에 위치하며, 각 데이터를 표시합니다.
<caption>
테이블의 캡션(제목)을 정의하는 태그입니다.
<table> 태그의 첫 번째 자식으로 위치하며, 테이블과 관련된 설명을 표시할 수 있습니다.
<colgroup>
테이블에서 하나 이상의 열 그룹을 정의하는 태그입니다. 주로 열에 대한 서식을 지정하기 위해 사용됩니다.
<col>
<colgroup> 내에서 각 열에 대한 속성을 지정하는 태그입니다. 너비, 스타일 등의 열 속성을 정의할 수 있습니다.
<thead>
테이블의 헤더 영역을 그룹화하는 태그입니다. 주로 열 제목을 포함하는 행들로 구성됩니다.
<tbody>
테이블의 본문 영역을 그룹화하는 태그입니다. 주로 데이터 행들로 구성됩니다.
<tfoot>
테이블의 푸터(마지막 부분) 영역을 그룹화하는 태그입니다. 주로 요약 정보나 계산 결과를 표시하는 데 사용됩니다.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |
|---|---|
| HTML 튜토리얼 - HTML Lists (0) | 2023.07.21 |
| HTML 튜토리얼 - HTML Page Title (0) | 2023.07.17 |
| HTML 튜토리얼 - HTML Favicon (0) | 2023.07.17 |
| HTML 튜토리얼 - HTML Images (0) | 2023.07.14 |