홈페이지를 제작할때 가장 많이 사용되는 태그는 <table>태그입니다.(<tr>,<td>와 함께)

이유는 레이아웃을 잡을때 <table>태그만큼 효율적인 것이 없기 때문입니다.

대부분의 홈페이지는 top 부분과 left 부분에 네비게이션(메뉴)이 위치합니다.

이를 최대한 간단하게 만들어 보겠습니다.

<table width="800" cellpadding="0" cellspacing="0" border="0" align="center"> <tr bgcolor="#8080FF" align="center"> <td width="100">홈페이지 로고</td> <td width="100">메뉴1</td> <td width="100">메뉴2</td> <td width="100">메뉴3</td> <td width="100">메뉴4</td> <td width="100">메뉴5</td> <td width="200"><!-- 여백 --></td> </tr> <tr height="5"> <td colspan="7"><!-- 여백 --></td> </tr> </table> <table width="800" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td width="150" valign="top" bgcolor="#8080FF"> <table width="130" cellpadding="5" cellspacing="0" border="0" align="center"> <tr> <td>하위메뉴1</td> </tr> <tr> <td>하위메뉴2</td> </tr> <tr> <td>하위메뉴3</td> </tr> <tr> <td>하위메뉴4</td> </tr> <tr> <td>하위메뉴5</td> </tr> </table> </td> <td width="650" valign="top"> <table width="600" cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td>여기에 본문이 옵니다.</td> </tr> </table> </td> </tr> </table>

다소 복잡한 테이블이지만 실제로 만들어 보면 크게 어렵지 않습니다.

홈페이지 로고 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 하위메뉴1 하위메뉴2 하위메뉴3 하위메뉴4 하위메뉴5 여기에 본문이 옵니다.

너비의 단위는 %를 사용하였지만 100% 레이아웃을 차지하는 홈페이지가 아닌 이상 % 보다는 픽셀을 사용하는 것이 보다 일반적입니다.

그리고 테이블의 셀안에 다시 테이블이 들어가는 것을 볼 수 있습니다.

테이블을 이렇게 중첩시켜 나가면서 복잡한 레이아웃을 구현합니다.

예제에서는 이미지를 전혀 쓰지 않았지만 대부분의 홈페이지 작업은 전체적인 화면의 이미지를 먼저 만들고 이 이미지를 잘라서 테이블을 이용하여 배치를 하는 방식으로 진행됩니다.