웹 페이지 레이아웃에서 테이블을 피하는 이유

CSS는 웹 페이지 디자인을 만드는 가장 좋은 방법입니다.

특히 테이블을 사용하여 멋진 웹 페이지 레이아웃을 만드는 데 익숙한 경우 CSS 레이아웃을 작성하는 방법이 까다로울 수 있습니다. HTML5 는 레이아웃 테이블을 허용하지만 좋은 아이디어는 아닙니다.

테이블에 액세스 할 수 없습니다.

검색 엔진과 마찬가지로 대부분의 화면 판독기는 HTML에 표시된 순서대로 웹 페이지를 읽습니다. 화면 판독기가 구문 분석하기 위해 테이블을 매우 힘들게 만들 수 있습니다. 이는 테이블 레이아웃의 내용이 왼쪽에서 오른쪽 및 위에서 아래로 읽을 때 선형이더라도 항상 의미가 없기 때문입니다. 또한 중첩 테이블을 사용하면 테이블 셀에 다양한 범위가 있으므로 페이지를 파악하기가 어려울 수 있습니다.

이것이 HTML5 사양 에서 레이아웃 에 대한 테이블 과 HTML 4.01 에서 레이아웃을 허용하지 않는 이유 권장하는 이유입니다. 액세스 가능한 웹 페이지를 사용하면 더 많은 사람들이이를 사용할 수 있으며 전문 디자이너의 표시가됩니다.

CSS를 사용하면 섹션을 페이지의 왼쪽에 속한 것으로 정의 할 수 있지만 마지막으로 HTML에 배치 할 수 있습니다. 그런 다음 화면 판독기와 검색 엔진은 모두 중요 부분 (내용)을 먼저 읽고 덜 중요한 부분 (탐색)을 마지막으로 읽습니다.

테이블이 까다 롭습니다.

웹 편집기를 사용하여 테이블을 만들더라도 웹 페이지는 여전히 복잡하고 유지 관리가 어려울 것입니다. 가장 간단한 웹 페이지 디자인을 제외하고 대부분의 레이아웃 테이블은 많은 특성과 중첩 테이블을 필요로합니다.

테이블을 만드는 것은 쉬운 일이지만 보행을 유지해야합니다. 6 개월이 지나면 왜 테이블을 중첩했는지 또는 얼마나 많은 셀이 연속으로 있는지 등을 기억하기가 쉽지 않을 수 있습니다. 또한 웹 페이지를 팀 구성원으로 유지 관리하는 경우 모든 사람에게 테이블 작동 방식을 설명하거나 변경해야 할 때 추가 시간이 필요하다고 예상해야합니다.

CSS는 복잡 할 수도 있지만 프레젠테이션을 HTML과 별도로 유지하므로 장기적으로 유지 관리가 훨씬 쉬워집니다. CSS 레이아웃을 사용하면 하나의 CSS 파일을 작성하고 모든 페이지 스타일을 그 방식으로 볼 수 있습니다. 사이트의 레이아웃을 변경하려면 레이아웃을 업데이트하기 위해 표를 업데이트하기 위해 한 번에 하나씩 모든 페이지를 검토하지 않고 하나의 CSS 파일과 전체 사이트 채널을 변경하기 만하면됩니다.

테이블이 유연하지 않음

백분율 너비의 테이블 레이아웃을 만들 수는 있지만로드 속도가 느리며 레이아웃 모양이 크게 달라질 수 있습니다. 그러나 테이블에 대해 지정된 너비를 사용하면 자신과 다른 크기의 모니터에서는 모양이 좋지 않은 매우 까다로운 레이아웃이 생깁니다.

많은 모니터, 브라우저 및 해상도에서보기 좋은 유연한 레이아웃을 만드는 것은 비교적 쉽습니다. 실제로 CSS 미디어 쿼리를 사용하면 크기가 다른 화면에 대해 별도의 디자인을 만들 수 있습니다.

중첩 된 테이블 같은 디자인에 대한 CSS보다 느리게로드

테이블을 사용하여 멋진 레이아웃을 만드는 가장 일반적인 방법은 테이블을 "중첩"하는 것입니다. 즉, 하나 이상의 테이블이 다른 테이블에 배치됩니다. 중첩 된 테이블이 많을수록 웹 브라우저가 페이지를 렌더링하는 데 더 오래 걸립니다.

