테이블안에 테이블 충첩하기

테이블 안에 테이블(중첩 테이블)이란 무엇인가?

테이블 안에 테이블, 또는 중첩 테이블은 HTML에서 테이블을 내부적으로 더 세분화해서 구조화하는 기술입니다. 이 기술을 사용하면 테이블 안에 또 다른 테이블을 추가하여 더 복잡한 데이터 구조를 표현할 수 있습니다.

중첩 테이블 작성하기

중첩 테이블은 기본적으로 HTML의 <table> 요소 내에서 <tr>(행)과 <td>(셀) 요소를 포함하여 작성됩니다. 내부 테이블을 만들기 위해선 추가적으로 <table> 요소를 사용하면 됩니다. 예를 들어, 아래와 같은 구조로 중첩 테이블을 작성할 수 있습니다:

<table>
  <tr>
    <td>외부 테이블 셀 1</td>
    <td>외부 테이블 셀 2</td>
  </tr>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td>내부 테이블 셀 1</td>
          <td>내부 테이블 셀 2</td>
        </tr>
        <tr>
          <td>내부 테이블 셀 3</td>
          <td>내부 테이블 셀 4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

중첩 테이블의 활용 예시

중첩 테이블은 데이터의 계층 구조를 표현하는데 유용합니다. 대표적인 예시로는 주문 내역과 상품 목록이 있는 전자상거래 사이트의 주문 테이블이 있습니다. 주문 테이블의 한 행에서 상품들의 상세 정보를 표현하기 위해 중첩 테이블을 사용할 수 있습니다.

결론

중첩 테이블은 HTML에서 테이블을 더 복잡하게 구조화할 수 있는 유용한 기술입니다. 중첩 테이블은 HTML의 <table> 요소 내에서 내부 테이블을 추가하여 작성되며, 계층 구조가 필요한 데이터를 표현하는데 활용됩니다. 이를 통해 데이터를 더 명확하고 구조적으로 표현할 수 있습니다.