회사에서 페이지에 들어갈 데이터 테이블을 만드는 작업을 하였다. 데이터를 표현하기 위해서는 당연히 table태그를 사용하는 것이 바람직 하다고 생각한다. 그러나 여기저기서 주워 듣기로 이제 table태그를 사용하는 것은 지양하는 추세라고 하길래 왜그런지 그 이유를 찾아보았다.

결론부터 이야기 하자면 의미론적 데이터 (semantic data)를 표현하기 위해서는 table태그를 사용하는 것이 바람직한 사용이라고 한다. 즉, table 태그를 지양하기 보다는 의미론적으로 알맞은 곳에 사용하라는 의미이다.

그럼 table 태그를 사용하지 말라는 이야기는 왜 나온걸까? 바로 layout을 구성하는 데에 사용하지 말라는 의미이다. 간혹 타 웹페이지를 분석하기 위해 개발자 도구를 켜서 HTML을 분석하다 보면 페이지 전체의 레이아웃을 table로 구성한 경우를 볼 수 있다. 사실 나는 이해가 가지 않았다. 우리에게는 div라는 division의 의미를 지닌 태그가 떡하니 있는데 왜 table을 레이아웃으로 사용하였을까 하고 말이다.

뭐 어찌 되었든, 과거에는 아무래도 레이아웃을 위한 css 옵션도 충분하지 않았을 거고 또 웹사이트 자체고 매우 심플하게 구성되어 있었기 때문에 어찌보면 table 태그를 사용해 충분히 쉽게 화면을 구성할 수 있었을 것 같다.

그러나 시대가 변하면서 웹사이트의 구조는 복잡해져가고, 또 다양한 디바이스를 지원하게 됨에 따라 반응현 웹사이트를 구축해야 하는 등의 변화가 아무래도 table 태그만을 사용해서 레이아웃을 구성하기에 쉽지 않은 상황이 되었다. 만약 table태그를 사용해 이런 복잡한 레이아웃을 구성해야 한다면 마크업 코드는 더욱 복잡해 지게 될거고 이는 곧 만만치 않은 유지보수 비용을 불러 일으킬 것이다. 이것이 바로 table을 레이아웃으로 사용하면 안되는 가장 일반적인 이유이다.

두번째 이유는, 앞서 간단히 언급하였지만 의미론적 사용을 지향하기 위해서이다. 이 주제에 대해 알아볼 때마다 Sementic이라는 단어가 많이 나온다. table 데이터는 Sementic한 데이터를 표현하기 위해서 사용해야 한다던가, HTML 태그에도 각각의 용도가 있기 때문에 이러한 Sementic한 부분을 고려하여 태그를 사용하는 것이 옳다는 것이다. 우리가 일반적으로 div를 화면의 구성을 잡을 때 사용하고, ul을 어떤 목록을 표현하기 위해 사용하는 것 처럼 말이다. 따라서 table은 그 이름대로 데이터를 표현하기 위한 table로써의 용도로만 사용하는 것이 옳다.

마지막으로 스택오버플로우에서 본 짧은 답글을 소개하고 글을 마친다. 요약하자면 우리가 table태그를 sementic을 고려하여 사용하는 이유는 바로 프로페셔널한 자세 그 이상 그 이하의 의미도 아니라는 것이다.

Here's my programmer's answer from a simliar thread

Semantics 101

First take a look at this code and think about what's wrong here...

Now apply this to document markup. If your document needs to present tabular data, then the appropriate tag would be <table>. If you place navigation into a table however, then you're misusing the intended purpose of the <table> element. In the second case, you're not presenting tabular data -- you're (mis)using the <table> element to achieve a presentational goal.

Conclusion

Will visitors notice? No. Does your boss care? Maybe. Do we sometimes cut corners as programmers? Sure. But should we? No. Who benefits if you use semantic markup? You -- and your professional reputation. Now go and do the right thing.

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
The problem, of course, is that a bike is not a car. The car class is an inappropriate class for the bike instance. The code is error-free, but is semantically incorrect. It reflects poorly on the programmer.

Semantics 102

https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html