웹 페이지를 디자인할 때 콘텐츠를 여러 열로 나누어 배치하면 가독성과 사용성이 크게 향상됩니다. HTML의 <table> 요소를 활용하면 별도의 복잡한 설정 없이도 간단하게 3단 레이아웃을 구성할 수 있습니다.
일반적으로 다중 열 레이아웃은 다음과 같은 역할 분담으로 구성합니다.
- 왼쪽 열: 메인 메뉴나 내비게이션 배치
- 가운데 열: 본문 콘텐츠 표시
- 오른쪽 열: 광고, 부가 정보 등 보조 콘텐츠 배치
기본 예제 코드
아래는 테이블을 이용해 왼쪽 메뉴, 중앙 본문, 오른쪽 메뉴로 구성된 3단 레이아웃을 만드는 전체 코드입니다.
<!DOCTYPE html> <html> <head> <title>Three Column HTML Layout</title> </head> <body> <table width = "100%" border = "0"> <tr valign = "top"> <td bgcolor = "#aaa" width = "20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor = "b5dcb3" height = "200" width = "60%"> Technical and Managerial Tutorials </td> <td bgcolor = "#aaa" width = "20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> </table> </body> </html>
코드 주요 포인트
- width 속성: 각 셀(
<td>)의 너비를 백분율(20%, 60%, 20%)로 지정해 화면 크기에 비례하는 레이아웃을 만듭니다. - valign 속성: 행(
<tr>)에top값을 지정하면 모든 셀의 내용이 상단에 정렬됩니다. - bgcolor 속성: 각 영역에 배경색을 적용해 시각적으로 구분할 수 있습니다.
- height 속성: 중앙 셀에 최소 높이를 지정해 본문 영역의 공간을 확보합니다.
참고: 현대적인 대안
테이블 레이아웃은 과거에 널리 사용되었지만, 현재는 웹 표준 관점에서 권장되지 않습니다. 테이블은 원래 표 형태의 데이터를 표현하기 위한 요소이며, 화면 낭독기 등 접근성 도구에서 의도와 다르게 해석될 수 있습니다. 실무에서는 CSS Flexbox나 CSS Grid를 사용해 다중 열 레이아웃을 구현하는 것이 표준적인 방법입니다. 다만, 레거시 코드 유지보수나 학습 목적이라면 위 예제처럼 테이블 기반 구조를 이해해 두는 것도 도움이 됩니다.