Table 속성 - by. UXKM

Publishing
CSS
CSS 초급
Table 속성

요약 설명
CSS의 table 속성은 테이블의 표시 방식을 제어하는 속성들로 구성됩니다.
테이블의 테두리(border), 테두리 병합(border-collapse), 셀 간격(border-spacing), 캡션 위치(caption-side), 빈 셀 표시(empty-cells), 레이아웃 방식(table-layout) 등을 설정할 수 있습니다.

border 속성

테이블의 테두리를 설정하는 속성입니다.
table, th, td에 각각 border를 선언하면 각 요소가 자신만의 테두리를 가지기 때문에 테두리가 2줄로 표현됩니다.
테두리를 한 줄로 보이게 하려면 border-collapse 속성을 사용해야 합니다.

							table,
							table th,
							table td {
								border: width style color | inherit | initial | unset;
							}

border-collapse 속성

인접한 셀의 테두리를 합칠지 분리할지 설정하는 속성입니다.
collapse로 설정하면 테두리가 한 줄로 표현되고, separate로 설정하면 각 셀의 테두리가 분리되어 표현됩니다.

							table {
								border-collapse: collapse | separate;
							}
							table th,
							table td {
								border: 2px solid orange;
							}

collapse : 인접한 셀의 테두리를 합쳐서 한 줄로 표현합니다.
separate : 기본값으로 각 셀의 테두리를 분리하여 표현합니다.

border-spacing 속성

border-collapse: separate일 때 셀 간의 간격을 설정하는 속성입니다.
첫 번째 값은 가로 간격, 두 번째 값은 세로 간격을 의미합니다.
값을 하나만 지정하면 가로와 세로 간격이 동일하게 적용됩니다.

							table,
							table th,
							table td  {
								border: 1px solid black;
							}
							table {
								width: 100%;
								border-collapse: separate;
								border-spacing: 20px 30px;
							}

caption-side 속성

테이블 캡션의 위치를 설정하는 속성입니다.
top은 테이블 위에, bottom은 테이블 아래에 캡션을 배치합니다.

							table caption {
								caption-side: top | bottom | inherit | initial | unset;
							}

top : 기본값으로 테이블 위에 위치합니다.
bottom : 테이블 아래에 위치합니다.

vertical-align 속성

테이블 셀 내부의 내용을 수직 방향으로 정렬하는 속성입니다.
top은 위쪽, middle은 중앙, bottom은 아래쪽에 정렬합니다.

							table th,
							table td {
								vertical-align: top | middle | bottom | inherit | initial | unset;
							}

empty-cells 속성

빈 셀의 테두리와 배경을 표시할지 숨길지 설정하는 속성입니다.
border-collapse: separate일 때만 효과가 있습니다.

							table th,
							table td {
								empty-cells: show | hide | inherit | initial | unset;
							}

show : 기본값으로 빈 셀도 테두리와 배경을 표시합니다.
hide : 빈 셀의 테두리와 배경을 숨깁니다.

table-layout 속성

테이블의 레이아웃 방식을 설정하는 속성입니다.
auto는 내용에 따라 자동으로 조정되고, fixed는 고정된 너비를 사용합니다.

							table {
								table-layout: auto | fixed | inherit | initial | unset;
							}

auto : 기본값으로 셀의 내용에 따라 너비가 자동으로 조정됩니다.
fixed : 첫 번째 행의 너비를 기준으로 고정되며, 후속 행의 내용은 열 너비에 영향을 주지 않습니다.