웹표준을 지키려면 <table> 태그를 사용해서는 안된다는 오해

웹표준 준수와 의미론적 마크업이 새로운 패러다임이 되면서 퍼진 몇 가지 왜곡된 사실이 있습니다. 그 중에서도 가장 잘 알려진 것은 <table> 태그의 사용을 금기로 삼는 것입니다. 언젠가부터 퍼지기 시작한 이러한 오해는 끝내 <table> 태그를 사용한 모든 마크업에 전근대적이라는 오명을 씌우게 되었습니다.

그럼에도 이 주제에 대하여 기술적으로 명확히 규명한 글은 찾아보기 어려운 것 같습니다. 이에 금번 글에서는 <table> 태그를 사용해야 하는 상황이 분명히 있음을 기술문서를 통해 규명하고, 이를 통해 <table> 태그에 덧씌워진 오명을 불식시키고자 합니다.

 

HTML5에서 <table> 태그의 올바른 사용목적

<table> 태그는 W3C에서 정한 HTML 4.01은 물론 HTML 5에도 수록되어 있습니다. 사용해서는 안되는 태그라면 적어도 Deprecated라도 되어있어야 하겠지만, 실제로는 그렇지 않습니다. <table> 태그에 관한 설명은 HTML5 Specification의 4.9 Tabular Data에 수록되어 있습니다. 첫 번째 장인 4.9.1에서는 <table> 태그에 관하여 설명하는데, 주목해야 할 부분은 도표 아래 설명 첫 줄입니다.

table 요소는 1차원보다 큰 자료들을 표의 형태 안에 넣어 표시한다.
The table element represents data with more than one dimension, in the form of a table.

1차원보다 큰 자료들이라는 표현에 방점을 둘 필요가 있습니다. 표는 대게 행과 열의 2차원으로 구성된 자료들을 표현하는 데에 사용합니다. 뿐만 아니라 3차원 이상의 자료들도 여러 행이나 열을 묶는다면 표의 형태로 표현할 수 있습니다. 이처럼 다차원의 정보를 표의 형태로 표현하는 것이 <table> 태그가 존재하는 의미이자 목적입니다.

의미론적 마크업은 모든 태그를 목적과 의미에 맞게 사용하는 것입니다. 따라서 <table> 태그을 공식적인 기술문서에서 서술한 목적에 맞게 다차원의 자료들을 표의 형태로 표현하는 데에 사용했다면, 그것은 문제 없는 마크업이라고 할 수 있습니다.

그렇다면 어째서 이러한 왜곡된 금기가 만들어진 것일까요? 원인은 바로 테이블 기반 레이아웃에 있습니다.

 

테이블 배제 웹디자인(Table-Based Layout)가 만들어낸 왜곡

과거에는 <table> 태그를 원래 목적과 다르게 레이아웃을 잡는데에 사용하였습니다. 이렇게 만들어진 레이아웃을 보통 테이블 기반 레이아웃(Table-based layout)이라고 합니다. 이러한 레이아웃 구성에서는 하나의 맥락으로 연결된 콘텐츠라 할지라도 화면에서 분리되어 보인다면 이들을 여러 개의 <tr>과 <td> 태그 안에 쪼개어 놓게 됩니다. 결코 의미론적 마크업의 목적을 이룰 수 없게 됩니다.

이 때문에 <table> 태그를 화면 레이아웃을 조정할 목적으로 사용하는 것을 피하는 웹 디자인 방법(a web design method that avoids the use of HTML tables for page layout control purposes)이 등장하기 시작했습니다. 이것이 테이블 배제 웹디자인(Tableless web design)의 정의입니다.

여기서 주목해야 할 표현은 “화면 레이아웃을 조정할 목적으로”라는 대목입니다. 의미론적 마크업에서 <table> 태그를 사용해서는 안된다는 금언은 레이아웃을 잡을 때에 한정된 지침이며, 콘텐츠 내용을 마크업으로 구성할 때의 지침이 아닙니다. 콘텐츠가 다차원의 자료로 구성되어 있다면, <table> 태그는 여전히 유용한 가치를 지니고 있습니다.

 

새로운 전기를 맞은 모바일 화면에서의 <table> 태그

이처럼 의미론적 마크업 측면에서 <table> 태그의 오명은 벗길 수 있었지만, <table>의 위기가 끝난 것은 아닙니다. 바야흐로 모바일 화면에 적합한 콘텐츠 구성의 중요성이 떠오르고 있기 때문입니다. 모바일 디바이스의 디스플레이는 세로높이가 가로폭보다 길다는 점에서, 가로폭이 더 길었던 데스크탑 PC나 노트북의 디스플레이와는 차이가 있습니다.

이 때문에 최근에는 콘텐츠를 표현할 때 표의 형태 자체를 피하는 움직임이 생겨나고 있습니다. 콘텐츠를 표의 형태로 표현하면, 다차원의 정보를 한 눈에 보여주기 위해 면적이 다소 넓어집니다. 때문에 좁은 모바일 화면에서 표가 표시되면 좌우스크롤이 생기거나 의도와 다르게 표의 면적이 축소되어 결과적으로 가독성을 떨어뜨리게 됩니다. 자연스럽게 <table> 태그가 모바일 웹에서 적합하지 않은 태그라는 인식도 생겨나기 마련입니다.

이는 어느 정도 타당성을 가진 지적이기는 하나, 절제된 정보들을 간결하게 편집할 수 있다면 <table> 태그는 여전히 정보를 표현하는 유용한 도구가 될 수 있습니다. 아래 스크린샷은 다음 금융의 해외증시 모바일 화면입니다. 각국의 증시현황을 4가지 정보로 간결하게 표로 구성하고 있으며, 실제 마크업에서도 <table> 태그를 사용하고 있습니다.

다음 금융 해외증시 화면에 사용된 표 형태의 콘텐츠 구성

인류가 다차원의 정보를 표라는 형태를 이용해 표현하기 시작한 것은 분명하지 않습니다. 그러나 기원후 2세기 경에 이미 프톨레마이오스가 삼각함수표를 정리했다고 하니, 적어도 그 역사는 수 천년을 거슬러 올라갈 것입니다. 그와 같이 표는 오랫동안 인류의 곁에서 수많은 정보들을 효과적으로 정리해준 고마운 도구입니다. 그리고 앞으로도 활약할 곳이 많습니다. 쉽게 버리고 배제하지 맙시다!

 

카카오톡

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

*

다음의 HTML 태그와 속성을 사용할 수 있습니다: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>