HTML 테이블 레이아웃의 실제 활용에 대한 자세한 설명_HTML/Xhtml_웹페이지 제작

양식은 언제 사용되나요

요즘에는 웹페이지의 전체 레이아웃에 테이블

테이블의 직관적인 인상은 깔끔하게 배열된 여러 개의 셀로 구성된 요소이며, 행과 열이 명확하게 보입니다. 이는 엑셀과 연관될 수 있으며, 엑셀의 데이터 처리 및 통계 현황을 바탕으로 웹페이지에 나타나는 표의 의미를 이해할 수 있습니다.

간단히 말하면, 여러 요소가 행과 열로 배열되어 있다는 것을 직관적으로 느낄 수 있을 때, 표를 사용하면 훨씬 수월해집니다. caniuse.com의 신청서 예시:

테이블 레이아웃 계산

테이블을 사용하는 것은 매우 간단하지만 때로는 각 그리드에 대한 테이블이 표시하는 최종 상태가 원하는 것과 다를 수 있습니다. 예를 들어, 일부 그리드에 줄 바꿈이 있는 경우 줄 바꿈으로 인해 전체 테이블이 매우 보기 흉하게 보입니다. 특히 데이터 표현에 사용되는 테이블의 경우 너비 할당은 매우 중요한 주제입니다. 그리드의 각 열이 나타낼 수 있는 데이터에 대한 테이블의 전체 너비를 신중하게 계산해야 할 수도 있습니다.

테이블 자체의 레이아웃 특성이 있기 때문에 특정 원칙을 따르고 계산을 통해 실제 레이아웃이 결정됩니다. 다음으로 이 기사에서는 실제 테이블 테스트 예제를 사용하여 테이블이 자체 레이아웃을 계산하는 방법을 살펴봅니다.
최초 성명

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

다음에 사용되는 테스트 양식은 다음과 같이 나타납니다(내용은 Zero Track에서 가져옴).

동시에 테이블은 border-collapse:collapse; 및 border-spacing:0;을 설정합니다. 이는 테이블을 적용하는 가장 일반적인 방법이기도 합니다. Normalize.css는 이 부분을 초기화 정의로 사용합니다.
두 가지 알고리즘

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

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

이런 관점에서 핵심은 '콘텐츠 관련'이다. 테이블이 고정 너비(여기서는 500px)를 정의하지만 모든 셀에 정의된 너비가 없으면 어떻게 됩니까(CSS 정의 너비만 논의됨)? 결과를 살펴보겠습니다:

위 표에서 빈 부분은 공백으로 표기되어 있습니다. 비교해 보면 다음과 같은 점을 알 수 있습니다.

2열과 3열의 너비는 동일합니다.
첫 번째 열의 너비와 후속 열의 너비 비율은 2:1인 것 같습니다.
테두리와 패딩을 포함한 모든 열의 전체 너비는 표에서 정의한 너비와 같습니다.

각 셀에는 정의된 너비가 없으므로 너비 레이아웃은 전적으로 특정 콘텐츠 데이터(텍스트 정보)에 의해 결정됩니다. 그러한 결과를 어떻게 설명할 것인가? 먼저 이 논리를 직관적으로 추측할 수 있습니다.

1단계, 각 열에서 텍스트 내용이 가장 많은 항목(줄 바꿈 없이 텍스트의 가장 넓은 너비로 이해됨)을 "대표"로 선택합니다.
2단계, 각 열의 "대표" 너비를 비교한 다음 너비 비례 관계에 따라 테두리와 패딩을 포함한 테이블의 전체 너비를 할당합니다.

위의 논리를 참고하여 앞의 표를 복습해 볼까요? 앞에서 너비 비율이 2:1인 것처럼 보인다고 말한 것을 참고하세요. 패딩이 없는 버전을 살펴보겠습니다.

프런트 엔드 디버깅 도구를 사용하여 위의 셀 너비를 자세히 살펴보면 이 표가 이전과 다르며 비율이 2:1에 매우 가깝다는 것을 알 수 있습니다(예, 이 작은 점). 테두리 때문인데 테두리가 열을 구분할 수 없습니다.)

너비 비율 관계를 분석할 때 콘텐츠 너비, 패딩, 테두리가 고려된다는 것을 알 수 있습니다. 이는 문자 수를 측정하는 것이 아니라 문자가 줄 바꿈 없이 차지할 수 있는 너비를 측정한 것임을 보여줍니다(여기서 2:1은 한자의 너비가 동일하다는 사실에서 비롯됩니다). 당연히 패딩을 사용하는 것은 더 아름다운 테이블을 만들기 위한 것입니다 :).

