HTML 레이아웃에 테이블을 사용하지 않는 이유

질문 : HTML 레이아웃에 테이블을 사용하지 않는 이유는 무엇입니까?

---

HTML의 레이아웃에 테이블을 사용해서는 안된다는 일반적인 의견 인 것 같습니다.

왜?

나는 이것에 대한 좋은 주장을 본 적이 없다. 일반적인 대답은 다음과 같습니다.

• 콘텐츠를 레이아웃에서 분리하는 것이 좋습니다.
  그러나 이것은 잘못된 주장입니다. 진부한 생각 . 레이아웃에 테이블 요소를 사용하는 것이 테이블 형식 데이터와 거의 관련이 없다는 것이 사실이라고 생각합니다. 그래서 뭐? 내 상사가 신경 쓰나요? 내 사용자가 신경 쓰나요?
  
  웹 페이지 관리를 유지해야하는 저나 동료 개발자 일 것입니다. 테이블을 유지 관리하기가 어렵습니까? 테이블을 사용하는 것이 div와 CSS를 사용하는 것보다 쉽다고 생각합니다.
  
  그건 그렇고 ... 왜 div 또는 span을 사용하여 레이아웃과 테이블에서 콘텐츠를 잘 분리하지 않습니까? div만으로 좋은 레이아웃을 얻으려면 중첩 된 div가 많이 필요합니다.
• 코드의 가독성
  나는 그것이 반대라고 생각합니다. 대부분의 사람들은 HTML을 이해하고 CSS를 이해하는 사람은 거의 없습니다.
• SEO가 테이블을 사용하지 않는 것이 좋습니다
  왜? 아무도 그것이 사실이라는 증거를 보여줄 수 있습니까? 아니면 SEO 관점에서 테이블이 권장되지 않는다는 Google의 진술?
• 테이블이 느립니다.
  추가 tbody 요소를 삽입해야합니다. 이것은 최신 웹 브라우저의 땅콩입니다. 표를 사용하면 페이지 속도가 크게 느려지는 몇 가지 벤치 마크를 보여주세요.
• 테이블 없이는 레이아웃 점검이 더 쉽습니다. css Zen Garden을 참조하십시오.
  업그레이드가 필요한 대부분의 웹 사이트에는 새 콘텐츠 (HTML)도 필요합니다. 새 버전의 웹 사이트에 새 CSS 파일 만 필요한 시나리오는 거의 없습니다. Zen Garden은 멋진 웹 사이트이지만 약간 이론적입니다. CSS 의 오용 은 말할 것도 없습니다.

 

 

나는 테이블 대신 divs + CSS를 사용하는 좋은 주장에 정말로 관심이 있습니다.

반응형

답변

---

나는 당신의 주장을 차례로 살펴보고 그 오류를 보여 주려고 노력할 것입니다.

콘텐츠와 레이아웃을 분리하는 것은 좋지만 이것은 잘못된 주장입니다. Cliché Thinking.

HTML이 의도적으로 설계 되었기 때문에 전혀 오류가 아닙니다. 요소의 오용은 완전히 의문의 여지가 없을 수도 있지만 (결국 새로운 관용구가 다른 언어로도 개발 됨) 부정적인 영향을 줄 수 있어야합니다. <table> 요소를 잘못 사용하는 것에 대한 주장이 없더라도 브라우저 공급 업체가 요소에 특별한 처리를 적용하는 방식 때문에 내일이있을 수 있습니다. 결국 그들은 " <table> 요소가 표 형식 데이터 전용"이라는 사실을 알고 있으며이 사실을 사용하여 렌더링 엔진을 개선 할 수 있습니다. 프로세스에서 <table> 작동하는 방식을 미묘하게 변경하여 이전에 잘못 사용 된 사례를 깨뜨릴 수 있습니다.

그래서 뭐? 내 상사가 신경 쓰나요? 내 사용자가 신경 쓰나요?

의존합니다. 상사가 머리가 뾰족합니까? 그렇다면 그는 신경 쓰지 않을 수도 있습니다. 그녀가 유능하면 사용자 가 .

웹 페이지 관리를 유지해야하는 저나 동료 개발자 일 것입니다. 테이블을 유지 관리하기가 어렵습니까? 테이블을 사용하는 것이 div와 CSS를 사용하는 것보다 쉽다고 생각합니다.

대부분의 전문 웹 개발자는 당신을 반대하는 것 같습니다

^{[ 인용 필요 ]} . 테이블 이 실제로 유지 관리하기 어렵다는 것은 분명합니다. 레이아웃에 테이블을 사용한다는 것은 회사 레이아웃을 변경하는 것이 실제로 모든 페이지를 변경한다는 것을 의미합니다. 이것은 매우 비쌀 수 있습니다. 반면, 의미 상 의미있는 HTML을 CSS와 결합하여 현명하게 사용하면 이러한 변경 사항이 사용 된 CSS 및 그림에 국한 될 수 있습니다.

