테이블 형식

HTML 테이블 : 복잡성과 스타일에 대한 심층적 인 이해 이 기사에서는 HTML 테이블의 복잡성과 CSS 스타일의 깊이에 대해 설명합니다. HTML 테이블에는 제목, 행 그룹 및 열 그룹과 같은 요소가 포함되어 있으며 렌더링 순서는 테이블, 열 그룹, 열, 행 그룹, 행 그룹 및 셀입니다. HTML 테이블 모델은 동작 중심이되며 셀 구조의 행 내에 포함되어 있습니다.

테이블 서식 객체

CSS는 테이블 스타일 제어를위한 10 개의 테이블 관련

속성 값을 제공합니다. 이러한 값은 다른 요소에도 적용될 수 있지만 익명 테이블 관련 요소는 올바르게 렌더링하려면 생성해야 할 수도 있습니다.

테이블의 너비와 열은 고정 테이블 레이아웃 알고리즘과 자동 테이블 레이아웃 알고리즘의 두 가지 알고리즘에 의해 결정됩니다. 전자는 테이블 셀의 내용에 영향을받지 않으며, 후자는 테이블의 모든 셀을 점검해야하며, 이는 큰 테이블에 대해 매우 시간이 많이 걸릴 수 있습니다. CSS2는 내부 테이블 객체 경계를 렌더링하는 두 가지 모델을 정의합니다 : 별도의 테두리 모델과 접힌 테두리 모델. 분리 된 테두리 모델은 셀과 테이블 만 경계를 갖도록 허용하는 반면, 붕괴 테두리 모델은 경계, 행 그룹, 열, 열 그룹 및 테이블 자체가 복잡한 방식으로 겹칠 수 있도록 허용합니다.

별도의 테두리 렌더링

접힌 테두리 렌더링 display

열 및 열 그룹 요소의 속성

속성 value

또는

: 테두리 속성 (붕괴 된 테두리 모델에서만), 백그라운드 속성 (셀과 행이 투명 배경이 있음), 너비 속성에만 몇 가지 속성 만 적용 할 수 있습니다. 가시성 속성 값

(다른 가시성 값은 무시됩니다).

테이블 너비 알고리즘

다른 블록 레벨 상자와 달리 너비가

로 설정된 테이블과 0의 수평 마진은 포함 된 블록을 채우지 않습니다. 테이블 크기는 내용에 따라 결정됩니다.

및

를 사용하여 를 설정하여 테이블을 가로로 중앙으로 설정할 수 있습니다.

테이블 열의 너비를 결정하기위한 두 가지 알고리즘이 있습니다 : 고정 테이블 레이아웃 알고리즘과 자동 테이블 레이아웃 알고리즘은

속성으로 지정된 자동 테이블 레이아웃 알고리즘 (값은 각각

및

입니다. 그리고 초기 값은 )입니다. 테이블 너비가 로 지정되면 자동 테이블 레이아웃 알고리즘이 일반적으로 사용됩니다. 블록 레벨 테이블 (>로 설정)의 경우 사용자 에이전트가 할 수 있지만 고정 테이블 레이아웃 알고리즘을 사용할 필요는 없습니다.

고정 테이블 레이아웃 알고리즘에서 열과 테이블의 너비는 테이블 셀의 내용에 의해 영향을받지 않습니다. 각 열의 너비는 다음과 같이 결정됩니다.

• 가있는 열 객체의 너비는 열의 너비로 설정되지 않습니다. auto 너비가없는 첫 번째 행 셀의 너비는
가 속한 열의 너비를 설정합니다. 셀이 여러 컬럼에 걸쳐 있으면 너비는 해당 열에 균등하게 분포됩니다.
• 나머지 기둥은 남은 수평 공간을 골고루 할당합니다 (모든 경계 또는 셀 간격을 제외). auto
테이블 너비는 테이블 너비 속성 값의 값이 큰 값과 열 너비의 합 (테두리 또는 셀 간격)입니다. 테이블이 열보다 넓은 경우 추가 공간이 열에 할당됩니다.
세포를 생략하지 마십시오!

첫 번째 행 셀이 열 폭을 결정하는 데 사용되기 때문에 고정 된 테이블 레이아웃 알고리즘이 사용되면 첫 번째 행에서 셀을 생략해서는 안됩니다. 이 경우 동작은 CSS2.1 사양에 정의되지 않습니다.

자동 테이블 레이아웃 알고리즘에는 일반적으로 여러 개의 이동이 필요합니다. CSS2.1 사양은 열 폭을 결정하기위한 알고리즘을 제안하지만 사용자 에이전트는 사용할 필요가 없습니다. 알고리즘은 전체 테이블의 모든 셀을 확인하고 각 셀을 렌더링하는 데 필요한 최소 및 최대 너비를 계산합니다. 그런 다음이 값은 각 열의 너비를 결정하는 데 사용되며,이 값은 테이블 자체의 너비를 결정할 수 있습니다.

각 셀을 점검해야하므로 자동 테이블 레이아웃 알고리즘은 많은 행 및/또는 열이있는 테이블에 시간이 많이 걸릴 수 있습니다.

테이블 높이 알고리즘 테이블 높이 속성의 값이

가 아니고 지정된 높이가 행 높이 합계와 다르면 (테두리 또는 셀 간격) 동작이 정의되지 않습니다. 행, 행 그룹 및 셀의 높이 속성의 백분율 값은 정의되지 않습니다. 각 셀의

특성은 행 내에서 어떻게 정렬되는지를 결정합니다. ,

,

및 가 사용됩니다.

테이블 객체의

테이블의 경계

CSS2의 내부 테이블 객체 경계를 렌더링하는 두 가지 모델이 있습니다 : 분리 테두리 모델과 붕괴 테두리 모델. 속성을 ​​사용하여 값을

(초기 값)로 설정하거나 선호하는 모델을 선택할 수 있습니다. 분리 된 테두리 모델에서는 셀 (및 테이블 자체) 만 국경을 가질 수 있습니다. 경계는 세포 주위에 그려지며 속성으로 지정된 수직 및 수평 거리에 의해 분리됩니다. 셀 테두리 사이의 공간에서 행, 행 그룹, 열 및 열 그룹의 배경은 보이지 않습니다. 셀 간격에서 테이블 배경 만 볼 수 있습니다.

속성이 auto로 설정되면 셀이 분리되지 않으며 경계 (및 경계, 행 그룹, 열, 열 그룹 및 테이블 자체)가 다소 복잡하게 무너집니다. 방법 (또는 겹침). vertical-align 붕괴 된 테두리 모델을 사용할 때 baseline 및 top 속성은 무시됩니다. bottom middle (다음은 FAQ 부분입니다. 공간 제한으로 인해 제목 만 여기에 보관됩니다. 전체 내용은 원본 텍스트를 참조하십시오) baseline.

테이블의 기본 서식 단계 테이블을 반응하는 방법 테이블 셀을 병합하는 방법
• 테이블에 테이블에 경계를 추가하는 방법 테이블의 배경색을 바꾸는 방법 테이블에서 텍스트를 정렬하는 방법 테이블에 제목을 추가하는 방법 다른 방식으로 테이블의 첫 번째 줄 또는 열을 스타일링하는 방법 테이블에 호버 효과를 추가하는 방법 형태를보다 접근하기 쉽게 만드는 방법

위 내용은 테이블 형식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!