<table border="0" cellpadding="0" cellspacing="0" width="100%">
HTML 소스
<div id="wrap">
<div id="header">
상단 영역
</div>
<div id="left">
왼쪽 영역
</div>
<div id="contents">
컨텐츠 영역
</div>
</div>
CSS 소스
<stype type="text/css">
#wrap { width: 800px; }
#header { margin-bottom: 10px; }
#left { width: 180px; float: left; }
#contents { width: 600px; float: right; }
</style>
이와 같이 Table 로 구성된 레이아웃 소스와 DIV 와 CSS로 구성된 소스를 비교 했을때,
절반이상 소스가 줄어 든것을 확인 하실 수 있습니다.
Table로 만들어 졌을때에는 불필요한 소스로 채워질 수 있으며,
수정시 다시 만들어야 하는 상황이 발생 할 수 도 있습니다.
DIV + CSS로 구성된 소스에서는 CSS만 수정하면 되어 Table로 구성되었을 때보다
보다 간편하게 수정을 할 수 도 있습니다.
위 CSS 소스에서 " float: left; " 과 " float: right; " 부분을 바꾸어 사용한다면,
좌우의 보여지는 내용을 쉽게 바꿀 수 도 있습니다.
이러한 수정 작업을 Table에서 한다면 소스들을 다시 재 수정하여야 하기 때문에
수정이 어려운 상황이 발생 할 수 있습니다.