대부분의 경우 테이블 레이아웃은 CSS 디자인보다 더 많은 문자를 사용하여 만듭니다. 그리고 문자 수가 적 으면 다운로드가 적습니다.

테이블은 검색 엔진 최적화를 해칠 수 있습니다.

가장 일반적인 테이블 생성 레이아웃에는 페이지 왼쪽에 탐색 모음이 있고 오른쪽에는 기본 내용이 있습니다. 표를 사용하는 경우 HTML에 표시되는 첫 번째 콘텐츠가 왼쪽 탐색 바이어야합니다 (일반적으로). 검색 엔진 은 콘텐츠를 기반으로 페이지를 분류하고 많은 엔진은 페이지 상단에 표시된 콘텐츠가 다른 콘텐츠보다 중요하다고 판단합니다. 따라서 왼쪽 탐색 기능이있는 페이지가 먼저 탐색 기능보다 중요하지 않은 것으로 보입니다.

CSS를 사용하면 중요한 내용을 HTML에 먼저 넣은 다음 CSS를 사용하여 디자인에 배치해야 할 위치를 결정할 수 있습니다. 즉, 검색 엔진은 디자인이 페이지의 아래쪽에 위치하더라도 중요한 내용을 먼저 볼 수 있습니다.

테이블 항상 인쇄하지 마세요.

많은 테이블 디자인은 프린터가 너무 넓기 때문에 잘 인쇄되지 않습니다. 따라서 브라우저를 맞추기 위해 테이블을 잘라내어 아래 섹션을 인쇄하면 페이지가 매우 엉망이됩니다. 때로는 괜찮아 보이는 페이지로 끝나기도하지만 전체 오른쪽이 누락되었습니다. 다른 페이지는 여러 시트의 섹션을 인쇄합니다.

CSS를 사용하면 페이지 인쇄용으로 별도의 스타일 시트를 만들 수 있습니다.

HTML 4.01에서 레이아웃 테이블이 잘못되었습니다.

HTML 4 사양은 다음과 같이 설명합니다. "비 시각적 미디어로 렌더링 할 때 문제가 발생할 수 있으므로 문서 내용을 레이아웃하는 수단으로 테이블을 사용해서는 안됩니다."

따라서 유효한 HTML 4.01을 작성하려는 경우 레이아웃 용 테이블을 사용할 수 없습니다. 표 형식의 데이터에 대해서만 테이블을 사용해야합니다. 표 형식의 데이터는 일반적으로 스프레드 시트 나 데이터베이스에 표시 될 수있는 것처럼 보입니다.

그러나 HTML5는 규칙을 변경 했으므로 권장되지는 않았지만 레이아웃 용 테이블은 현재 유효한 HTML입니다. HTML5 사양에는 "테이블을 레이아웃 보조로 사용해서는 안됩니다."

위에서 언급했듯이 레이아웃 용 테이블은 화면 판독기가 구별하기 어렵습니다.

CSS를 사용하여 페이지를 배치하고 레이아웃하는 것은 테이블을 만드는 데 사용한 디자인을 HTML 4.01에서 만드는 유일한 방법입니다. HTML5는이 방법을 강력히 권장합니다.

레이아웃 테이블은 직업 전망에 영향을 미칠 수 있음

점점 더 많은 새로운 디자이너들이 HTML과 CSS를 배우게됨에 따라 테이블 레이아웃을 구성하는 기술은 점점 줄어들 것입니다. 예, 고객이 일반적으로 웹 페이지를 작성하는 데 사용해야하는 정확한 기술을 말하지 않는 것은 사실입니다. 그러나 그들은 다음과 같은 것들을 요구합니다.

고객이 요구하는 것을 전달할 수 없다면, 아마도 오늘은 아니지만 어쩌면 내년이나 1 년 후에 설계를 위해 당신에게 오는 것을 멈추게 될 것입니다. 1990 년대 후반부터 사용 된 기술을 배우기 시작하지 않으므로 비즈니스가 어려움을 겪게 할 수 있습니까?

도덕 : CSS 사용법 배우기

CSS는 배우기 어려울 수 있지만, 가치있는 모든 것이 효과적입니다. 기술이 정체되지 않도록하십시오. 레이아웃을위한 CSS로 CSS에 대해 배우고 웹 페이지를 빌드 할 수있는 방법으로 구축하십시오.