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) 가능한 값:
기본값. 열 너비는 셀 내용에 따라 설정됩니다. |
|
열 너비는 테이블 너비와 열 너비로 설정됩니다. |
|
은 table-layout 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. |
위 내용은 CSS 설정 테이블의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!