HTML 테이블 (<table>)과 행 (<tr>) 및 셀 (<td>) 작성

HTML 테이블 (<table>)과 행 (<tr>) 및 셀 (<td>) 작성

HTML에서 테이블을 생성하기 위해 <table> 태그를 사용합니다. 테이블은 행과 열로 구성되며, 각 행은 <tr> 태그로, 각 셀은 <td> 태그로 작성됩니다. 이번 글에서는 <table> 태그와 그 하위 요소인 <tr> 태그와 <td> 태그에 대해 자세히 알아보겠습니다.

<table> 태그

<table> 태그는 HTML에서 테이블을 생성하는 데 사용됩니다. 테이블은 행과 열의 집합으로 구성되며, <table> 태그는 시작 태그(<table>)와 종료 태그(</table>)로 이루어져 있습니다.

아래는 <table> 태그의 사용 예시입니다:

<table>
  <!-- 테이블 내용 -->
</table>

위의 예시에서는 <table> 태그로 테이블을 생성하고, 테이블의 내용을 작성하기 위해 내부에 다른 요소들을 포함시킬 수 있습니다.

<tr> 태그

<tr> 태그는 테이블의 행을 나타내는 요소입니다. 각 행은 <tr> 태그로 시작하고 종료됩니다.

아래는 <tr> 태그의 사용 예시입니다:

<tr>
  <!-- 행 내용 -->
</tr>

위의 예시에서는 <tr> 태그로 테이블의 행을 생성하고, 행의 내용을 작성하기 위해 내부에 다른 요소들을 포함시킬 수 있습니다.

<td> 태그

<td> 태그는 테이블의 셀을 나타내는 요소입니다. 각 셀은 <td> 태그로 시작하고 종료됩니다.

아래는 <td> 태그의 사용 예시입니다:

<td>
  <!-- 셀 내용 -->
</td>

위의 예시에서는 <td> 태그로 테이블의 셀을 생성하고, 셀의 내용을 작성할 수 있습니다.

테이블 구조

테이블은 <table> 태그 내에 <tr> 태그를 사용하여 행을 작성하고, 각 행 내에 <td> 태그를 사용하여 셀을 작성합니다. 테이블의 크기는 행과 열의 개수에 따라 동적으로 조절됩니다.

아래는 테이블의 구조를 보여주는 예시입니다:

<table>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
  <tr>
    <td>셀 3</td>
    <td>셀 4</td>
  </tr>
</table>

위의 예시에서는 2개의 행과 2개의 열로 구성된 테이블을 생성하고, 각 셀에 적절한 내용을 작성했습니다.

테이블 스타일링

HTML 테이블은 CSS를 사용하여 스타일을 적용할 수 있습니다. CSS를 활용하여 테이블의 레이아웃, 배경색, 테두리 등을 변경할 수 있습니다. CSS 스타일링에 대한 자세한 내용은 다음 글에서 다루도록 하겠습니다.

마무리

HTML의 <table> 태그와 그 하위 요소인 <tr> 태그와 <td> 태그를 활용하여 테이블을 생성할 수 있습니다. <table> 태그는 테이블의 뼈대를 정의하고, <tr> 태그는 테이블의 행을 작성하며, <td> 태그는 테이블의 셀을 작성합니다. 테이블을 구조화하여 웹 페이지의 내용을 체계적으로 정리하고, 필요한 정보를 효과적으로 전달해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!