HTML에서 중첩 테이블(nested table)이란 테이블 셀(<td>) 안에 또 다른 테이블을 배치하는 구조를 의미합니다. 복잡한 데이터를 계층적으로 표현하거나 세부적인 레이아웃을 구성할 때 활용할 수 있습니다.
예제
다음은 HTML에서 중첩 테이블을 구현한 기본 예제입니다. 바깥쪽 테이블의 하나의 셀 안에 새로운 테이블이 포함되어 있는 형태입니다.
<!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>
코드 설명
위 코드의 동작 방식은 다음과 같습니다.
- 바깥쪽 테이블: 하나의 행(
<tr>)과 하나의 셀(<td>)로 구성되어 있습니다. - 안쪽 테이블: 바깥쪽 셀 내부에 위치하며, 두 개의 셀에 각각 'My'와 'Table'이라는 텍스트가 들어갑니다.
- 브라우저는 이 코드를 실행하면 하나의 큰 테이블 셀 안에 작은 테이블이 표시된 결과를 출력합니다.
참고 사항
중첩 테이블은 구조적으로는 유효하지만, 과도하게 사용하면 코드가 복잡해지고 접근성과 유지보수성이 떨어질 수 있습니다. 최신 웹 개발에서는 레이아웃 목적이라면 CSS Flexbox나 Grid를 사용하는 것이 권장되며, 중첩 테이블은 실제 표 형태의 데이터를 표현할 때만 제한적으로 사용하는 것이 좋습니다.