그건 그렇고 ... 왜 div 또는 span을 사용하여 레이아웃과 테이블에서 콘텐츠를 잘 분리하지 않습니까? div만으로 좋은 레이아웃을 얻으려면 중첩 된 div가 많이 필요합니다.

깊게 중첩 된 <div> 는 테이블 레이아웃과 마찬가지로 안티 패턴입니다. 좋은 웹 디자이너는 많은 것을 필요로하지 않습니다. 반면에 이러한 딥 중첩 div조차도 테이블 레이아웃의 문제가 많지 않습니다. 실제로 콘텐츠를 부분적으로 논리적으로 분할하여 의미 구조에 기여할 수도 있습니다.

코드의 가독성은 그 반대라고 생각합니다. 대부분의 사람들은 HTML을 이해하고 CSS를 거의 이해하지 못합니다. 더 간단합니다.

"대부분의 사람들"은 중요하지 않습니다. 전문가가 중요합니다. 전문가의 경우 테이블 레이아웃은 HTML + CSS보다 더 많은 문제를 만듭니다. 이것은 메모장이 대부분의 사람들에게 더 간단하기 때문에 GVim이나 Emacs를 사용하지 말아야한다고 말하는 것과 같습니다. 또는 MS Word가 대부분의 사람들에게 더 간단하기 때문에 LaTeX를 사용해서는 안됩니다.

SEO가 테이블을 사용하지 않는 것이 좋습니다

이것이 사실인지 모르겠고 이것을 인수로 사용하지 않을 것이지만 논리적입니다. 검색 엔진은 관련 데이터를 검색합니다. 물론 표 형식 데이터는 관련성이있을 수 있지만 사용자가 검색하는 것은 거의 없습니다. 사용자는 페이지 제목 또는 유사한 눈에 띄는 위치에 사용 된 용어를 검색합니다. 따라서 필터링에서 표 형식 콘텐츠를 제외하여 처리 시간 (및 비용!)을 큰 요인으로 줄이는 것이 합리적입니다.

테이블이 느립니다. 추가 tbody 요소를 삽입해야합니다. 이것은 최신 웹 브라우저의 땅콩입니다.

추가 요소는 테이블 속도가 느려지는 것과 관련이 없습니다. 반면에 테이블의 레이아웃 알고리즘은 훨씬 더 어렵습니다. 브라우저는 콘텐츠 레이아웃을 시작하기 전에 전체 테이블이로드 될 때까지 기다려야하는 경우가 많습니다. 또한 레이아웃 캐싱이 작동하지 않습니다 (CSS는 쉽게 캐싱 될 수 있음). 이 모든 것은 이전에 언급되었습니다.

표를 사용하면 페이지 속도가 크게 느려지는 몇 가지 벤치 마크를 보여주세요.

불행히도 벤치 마크 데이터가 없습니다. 이 주장에 과학적 엄격함이 부족하다는 것이 옳기 때문에 나도 관심을 가질 것입니다.

업그레이드가 필요한 대부분의 웹 사이트에는 새 콘텐츠 (html)도 필요합니다. 새 버전의 웹 사이트에 새 CSS 파일 만 필요한 시나리오는 거의 없습니다.

전혀. 콘텐츠와 디자인을 분리하여 디자인 변경을 단순화 한 여러 사례를 작업했습니다. 여전히 일부 HTML 코드를 변경해야하는 경우가 많지만 변경 사항은 항상 훨씬 더 제한적입니다. 또한 때때로 설계 변경은 동적으로 이루어져야합니다. WordPress 블로그 시스템에서 사용하는 것과 같은 템플릿 엔진을 고려하십시오. 테이블 레이아웃은 말 그대로이 시스템을 죽일 것입니다. 나는 상용 소프트웨어에 대한 유사한 사례를 작업했습니다. HTML 코드를 변경하지 않고 디자인을 변경할 수 있다는 것이 비즈니스 요구 사항 중 하나였습니다.

또 다른 한가지. 테이블 레이아웃은 웹 사이트의 자동화 된 구문 분석 (화면 스크래핑)을 훨씬 더 어렵게 만듭니다. 결국 누가 그렇게하나요? 나는 놀랐다. 해당 서비스가 데이터에 액세스 할 수있는 WebService 대안을 제공하지 않는 경우 화면 스크래핑이 많은 도움이 될 수 있습니다. 저는 이것이 슬픈 현실 인 생물 정보학에서 일하고 있습니다. 최신 웹 기술과 웹 서비스는 대부분의 개발자에게 도달하지 않았으며 종종 화면 스크래핑이 데이터 가져 오기 프로세스를 자동화하는 유일한 방법입니다. 많은 생물학자가 여전히 이러한 작업을 수동으로 수행하는 것은 놀라운 일이 아닙니다. 수천 개의 데이터 세트 용.

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