태그 보관물: CSS layout

Table 태그

언제나 그렇듯이 보통때는 남의 말에 신경을 잘안쓰다가도 내가 관심있는 부분에는 신경이 쓰이기 마련입니다.
요즘 웹 사이트 최적화에 신경을 많이 쓰고 있어서는 그런지 몰라도 최적화에 관련된 업무메일이나 등등이 많이 나오곤 하는데요…

CSS layout이 어느정도 보편화가 되어서 그런걸까요?  어떤 사람들로 부터 테이블 태그를 이용하면 사이트가 느려지니까 사용하지 마라 였습니다.

일단 제가 생각하는 마크업 방식에 있어서의 웹 표준의 정의를 한번 말씀드려보면

각각의 HTML(XHTML) 태그에는 그에 맞는 사용법과 의미가 담겨져 있다. 그 사용법에 맞게 태그를 구성하는것을 Semantic markup 이라고 할수있다.

리스트는 ul, ol, li로 문장은 p 제목은 h1~h6  으로 각태그의 역할에 맞게 사용하자는거겠죠? 뭐 어렵지 않습니다.

이런 측면에서 봤을때 Table도 분명히 자기 자신의 역할이 있겠죠? Table 의 역할을 알아 봅시다. (http://dev.w3.org/html5/spec/Overview.html#the-table-element)

The

<a href="http://dev.w3.org/html5/spec/Overview.html#the-table-element">table</a>

element represents data with more than one dimension, in the form of a table.

HTML5 에서의 table의 역할을 기술한것인데요. 대충보면 Table 앨리먼트는 표 양식에서의 하나 이상의 데이터 구성을 보여주기 위한것이다. 이다 정도 되려나요?
이문장에서도 알 수 있다시피 테이블 태그는 사용되면 안되는 태그는 아닌것 같아요. 사용되는 안되면 태그라면 사라졌겠죠 🙂

제가 섯불리 예상하자면, “table layout을 사용 하지 말자”를 오해한게 아닌가 싶기도 하네요..

물론 table layout 에대해서도 언급이 되어있습니다.

Tables must not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

테이블 레이아웃을 사용하면 툴(컴퓨터겠죠?) 표로 인식 하고 테이터를 추출 하기 때문에 혼란스럽고 스크린리더 같은 접근성도구에서 페이지를 이동하기가 어려워진다 뭐 이런 얘기 같은데요.. (자 영어 공부합시다.)

뭐  암튼 table layout 은 사용하면 안된다는것이 명확하게 써있네요..

근데 저는 왜 그런 얘기를 들었을까요…

table 은 일단 브라우저에서 랜더링 해주기 위해 다른 태그에 비해  좀 더 로직이 추가 되게 됩니다. 각 셀의 넓이를 알맞게 맞춰 주기 위한 노력을 한다고 하면 이해가 쉬울려나요? 이 부분은 table-layout 을 정의해주고 각 셀의 크기를 적절하게 미리 계산해 정의하는 방법으로 해결 할 수 있습니다.

또한 table 안에 table 을 중첩 사용하면 랜더링이 느려진다는 얘기도 들었는데 요즘 같은 컴퓨터에서 사실 얼마나 차이나겠어요 =_=; 관련자료 알려주심감사…
차이가 있다해도 표를위한 table 사용에서는 table 중첩 사용은 거의 하지 않죠…

저같으면 표는 물론이고 달력이나, 게시판의 리스트나 정보 등에서 사용될 수 있지 않을까 싶어요…
table 사용한다고 무작정 머라하지 마세요~ 열라고민해서 태그 짠 Markup개발자 상처 받아요.