HTML5 중첩 테이블 유효성: 검사기를 통과하는 올바른 구조

중첩 테이블은 HTML5에서 유효한가?

HTML5 유효성 검사기(Validator)는 테이블 셀(<td>) 안에 또 다른 테이블이 중첩된 구조도 유효한 마크업으로 판정합니다. 즉, 셀 내부에 완전한 형태의 테이블을 배치하는 것은 HTML5 명세상 전혀 문제가 되지 않습니다.

다음은 유효성 검사기를 오류 없이 통과하는 중첩 테이블의 대표적인 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>

  <body>
    <table>
      <tbody>
        <tr>
          <td>
            <table>
              <tbody>
                <tr>
                  <td>My</td>
                  <td>Table</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

코드 구조 살펴보기

외부 테이블: 문서 본문(<body>) 안에 위치한 최상위 테이블로, 하나의 행(<tr>)과 하나의 셀(<td>)을 가집니다.
내부 테이블: 외부 테이블의 <td> 셀 안에 <table>, <tbody>, <tr>, <td>로 이루어진 완전한 테이블 구조가 중첩되어 있습니다.

왜 유효한가?

HTML5에서는 흐름 콘텐츠(flow content)가 허용되는 위치라면 테이블을 배치할 수 있으며, <td> 요소 역시 흐름 콘텐츠를 자식으로 포함할 수 있습니다. 따라서 테이블을 다른 테이블의 셀 안에 중첩하는 것은 문법적으로 완전히 유횩니다.

다만 중첩 테이블을 페이지 레이아웃 목적으로 과도하게 사용하면 코드가 복잡해지고 접근성과 유지보수성이 떨어질 수 있습니다. 실제 표 형태의 데이터를 표현할 때만 사용하고, 레이아웃은 CSS(Flexbox, Grid 등)로 처리하는 것이 권장됩니다.