HTML에서 테이블

1. 엘리먼트 <table>

HTML은 데이터를 구조적으로 나타내기 위한 편리한 방법으로 테이블을 제공합니다. 테이블은 정보를 여러 행과 열로 구성하여 숫자 데이터, 일정표, 가격표 및 기타 구조적인 데이터 세트를 표현하는 데 유용합니다. 테이블을 생성하는 기본 태그들을 살펴보겠습니다: <table>, <tr>, <td>, <th>.

<table> 태그는 테이블 전체를 위한 컨테이너 역할을 합니다. 테이블의 시작과 끝을 나타내며, 테이블과 관련된 다른 모든 태그들을 포함합니다.

<table> 태그를 사용해 테이블을 생성하는 예:

<table>
  <!-- 여기에 테이블의 행과 셀이 위치합니다 -->
</table>

<table> 태그는 border 속성을 사용하여 테이블에 테두리를 추가해 스타일링할 수 있습니다:

<table border="1">
  <tr>
    <td>셀 예제</td>
  </tr>
</table>

여기서 border="1" 속성은 테이블과 그 셀들 주변에 테두리를 추가하여 가시적으로 만들어줍니다.

2. 엘리먼트 <tr>

<tr> 태그는 테이블의 행(table row)을 나타냅니다. 테이블의 각 행은 <tr> 태그 내에 있어야 하며, 이는 <table> 안에 위치합니다.

예제:

<table border="1">
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
  <tr>
    <td>셀 3</td>
    <td>셀 4</td>
  </tr>
</table>

이 예제에서 테이블은 두 행으로 구성됩니다. 각 행에는 두 개의 셀이 있습니다.

3. 엘리먼트 <td>

<td> 태그(table data)는 테이블에서 데이터를 담는 셀을 생성하는 데 사용됩니다. 이 태그는 일반 셀을 나타내며, 텍스트, 이미지 또는 기타 HTML 콘텐츠를 포함할 수 있습니다.

<td>를 사용한 예제:

<table border="1">
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

<td> 셀들은 테이블의 주요 내용을 생성하며 <tr> 행 내에 배치됩니다.

4. 엘리먼트 <th>

<th> 태그(table header)는 테이블 헤더를 생성하는 데 사용됩니다. <th>로 생성된 셀은 기본적으로 굵은 글씨체로 중앙 정렬됩니다. 이 태그는 행 또는 열의 헤더를 나타내는 데 유용합니다.

헤더가 있는 테이블의 예제:

    
<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>안나</td>
    <td>25</td>
  </tr>
  <tr>
    <td>이반</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>안나</td>
    <td>25</td>
  </tr>
  <tr>
    <td>이반</td>
    <td>30</td>
</tr>
<table border="1">
    
  

이 예제에서 <th>는 «이름»과 «나이» 헤더를 나타냅니다. 이를 통해 사용자들은 각 열의 데이터가 무엇을 나타내는지 빠르게 이해할 수 있습니다.