DIV 태그와 Table 태그의 가장 큰 차이점은 렌더링 방법입니다. 물론 용도가 다른 만큼 이 둘을 직접적으로 비교하기에는 무리가 있지만 일반적으로 비슷한 용도로 사용하고 있는 레이아웃에서는 비교가 가능할 것 같고, 이 때는 크게 다른 모습을 보여주게 됩니다.
DIV 태그는 DIV 하나 하나가 객체로 구성되어집니다. 브라우저에서 렌더링을 할 때에는 객체 단위로 화면에 그리게 되는데요. DIV 객체가 하나가 로드가되면 바로 화면에 그리게됩니다. CSS가 제대로 지정이 되어 있다면 화면에 지정된 위치에 하나하나 차근차근 그려지기 시작하면서 페이지가 완성됩니다만, CSS가 제대로 지정되어 있지 않은 경우에는 화면상에서 객체들이 그려지면서 여기저기 움직이면서 위치를 찾아가는 경우도 발생합니다. 하지만 이건 페이지 레이아웃을 만든 사람이 잘 만들면 해결되는 문제죠. 레이아웃의 위치를 지정하는데 번거로운 과정이 따르지만 페이지를 로딩하면서 바로바로 그리기 때문에 컨텐츠 영역을 먼저 그리도록 레이아웃을 배치하면 방문자가 요구하는 컨텐츠의 내용을 보는데 지체되는 일이 적기 때문에 쾌적함을 느낄 수 있게됩니다.
반면 Table 태그는 Table 전체가 하나의 객체입니다. 보통 내용을 꾸미기 위해서는 Table 안에 셀에 내용을 채우게 되는데요. 셀의 내용이 크게되면 셀을 로드하는데 시간이 지연될 수 있습니다. 하지만 셀이 다 로드됐다고 바로 화면에 그려지는 것은 아니고, Table 태그 내에 있는 모든 셀이 로드가 되어야 화면에 그리기 시작합니다. 그래서 페이지의 내용이 보이기 시작할 때까지의 시간이 긴편입니다. 그리고 중요한건 로드가 다 끝났다고 바로 페이지가 다 열린 것이 아니라 이 때부터 그리기 시작 시작하는 것으로 플래시는 이 때부터 통신을 시작하고, 자바스크립트는 이 때부터 실행되기 시작합니다. 서버나 회선의 속도가 빨라서 로드가 빠르다면 큰 차이를 못 느끼겠지만 느리다면 화면 하나 그려지는데 짜증이 치밀어 올라오기 시작할 겁니다. 회선 속도는 충분히 빠르더라도 서버 처리 속도가 떨어져서 DB를 가져오는 게 느릴 경우에는 더 심하게 다가오는데요. 컨텐츠 영역은 이미 로드가 끝났음에도 그 뒤에 있는 셀의 내용을 서버에서 처리하고 전송하는 것이 지연된다면 그 시간만큼 Table 전체를 그리지 않고 기다리게 됩니다. Table 태그로 레이아웃을 만들 경우에 가장 큰 문제는 바로 요 문제죠. - 반면 DIV 태그는 이 전까지 로드된 부분은 이미 화면에 그린 상태구요.
그래서 레이아웃에는 Table 태그보다는 DIV 태그 사용이 권장되고 있습니다. 그러면 Table 태그는 어떤 때 사용하느냐... Table 태그의 목적이 표를 그리는 것인 만큼 표에 사용하면 됩니다. 표를 DIV 태그로도 그릴 수도 있지만 CSS를 사용해야 하는지라 자그마한 표를 만들기에는 적합하지 않고, 표 자체가 하나의 객체인데 별도의 객체로 그려지는 차이점이 발생하기 때문에 표를 그릴 때에는 DIV 태그보다 Table 태그가 더 좋습니다.
참조
http://egloos.zum.com/pnpcrow/v/5048788
https://aedi.tistory.com/117