너비 정의가 있으면 어떻게 되나요? 다음은 일부 셀의 너비 정의가 포함된 표입니다.

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

위 표에서 확인할 수 있는 사항은 다음과 같습니다.

너비가 5픽셀인 셀의 실제 너비는 13픽셀이며, 이는 정확히 한자 너비와 같습니다. 같은 열에 한자가 포함된 셀은 최소 셀 너비 형태로 텍스트를 배열합니다. 줄이 변경됩니다).
너비가 200px로 설정된 셀의 실제 너비는 200px이지만, 같은 열에는 70px 너비에 대한 정의가 있습니다.
정확한 너비 정의가 없는 세 번째 열은 1열과 2열을 할당한 후 최종적으로 테이블의 나머지 너비 전체를 가져옵니다.

너비 정의가 있는 열과 너비 정의가 없는 열이 있는 경우 다음과 같이 추론됩니다.

셀의 정의된 너비가 해당 내용의 최소 배열 너비보다 작은 경우(비줄바꿈 배열과 반대로 셀에 가능한 많은 행이 배열될 때 셀에 필요한 너비) 셀이 위치한 열에는 콘텐츠가 가능한 가장 작은 배열로 표시됩니다.
동일한 열에 있는 셀의 콘텐츠 너비(줄 바꿈 없음, 이 단어는 나중에 이를 의미함)가 열의 최대 너비 정의보다 작은 경우 열의 실제 너비는 너비 정의와 같습니다.
너비 정의가 없는 열의 경우 테이블은 먼저 너비 정의가 있는 열에 너비를 할당한 다음 해당 열에 할당합니다(역시 두 열 사이의 비율은 콘텐츠 너비에 따라 다름).

앞쪽의 너비 정의가 없는 것은 Case 1로 간주할 수 있습니다. 여기서 너비 정의가 있는 열도 있고 그렇지 않은 열도 있어 Case 2로 간주할 수 있습니다. 다음은 사례 3, 즉 모든 열에 너비 정의가 있는 경우입니다.

해당 HTML 코드:

위 표에서는 패딩을 제거하여 너비로 값을 명확하게 정의할 수 있으며, 이 세 열의 너비 비율은 2:1:1입니다. 여기에는 또 다른 조건이 있습니다. 즉, 셀 내용의 너비가 너비 정의 값을 초과하지 않는 것입니다. 테스트 후, IE7 이하에서는 콘텐츠가 너비 정의 값을 초과할 때 다른 브라우저와 다르게 동작합니다.

이 테이블 예를 통해 모든 열에 너비 정의가 있고 이러한 너비 정의 값의 합이 테이블 너비보다 작은 경우 테이블은 너비에 해당하는 너비를 계속 할당한다는 것을 알 수 있습니다. 너비 정의 값. 너비에 비례하여 나머지 너비도 할당됩니다.

위는 자동 테이블 레이아웃이 정의되고 테이블 자체의 너비가 고정된 세 가지 상황에 대한 분석입니다. 테이블 자체에서 너비를 정의하지 않는 경우에는 더 많은 상황이 있을 것이며, 향후 적절한 기회가 있으면 테이블의 포함 블록(세부 사항)과 관련이 있을 것입니다(그렇습니다). 기사 공간이 제한되어 있습니다...).
고정 테이블 레이아웃-고정

고정 테이블 레이아웃의 특징은 테이블의 너비 레이아웃이 테이블의 데이터 내용과 관련이 없다는 것입니다. 테이블의 첫 번째 행 정보만 수신하면 최종 너비 레이아웃이 결정됩니다. 표시를 시작합니다.

고정 테이블 레이아웃은 "내용 독립적"이며 "첫 번째 행"을 강조합니다. 다음 표 예를 참조하세요.

해당 HTML 코드:

고정 테이블 레이아웃의 논리는 훨씬 간단하며 다음과 같이 표현됩니다.

첫 번째 행 뒤의 모든 셀의 내용과 너비 정의를 무시하고 첫 번째 행의 정보만 가져옵니다.
첫 번째 행에서 셀에 너비 정의가 있는 경우 필요한 너비를 먼저 할당한 다음 나머지 너비는 너비 정의 없이 셀에 균등하게 분배됩니다.
첫 번째 행에 있는 셀의 너비 분포에 따라 테이블의 너비 레이아웃이 결정되며, 첫 번째 행 이후의 내용은 레이아웃을 변경하지 않습니다.

고정 테이블 레이아웃을 사용할 때 테이블 요소의 너비를 정의해야 한다는 점도 중요합니다. 너비가 정의되지 않은 경우(즉, 자동 기본값) 브라우저는 대신 자동 테이블 레이아웃을 사용합니다. .
종료문

테이블과 관련하여 실제로