본문으로 바로 이동 페이지 설정으로 이동 메뉴로 이동
페이지 설정
  • 어떠한 의견도 좋습니다. 웨버스터디가 더 나은 모습이 되도록 의견을 보내주세요.

테이블 요소와 레이아웃

최초 작성일
최종 수정일
이번 시간에는...
HTML table을 의미적 용도가 아닌, 테이블 레이아웃을 위한 용도로 작업 했을 때 왜 안 좋은 지, 웹 표준, 웹 접근성, 그리고 유지보수의 측면과 크로스 브라우징, 가변적 레이아웃 등 다각적인 관점에서 문제점을 짚어봅니다.

이번 HTML 중급 강의의 마무리는, 배운 요소들을 다시 작성하는 것은 큰 의미가 없을 것 같아, 왜 페이지 레이아웃을 잡는데 table 요소를 써서는 안 되는지에 대해 살펴보는 것으로 대체 하겠습니다.

과거에는 드림위버나, 나모 웹 에디터 같은 것을 사용해서 웹 페이지를 만들었습니다. 이런 에디터들은 화면을 직접 보면서 제작할 수 있어서 HTML과 CSS를 굳이 모르더라도 쉽게 웹을 만들 수 있었습니다. 이런 에디터들은 레이아웃을 table요소로 잡아 주었습니다. 그리고 table 레이아웃을 대체하기 위해 앞으로 배우게 될 CSS의 float 같은 속성을 사용하다 보면, 분명 table의 레이아웃에서 쉽게 했던 부분을 어렵게 고민해야 할 상황들이 생깁니다. 이런 부분들 때문에 table 레이아웃에 대한 유혹이 있습니다. 실제로 아직도 table로 레이아웃을 만드는 사이트들이 종종 있기도 하고요. 하지만, 이번 시간을 통해서 그러한 그러한 유혹을 떨쳐버리시길 바랍니다.

웹 표준의 위배

일단, 가장 원칙적인 말씀을 드리자면, table 레이아웃은 웹 표준을 위배하는 일 입니다. 물론 W3C Vaildation 같은 검증기에서는 비 표준이라고 표출되진 않을 수 있습니다. 하지만, 일단 표준의 의미상 도표가 아닌 요소를 table로 작성하는 것은 표준에 위배됩니다.

그리고 또 한가지 위배 되는 점이 있습니다. 바로 의미(HTML)와 외형(CSS), 그리고 동작(JS)을 분리시켜야 하는 부분을 준수하지 않게 됩니다. 이것이 왜 위배되냐 하면, 여러 분이 동일한 내용의 페이지를 하나는 CSS로, 다른 하나는 table로 레이아웃을 잡는다고 합시다. 그 두 개의 문서를 CSS를 제외하고 HTML만 열어 보겠습니다.

테이블을 쓰지않아 순차적으로 내용을 보여줍니다.
table 요소를 사용하지 않은 HTML
테이블을 사용하여 레이아웃이 그대로 남아있습니다.
table 요소를 사용한 HTML

보면 CSS를 이용해서 레이아웃을 잡았던 HTML은 순차적으로 내용을 담고 있습니다. 말 그대로 '의미'만을 담고 있는 모습입니다.

그에 비해서, table로 레이아웃을 잡았던 HTML은 HTML 문서 내에서 '외형'적인 레이아웃을 담고 있게 됩니다. 이것은 그만큼 나중에 외형적인 부분을 수정해야 할 때, CSS 뿐만 아니라 HTML까지 같이 수정해야 할 수 있습니다.

접근성의 문제

지난 table의 의미적인 접근에 대한 강의에서 말씀 드렸듯이, table 요소는 스크린 리더로 웹을 접근하는 사용자에게 매우 불편합니다.

특히, 스크린 리더로 접근 시 순서대로 읽어주기 때문에, 순차적으로 내용을 담는 것이 매우 중요합니다. 적어도 table로 레이아웃을 작업 한다면, 내용이 순차적으로 나오도록 해야 합니다.

초점의 이동이 내용에 맞게 순차적으로 이뤄줘야 하는데 테이블로 작업시 순서가 엉마이 될 수 있습니다.
초점의 이동, 위의 녹색 이동이 올바른 이동, 아래는 테이블로 잘못 적용된 초점의 이동입니다.

그리고, 이렇게 정보의 접근성이 어렵다는 것은, 검색엔진 역시 여러분의 페이지를 이해하는데 어렵다는 것을 얘기합니다. 검색엔진에 최적화하는 방법 중 하나는 접근성을 높이는 것에 있다는 것을 잊지 마세요.

소스 관리의 어려움

기본적으로 table 요소는 전체 table로 감싸고, tr로 행을 만들고 그 안에 td 셀을 넣어야 안에 내용을 넣을 수 있습니다. 어쩌면 div 하나로 해결될 수 있는 부분에, 많은 요소를 사용해야 하는 것입니다.

