테이블은 너무 추악하고 부풀어 있어서 간단한 내용만 표시하더라도......즉, 지난 몇 년 동안은 3~5개를 넘지 않습니다.W3C는 모두가 중요하다고 동의하지만 모두가 좋아하지 않는 조직입니다. 공식 웹 사이트는 추악합니다. 이렇게 못생긴 사이트는 평생 본 적이 없을 것 같지만, 이 사이트는 W3C 표준을 모두 통과한 몇 안 되는 사이트 중 하나입니다. 이것은 그들의 사이트가 구문, 구조 및 접근성 측면에서 완벽하지만 여전히 추악하다는 것을 의미합니다. 하지만 농담입니다. W3C가 중요하지 않았다면 Microsoft는 모든 웹 개발 엔지니어를 절망적인 상황으로 몰아넣었을 것입니다. 넷스케이프가 사라진 후 열반에 빠진 파이어폭스가 다행이고, 파이어폭스가 탄생한 후 오페라가 최소한 도덕적 지원을 받은 것은 다행입니다. 드디어 큰 형님이 나와서 정리해준 거죠. 스티브 잡스가 돌아왔을 때 애플은 예전의 영광을 되찾았습니다. 이렇게 해서 전 세계에 Safari라는 브라우저가 생겼습니다. 이 모든 것이 W3C가 정말 필요한 이유입니다.
W3C는 표를 텍스트, 텍스트 서식, 이미지, 링크, 양식 및 기타 표를 보관하는 데 사용할 수 있다고 말합니다. 그러나 표는 웹이 비시각적 장치로 표시될 때 문제가 될 수 있다는 이유로 단순히 페이지를 생성하는 데만 사용해서는 안 됩니다(단순히 문서 내용을 배치하는 수단으로만 사용해서는 안 됩니다). 표는 스크린 리더와 점자 브라우저를 지정합니다. 또한 표를 사용하면 대형 디스플레이 장치에서 사용자가 좌우로 스크롤해야 합니다. 그렇기 때문에 웹 디자이너는 표 대신 CSS를 사용해야 합니다. 표는 W3C HTML 4.01에 정의되어 있습니다. W3C가 이를 언급한 것은 1999 65438 + 2월 24일입니다. 당시에는 CSS가 탄생했지만 이를 사용하는 사람은 많지 않았습니다. 원래 웹은 지금과 같은 플랫폼이 아닌 네트워크 버전의 문서와 같았고 레이아웃에 대해 크게 고민할 필요가 없었기 때문입니다. 인터넷의 첫 번째 버블이 형성되면서 수많은 포털이 등장했고, 그 포털이 바로 테이블이었습니다.
홈페이지는 전체 신문의 모든 페이지를 이어 붙인 것보다 더 복잡했기 때문에 레이아웃의 조상인 테이블은 콜스팬과 롤스팬의 조합으로 거의 모든 복잡성을 구현할 수 있었기 때문에 유용하게 사용되었습니다.
이 레이아웃 스타일은 21세기 초, 특히 중국에서 여전히 매우 인기가 있습니다. 사람들은 무의식적으로 세상의 아름다움에 취해 한 페이지에 넣을 수 있는 모든 것을 첫 페이지에 밀어 넣었습니다. 식탁은 마치 옛날의 집사와 같아서 모든 것을 정리해 놓았지만 적어도 그 정도는 정리되어 있었습니다. 그러나 이러한 웹은 마침내 역겨운 지경에 이르렀습니다. 검색, RSS 피드, 블로그로 대표되는 개인화된 웹 페이지의 등장으로 사람들은 거의 모든 포털의 홈페이지를 방문하지 않고도 정보에 더 많이 접근할 수 있게 되었고, 더 단순한 레이아웃, 더 밝은 색 구성, 큰 아이콘과 큰 배너를 갖춘 신선하고 가벼운 스타일의 웹 페이지가 등장했습니다. 동시에 이 시기에 CSS는 매우 성숙해졌고, Firefox, Opera, Safari 및 기타 브라우저가 IE보다 W3C 표준을 훨씬 더 잘 준수하면서 사람들은 마침내 CSS의 힘을 깨달았습니다. CSS는 레이아웃 측면에서 핵심이 박스이기 때문입니다.
모델, CSS를 붙일 컨테이너 객체를 찾아야 합니다.
Div는 본질적으로 Box에 가장 적합한 프로토타입이기 때문에 한편으로는 운이 좋은 편입니다. 의미적으로 Div는 페이지의 한 영역을 나타냅니다. 모양으로 보면 정사각형입니다. 더 중요한 것은 처음부터 표가 불공평하게 취급되는 것처럼 보이지 않는다는 점입니다. 왜 불공평할까요? W3C는 표에 대한 레이아웃을 권장하지 않고 대신 CSS를 사용해야 한다고만 말합니다. Table이 CSS를 지원하지 않는다는 뜻인가요? 네, 물론입니다. 게다가 오래된 HTML 객체로서 표는 매우 중요한 역할을 하기 때문에 모든 브라우저에서 CSS 지원을 포함하여 표를 완벽하게 지원합니다. 사람들은 Div를 받아들일 때 표도 상자이며 여러 셀이 있는 상자라는 사실을 잊어버리는 것 같습니다. 전반적으로 Table은 박스 모델이라는 점에서 Div와 다르지 않으며, 여백을 제외하면 셀도 여전히 박스이며, 이는 이해해야 합니다. Div는 말할 필요도 없이 훌륭하지만 사람들이 Div+CSS라고 하면 Table은 CSS가 될 수 없다는 것을 암시하는 것 같은데, 이는 큰 오해입니다.
Table은 Div가 지원하는 모든 CSS 속성을 지원합니다. 사실 Div가 큰 인기를 끌기 전, Div의 얼리 어답터들은 Table이 할 수 있다면 Div도 할 수 있다고 확신했고, 그들의 말에 대한 대가를 치렀습니다. Div에서 세로 중심을 맞추려고 시도한 사람들은 제가 무슨 말을 하는지 알고 있고, IE6에서 100% Div 레이아웃을 시도한 사람들은 제가 무슨 말을 하는지 더 잘 알고 있습니다. 100% 높이 문제, 여러 Div 사이의 너비 조정 문제, Div + CSS 디자인에 종사하는 모든 사람이 직면하게 될 것이라고 생각합니다. 이 점에서 테이블의 장점은 그것이 좋기 때문이 아니라 구식이고 아니기 때문입니다. 브라우저가 감히 무시하지 못하기 때문이기도 하지만, 동일한 특성을 가지고 있기 때문이기도 합니다. 사람들은 데이터를 깔끔하게 표시하고 싶었기 때문에 Table을 만들었습니다. 그런데 왜 Table은 나중에 나쁜 평판을 얻게 되었을까요?
코드가 부풀려져 있다: 최소한 적어두어야 한다
페이지 렌더링 성능 문제: 브라우저는 렌더링 전에 전체 테이블을 전체적으로 읽어야 한다.
검색 엔진 최적화에 좋지 않음:검색 엔진은 콘텐츠와 수정자를 분리하는 것을 좋아합니다.
접근성이 좋지 않음:스크린 리더와 점자 브라우저는 표의 콘텐츠를 잘 이해하지 못합니다.
시맨틱:시맨틱 웹이 필요합니다.
기사 1:부풀려진 코드.
우선, 표에서 CSS로 정의할 수 없는 유일한 속성은 셀 간격, 셀 패딩뿐이고 나머지는 CSS를 사용할 수 있고 사용해야 하므로
기사 2:페이지 렌더링 성능 문제
1.6G의 CPU와 1G의 RAM을 갖춘 '04 노트북을 사용하고 있습니다. 구성에서는 테이블 레이아웃과 Div 레이아웃 간의 페이지 렌더링 속도 차이가 보이지 않습니다. 실제로 차이가 있더라도 네트워크 자체에 비해 지연 시간은 무시할 수 있는 수준입니다.
세 번째: 검색 엔진 최적화에 좋지 않음
앞서 언급한 것처럼 테이블 속성 대신 가능한 한 CSS를 사용하면 생성되는 코드가 Div와 크게 다르지 않아 검색 엔진이 차별을 하게 됩니다
세 번째: 접근성이 좋지 않음
이것은 Table의 내재적인 결함이지만, 대부분의 Div+CSS 팬들은 그렇지 않은 것 같습니다.
다섯째: 불충분한 의미론
시맨틱 웹은 광범위하며 표와 Div에만 집착하는 것이 아닙니다. W3C조차도 표 형식의 데이터를 표시하는 데에만 Table을 사용할 수 있다고 말하지 않습니다. 테이블 의미론에 집착하는 많은 사람들은 진정한 의미론인 HTML 5를 기다리는 편이 나을 수도 있습니다.
이 글의 목적은 Div를 버리고 Table로 뛰어들라는 것이 아닙니다. 반대로 Div가 디자인 요구 사항을 충족할 수 있다면 여전히 Div를 선호하지만, 그렇다고 해서 Table을 피할 필요는 없으며, 반대 극단으로 갈 필요도 없습니다. Div로 쉽게 달성할 수 없는 많은 디자인을 Table로 여전히 달성할 수 있습니다. 물론 어떤 것을 사용하든 CSS를 사용하여 콘텐츠와 장식을 분리하세요. Div+CSS와 Table+CSS 모두 합법적인 디자인이므로 더 간단한 것을 사용하세요. 제 경험상, 추가하려는 콘텐츠의 서식을 예측할 수 있고 추가하려는 콘텐츠의 표시 서식을 완벽하게 제어할 수 있는 경우;; 추가하려는 콘텐츠가 유동적이어서 서식을 예측할 수 없을 때 Div+CSS를 사용해야 합니다. 페이지가 축소되는 것을 원하지 않는다면 표+CSS를 사용하는 것이 안전합니다.