HTML 테이블 레이아웃의 실제 사용에 대한 자세한 설명

테이블은 언제 사용됩니까?

이제 테이블 <pable>은 일반적으로 웹 페이지의 전체 레이아웃에 더 이상 사용되지 않습니다. 그러나 양식 입력 및 데이터 프리젠 테이션과 같은 특정 설계에 직면하면 양식이 가장 적절한 선택 일 수 있습니다.

테이블의 직관적 인 인상은 요소가 여러 셀에 의해 깔끔하게 배열되어 행과 열을 명확하게 볼 수 있다는 것입니다. 이것은 Excel과 관련 될 수 있습니다. 데이터 처리 및 통계에서 Excel의 위치에서 웹 페이지에서 테이블의 중요성을 이해할 수 있습니다.

간단히 말해, 여러 요소가 행과 열의 개념으로 배열되어 있다고 직관적으로 느낄 수있을 때 테이블을 사용하면 훨씬 쉽게 만듭니다. 예를 들어 Caniuse.com의 신청서 :

테이블을 사용하는 것은 간단하지만 때로는 테이블이 각 그리드로 끝나는 경우가 있습니다. 예를 들어, 일부 그리드에 라인이 파손 된 경우 라인이 파손되어 전체 테이블이 매우보기 흉한 것처럼 보입니다. 특히 데이터 프리젠 테이션에 사용되는 테이블의 경우 너비 할당이 매우 중요한 주제입니다. 그리드의 각 열에 표시 될 수있는 데이터에 대한 테이블의 총 폭을 신중하게 계산해야 할 수도 있습니다.

이는 테이블이 레이아웃에 고유 한 특성을 가지고 있기 때문에 특정 원칙을 따르고 계산을 통해 실제 레이아웃을 결정하기 때문입니다. 다음 으로이 기사는 실제 테이블 테스트 예제를 사용하여 테이블이 자신의 레이아웃을 계산하는 방법을 탐색합니다.

이 기사는 테이블을 적용하는 가장 일반적인 방법에만 초점을 맞추고 모든 사례를 나열하지는 않습니다. 다른 브라우저마다 테이블 개념에 대한 분석이 다르지만 레이아웃 계산은 기본적으로 일관성이 있습니다 (차이가있는 경우 별도로 언급됩니다).

다음 테스트 양식은 이러한 방식으로 제시됩니다 (내용은 0의 궤적에서 가져옵니다) :

동시에, 테이블은 테두리 콜랩스를 설정합니다 : 붕괴; 국경 간격 : 0;. 이것은 또한 테이블을 적용하는 가장 일반적인 관행이며 정상화 .CSS는이 부분을 초기화 정의로 사용합니다.

<table> 요소에 정의 된 CSS 속성 테이블 레이아웃은 레이아웃 계산 중에 테이블에 적용되는 알고리즘을 결정합니다. 자동과 고정의 두 가지 값이 있습니다. 정상적인 경우 기본값 자동이 사용됩니다.

이 두 알고리즘의 차이점은 테이블의 너비 레이아웃이 테이블의 데이터 내용과 관련이 있는지 여부입니다. 이 기사에서는이 두 값을 취할 때 테이블의 레이아웃 계산의 원리에 대해 논의합니다.

자동 테이블 레이아웃 -아토

자동 테이블 레이아웃의 특징은 테이블의 너비 레이아웃이 테이블의 모든 데이터 내용과 관련이 있다는 것입니다. 최종 너비 레이아웃을 결정한 다음 함께 표시하기 전에 모든 테이블 내용을 얻어야합니다.

이런 식으로 핵심 요점은 내용이 관련이 있다는 것입니다. 테이블이 고정 너비 (여기서 500px)를 정의하고 모든 셀이 너비를 정의하지 않으면 (CSS 정의 너비 만 논의) 어떻게됩니까? 결과보기 :

위 표에서 빈 부분은 & nbsp로 작성됩니다. 공간. 비교 후 다음 사항을 찾을 수 있습니다.

두 번째 및 세 번째 열의 너비는 동일합니다.

열 1의 너비와 다음 열의 너비 비율은 2 : 1 인 것 같습니다.

테두리와 내부 마진을 추가하면 모든 열의 너비가 테이블에 의해 정의 된 너비와 동일하게 합산됩니다.

각 셀에는 너비가 정의되지 않으므로 너비 레이아웃은 특정 컨텐츠 데이터 (텍스트 정보)에 의해 완전히 결정됩니다. 그러한 결과를 설명하는 방법은 무엇입니까? 먼저 그러한 논리를 직관적으로 추론 할 수 있습니다.

1 단계 : 각 열에서 가장 많은 텍스트 내용으로 텍스트를 선택하십시오 (텍스트가 줄을 감싸지 않으면 텍스트가 가장 넓은 너비를 차지한다는 것을 이해합니다).

2 단계 : 각 열의 대표자의 너비를 비교하고 너비 비례 관계에 따라 경계 및 내부 마진을 포함하여 테이블의 총 너비를 지정하십시오.

위의 논리를 언급 한 다음 이전 테이블을 보면 어떤 이유가 있습니까? 앞에서 언급 한 너비 비율은 2 : 1 인 것 같습니다. 내부 마진을 제거하는 버전을 살펴 보겠습니다.

프론트 엔드 디버깅 도구를 사용하여 위의 셀의 폭을 살펴보면이 테이블이 이전과 다르고 비율이 2 : 1에 매우 가깝다는 것을 알게됩니다 (예, 테두리 때문에 작은 지점이 있지만 경계가 없으면 열을 구별 할 수 없습니다).

너비 비례 관계를 분석 할 때 내용 너비, 내부 마진 및 테두리가 고려 될 것임을 알 수 있습니다. 이것은 또한 단어 수의 척도가 아니라, 줄이 나지 않는 상태에서 단어가 차지할 수있는 너비의 척도임을 보여줍니다 (여기서 2 : 1은 한자가 너비가 동일하다는 사실에서 비롯됩니다). 더 아름다운 테이블을 만들려면 자연스럽게 내부 마진을 사용하십시오 :).

너비 정의가 있으면 어떻게됩니까? 다음은 셀의 일부에서 너비가 정의 된 테이블입니다.

해당 HTML 코드는 다음과 같습니다.