또한 table을 작업하다 보면, table 요소 안에 또 다른 table, 그리고 그 안에 table을 넣는 일이 많습니다. 이렇게 되면 무수히 많은 tr, td들을 마주하게 되는데, 나중에 소스를 수정해야 할 때 굉장히 난감한 상황이 많이 벌어집니다.

다음의 코드는 세 개의 div 대신, 세 개의 table을 사용했을 때 모습입니다.

또한 워낙 많은 요소들이 들어가기 때문에, 웹 페이지의 용량이 커지게 되고, 요소도 많기 때문에 웹 브라우저가 페이지를 불러오는데 속도가 보다 느려질 수 밖에 없습니다.

크로스 브라우징의 어려움

또한 테이블은 표준에 맞게 작성하고, CSS로 테이블에 스타일을 주더라도 브라우저 마다 조금씩 다르게 나타나는 경우가 있습니다. 예를 들어 td에 CSS로 높이 값(height)을 주고 안쪽 여백(padding)을 줄 경우, 어떤 브라우저는 보통의 박스처럼 td의 전체 높이를 height + padding으로 보여주는 반면, 어떤 브라우저는 td의 전체 높이를 height 값으로 보여주는 경우도 있었습니다. (지금은 차이가 많이 줄었지만, 예전 버전의 오페라나, 7버전 이하의 IE 등에서는 차이가 있습니다.)

또한 table은 안의 내용의 길이나, 외부 감싸는 요소의 너비 등에 따라 크기나 셀의 크기 등이 영향을 많이 받습니다. 여러분이 각 셀에 width로 너비를 주더라도, 표는 그 너비보다 더 좁거나 넓은 너비로 표현할 수 있습니다. (그나마 CSS로 table-layout:fixed 등을 통해서 보다 정확히 줄 수 있지만, 그럼에도 너비가 바뀌는 경우를 발견할 수 있습니다.)

가변적 레이아웃의 어려움

이 강의는 기본적으로 HTML5와 CSS3를 다루지 않습니다. 하지만, 요새 스마트폰이나 태블릿, 스마트 TV 등 웹에 접근할 수 있는 기기들이 매우 많아졌습니다. 그만큼 다양한 화면 크기가 존재하고요. 그런 다양한 화면들을 지원하기 위해서 CSS3를 통한 가변적인 스타일을 많이 줍니다. (꼭 CSS3가 아니더라도 %등의 단위를 이용해서 어느 정도는 줄 수 있습니다.) 이런 가변적인 스타일로는 메뉴와 내용이 가로로 나란히 보이던 것이, 좁은 화면에서는 세로로 일렬로 보이게 되는 식입니다.

하지만, table을 통한 레이아웃은 HTML 자체에 레이아웃을 담고 있기 때문에, 그러한 가변적 레이아웃이 사실상 불가능하다고 볼 수 있습니다. 그만큼 table을 이용한 레이아웃은 시대흐름을 반영하지 못해, 그 수명이 짧을 수 밖에 없습니다.

정리

지금까지 table 레이아웃에 대한 단점만을 살펴보았습니다. 그렇다고, table 요소 자체가 잘못된 요소라는 것이 아닙니다. table 요소를 도표적인 의미가 없는 용도로 사용하는 것이 잘못되었다는 것입니다. table 요소는 분명 요소의 역할을 가지고 있습니다.

사실 실제로 작업하다 보면, 어쩔 수 없이 table 요소의 특성을 이용한 레이아웃을 쓸 수 밖에 없는 상황도 있습니다. 다만, 이런 부분들은 정말 부분적으로 사용해야 하며, 대부분의 상황은 CSS로 구현이 가능합니다.

이상으로 HTML 중급 강좌를 마무리합니다. 다음 CSS 중급에서 이런 레이아웃을 잡는 방법 등을 다뤄보도록 하겠습니다. 다음 강의에서 뵙겠습니다.

요점 정리
  • table 요소를 도표의 의미가 아닌 용도에 쓰는 것, 그리고 Table 레이아웃으로 인해 HTML 문서안에 외형을 담고 있는 것은 웹 표준 위배.
  • table 요소는 기본적으로 접근성이 떨어짐. 또한 내용이 비 순차적으로 담기면서 접근성이 떨어질 뿐 아니라, 의미적 구조도 깨짐.
  • 소스가 불필요하게 길어질 수 있기 때문에, 추후 소스 수정 등의 유지보수에 어려움.
  • 테이블의 레이아웃은 브라우저마다 미묘하게 다를 수 있기 때문에, 크로스 브라우징이 어려움.
  • 여러 해상도를 지원하는 반응형 웹, 가변적 레이아웃을 적용하기는 사실 상 불가능.

이 글이 유용하셨다면 친구들에게 공유 해주세요.