CSS 설정 테이블의 속성은 무엇입니까?

CSS는 테이블의 속성을 설정합니다: 1. 테두리 축소 속성, 테이블 테두리 축소 2. 테두리 간격 속성 4. 캡션 측 속성 6. 테이블 -레이아웃 속성.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 테이블:

Properties	Description
border-collapse	테이블 테두리 병합 여부 설정 단일 테두리.
border-spacing	셀을 구분하는 테두리의 거리를 설정합니다.
caption-side	표 제목의 위치를 ​​설정합니다.
empty-cells	테이블에 빈 셀을 표시할지 여부를 설정합니다.
table-layout	셀, 행, 열 표시 알고리즘을 설정합니다.

1. 테이블 테두리 접기: border-collapse 속성

(1) 기능: 테이블의 테두리를 단일 테두리로 병합할지, 아니면 표준 HTML 디스플레이와 같이할지 설정합니다.

(2) 추가 지식 포인트: 테이블에 이중선 테두리가 있습니다. 이는 table, th 및 td 요소가 독립적인 테두리를 갖기 때문입니다.

(3) 가능한 값:

Value	Description
별도	기본값입니다. 국경이 분리됩니다. border-spacing 및 빈 셀 속성은 무시되지 않습니다.
collapse	테두리는 가능한 경우 단일 테두리로 병합됩니다. border-spacing 및 빈 셀 속성은 무시됩니다.
inherit	은 border-collapse 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

(4) 브라우저 지원: 모든 주요 브라우저는 border-collapse 속성을 지원합니다.

Ps: 는 !DOCTYPE을 지정해야 합니다. 그렇지 않으면 border-collapse가 예상치 못한 결과를 초래할 수 있습니다.

2. 테이블 내부 여백: 패딩 속성

#Function: 테이블의 내용과 테두리 사이의 거리를 제어합니다.

3. 테두리 분리: border-spacing 속성

(1) 기능: 이 속성은 분리된 테두리 모델에서 셀 경계 사이의 거리를 지정합니다. border-collapse가 분리로 설정되지 않으면 이 속성은 무시됩니다. 이 속성은 테이블에만 적용되지만 테이블의 모든 요소에 상속됩니다.

(2) 가능한 값:

Value	Description
길이 길이	규정은 인접한 셀의 경계 사이의 거리. px, cm 등의 단위를 사용합니다. 음수 값은 허용되지 않습니다. length 매개변수를 정의하면 가로 및 세로 간격이 정의됩니다. 두 개의 length 매개변수를 정의하면 첫 번째 매개변수는 가로 간격을 설정하고 두 번째 매개변수는 세로 간격을 설정합니다.
inherit	은 테두리 간격 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

(3) 브라우저 호환성: IE를 제외한 모든 주요 브라우저는 테두리 간격 속성을 지원합니다. Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 테두리 간격 속성을 지원합니다.

4. 테이블 제목: 캡션 측 속성

(1) 기능: 테이블 제목의 위치를 ​​설정합니다. 이 속성은 테이블 프레임을 기준으로 테이블 제목의 위치를 ​​지정합니다. 테이블 제목은 테이블 앞(또는 뒤)에 블록 수준 요소인 것처럼 표시됩니다.

(2) 가능한 값:

Value	Description
top	기본값입니다. 표 제목을 표 위에 배치합니다.
bottom	표 제목을 표 아래에 배치합니다.
inherit	은 캡션 측 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

(3) 브라우저 호환성: IE를 제외한 모든 주요 브라우저는 캡션 측 속성을 지원합니다. Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 캡션 측 특성을 지원합니다.

5. 빈 셀 처리: 빈 셀 속성

(1) 기능: 이 속성은 내용이 포함되지 않은 테이블 셀을 표현하는 방법을 정의합니다. 표시되면 셀의 테두리와 배경이 그려집니다. border-collapse가 분리로 설정되지 않으면 이 속성은 무시됩니다.

(2) 가능한 값:

Value	Description
hide	이(가) 비어 있지 않습니다. 셀 주위에 테두리를 그립니다.
show	빈 셀 주위에 테두리를 그립니다. 기본.
inherit	은 빈 셀 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

(3) 브라우저 호환성: IE를 제외한 모든 브라우저는 빈 셀 속성을 지원합니다. Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 빈 셀 속성을 지원합니다.

6. 테이블 레이아웃 속성

(1) 기능: 테이블 셀, 행, 열의 알고리즘 규칙을 표시하는 속성입니다. .

(2) 두 가지 알고리즘:

<1>고정 테이블 레이아웃: 고정

#장점: 브라우저가 테이블을 더 빠르게 레이아웃할 수 있도록 허용합니다. (고정 테이블 레이아웃에서는 가로 레이아웃) 테이블 너비, 열 너비, 테이블 테두리 너비 및 셀 간격에만 의존하며 셀의 내용과는 아무 관련이 없습니다. 고정 테이블 레이아웃을 사용하면 사용자 에이전트는 첫 번째 행을 받은 후 테이블을 표시할 수 있습니다. ;

      #단점: 유연성이 별로 없습니다. 2 & lt; 2 & gt; 자동 테이블 레이아웃:

Automatic

#장점: 기존 HTML을 더 많이 반영합니다. (자동 테이블 레이아웃에서는 열 너비가 열 셀에서 가장 많이 할인됩니다. );

​​ #단점: 자동 알고리즘은 최종 레이아웃을 결정하기 전에 테이블의 모든 콘텐츠에 액세스해야 하기 때문에 속도가 느립니다.

(3) 가능한 값:

ValueDescription자동fixedinherit(학습 영상 공유: css 영상 튜토리얼)

기본값. 열 너비는 셀 내용에 따라 설정됩니다.
열 너비는 테이블 너비와 열 너비로 설정됩니다.
은 table-layout 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

위 내용은 CSS 설정 테이블의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!