CSS => 테이블

통사론

테이블 레이아웃 : 자동 | 결정된;
국경 붕괴 : 분리 | 무너짐;
border-spacing : <길이> | <길이> <길이>;
빈 셀 : 표시 | 숨는 장소;
캡션 쪽 : 상단 | 바닥;

비고

이러한 속성은 <table> 요소 (*)와 display: table display: inline-table 또는 display: inline-table 로 표시된 HTML 요소 모두에 적용 display: inline-table

(*) <table> 요소는 UA / 브라우저에 의해 display: table 로서 기본적으로 기본적으로 스타일 지정 display: table

HTML 테이블은 표의 데이터에 의미 상 유효합니다. 레이아웃을 위해 테이블을 사용하지 않는 것이 좋습니다. 대신 CSS를 사용하십시오.

표 레이아웃

table-layout 속성은 table-layout 에 사용되는 알고리즘을 변경합니다.

두 테이블의 예는 아래 두 가지 모두 width: 150px :

왼쪽의 테이블에는 table-layout: auto 있고, 오른쪽에는 table-layout: fixed 있습니다. 전자는 지정된 폭 (150px 대신 210px)보다 넓지 만 내용이 적합합니다. 후자는 내용이 오버플로되는지 여부에 관계없이 정의 된 너비 150 픽셀을 사용합니다.

값	기술
자동	이것은 기본값입니다. 그것은 '셀의 내용에 의해 결정되는 테이블의 레이아웃을 정의합니다.
결정된	이 값은 테이블 레이아웃이 테이블에 제공된 width 속성에 의해 결정되도록 설정합니다. 셀의 내용이이 너비를 초과하면 셀의 크기가 조정되지 않고 내용이 오버플로됩니다.

국경 붕괴

border-collapse 속성은 테이블의 테두리를 분리하거나 병합할지 여부를 결정합니다.

border-collapse 속성에 대해 서로 다른 값을 가진 두 테이블의 예는 다음과 같습니다.

왼쪽에있는 테이블에는 border-collapse: separate 오른쪽에있는 테이블은 border-collapse: separate 가 border-collapse: separate 되면 border-collapse: collapse 됩니다.

값	기술
갈라진	이것은 기본값입니다. 그것은 테이블의 경계를 서로 분리시킵니다.
무너짐	이 값은 별개가 아닌 표의 테두리를 병합하여 병합합니다.

국경 간격

border-spacing 속성은 셀 사이의 간격을 결정합니다. border-collapse 가 separate 되도록 설정하지 않으면 아무런 효과가 없습니다.

border-spacing 속성에 대해 서로 다른 값을 갖는 두 개의 테이블의 예는 다음과 같습니다.

왼쪽에있는 표는 border-spacing: 2px 가지고 border-spacing: 2px (기본값). 오른쪽에 border-spacing: 8px 있습니다.

값	기술
<길이>	정확한 값은 브라우저마다 다를 수 있지만 이것은 기본 동작입니다.
<길이> <길이>	이 구문을 사용하면 별도의 가로 및 세로 값을 지정할 수 있습니다.

빈 세포

empty-cells 속성은 내용이없는 셀을 표시할지 여부를 결정합니다. border-collapse 가 separate 되도록 설정하지 않으면 아무런 효과가 없습니다.

다른 값이있는 두 개의 테이블이 empty-cells 등록 정보로 설정된 예제 아래에 있습니다.

왼쪽의 표에는 empty-cells: show 오른쪽에는 empty-cells: hide 이 empty-cells: hide 반면 empty-cells: show 는 empty-cells: hide . 전자는 빈 셀을 표시하지만 후자는 표시하지 않습니다.

값	기술
보여 주다	이것은 기본값입니다. 그것은 비어있는 경우에도 세포를 보여줍니다.
숨는 장소	이 값은 셀에 내용이 없으면 셀을 숨 깁니다.

추가 정보 :

캡션 쪽

caption-side 속성은 테이블 내의 <caption> 요소의 세로 위치를 결정합니다. 이러한 요소가 없으면 아무 효과가 없습니다.

caption-side 속성에 다른 값이 설정된 두 개의 테이블이있는 예는 다음과 같습니다.

왼쪽에있는 표에는 caption-side: top 있고 오른쪽에 caption-side: bottom 있습니다.

값	기술
상단	이것은 기본값입니다. 표 위에 표제를 놓습니다.
바닥	이 값은 캡션을 테이블 아래에 배치합니다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
테이블

수색…

통사론

비고

표 레이아웃

국경 붕괴

국경 간격

빈 세포

캡션 쪽