중첩 테이블을 사용하지 않아야하는 이유

중첩 테이블은 웹 페이지를 느리게 만듭니다.

웹 페이지를 빨리 다운로드해야하지만 중첩 테이블은 프로세스 속도를 늦출 수 있습니다. 더 많은 사람들이 초고속 인터넷이나 초고속 인터넷을 사용한다고 말하지 마십시오. 따라서 페이지로드 속도에 대해 걱정할 필요가 없습니다. 웹에있는 콘텐츠의 양이 많아 질수록로드 속도가 느린 페이지 나 사이트는 빠르게로드되는 방문자보다 방문자 수가 줄어들게됩니다. 속도는 매우 중요합니다.

중첩 테이블이란 무엇입니까?

중첩 테이블은 그 안에 다른 테이블이있는 HTML 테이블입니다. 예 :



제 1 열 1
제 2 칼럼 2
제 3 열 3


열 1




중첩 테이블 열 1
중첩 테이블 열 2



3 열

열 1
2 열
3 열

중첩 테이블로 인해 페이지가 더 천천히 다운로드됩니다.

웹 페이지의 단일 테이블로 인해 페이지가 더 느리게 다운로드되지는 않습니다 (이유가 있음). 그러나 한 테이블을 다른 테이블에 넣는 순간 브라우저가 렌더링하기가 더 복잡해 지므로 페이지가 더 느리게로드됩니다. 그리고 서로 더 중첩 된 테이블이 많을수록 페이지가 더 느리게로드됩니다.

표가있는 페이지를 만들 때 표 안에있는 표가 많을수록 페이지가 더 느리게로드됩니다. 일반적으로 페이지가로드되면 브라우저는 HTML의 맨 위에서 시작하여 페이지 아래로 순차적으로로드합니다. 그러나 중첩 테이블을 사용하면 테이블 전체가 표시되기 전에 테이블 끝을 찾아야합니다.

레이아웃 용 테이블

웹 페이지의 레이아웃테이블을 사용 하면 안됩니다 . 대부분의 경우 중첩 테이블을 사용해야하므로 표 레이아웃 웹 페이지는 CSS에서 렌더링 된 동일한 디자인보다 느리게로드됩니다.

또한 유효한 XHTML을 작성하려는 경우 테이블을 레이아웃 용으로 사용해서는 안됩니다. 표는 레이아웃이 아닌 표 형식의 데이터 (예 : 스프레드 시트) 용입니다. CSS를 레이아웃에 사용해야 합니다 .CSS 디자인을보다 빨리 렌더링하고 유효한 XHTML을 유지 관리하는 데 도움이됩니다.

빠른 테이블로드 설계

여러 행이있는 테이블을 디자인하면 각 행을 별도의 테이블로 작성하면 더 빨리로드 될 수 있습니다. 예를 들어 다음과 같은 표를 작성할 수 있습니다.




상단 행

왼쪽 열
오른쪽 열

그러나 동일한 테이블을 두 개의 테이블로 작성하면 전체 테이블을 한 번에 렌더링하지 않고 브라우저가 먼저 렌더링 한 다음 두 번째 테이블을 렌더링하기 때문에로드 속도가 빨라집니다. 트릭은 각 테이블의 너비와 다른 스타일 (예 : 패딩, 여백 및 테두리)이 동일한 지 확인하는 것입니다.



상단 행




왼쪽 열
오른쪽 열

중첩 된 테이블을 하나의 테이블로 변환

이 모든 것이 좋은 정보라고 느낄 수도 있지만 테이블에 다른 테이블이 중첩되어 있어야 합니다. 이것이 사실 일 수 있지만 종종 테이블 셀의 및 특성을 사용하여 중첩 테이블을 약간 더 복잡한 단일 테이블로 변환 할 수 있습니다. 예를 들어 위에있는 중첩 테이블에서이 테이블을 colspan 특성을 가진 단일 테이블로 변환 할 수 있습니다.



제 1 열 1


colspan = "2" > 열 2
제 3 열 3

열 1
중첩 테이블 열 1
중첩 테이블 열 2
3 열

열 1
colspan = "2" > 열 2
3 열

이 테이블은 또한 중첩 테이블보다 적은 수의 문자를 사용하는 이점이 있기 때문에 그 때문에 더 빠르게 다운로드됩니다.