Table 속성 - by. UXKM

2024-07-30

요약 설명
테이블 데이터를 레이아웃하는 방법을 정의하는 CSS 모듈입니다.
CSS를 이용하면 다양한 형태의 테이블을 만들 수 있습니다.
테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다.
border
border-collapse
border-spacing
caption-side
empty-cells
table-layout

border 속성

border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됩니다.

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

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

border-collapse 속성

border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됩니다.
이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 테이블 요소별 테두리를 모두 표현하게 됩니다.

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

collapse : 인접한 셀은 경계를 공유합니다 (축소 된 테두리 테이블 렌더링 모델).
separate : 인접한 셀은 서로 다른 경계 (분리 된 경계 테이블 렌더링 모델)를 갖습니다.

border-spacing 속성

border-spacing 속성은 테이블 요소(th, td)간의 여백을 설정해 줍니다.
horizontal length(세로 간격) | vertical length(가로 간격)
IE8+ 부터 지원합니다.

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

caption-side 속성

테이블의 캡션(caption)을 설정합니다.
IE8+ 부터 지원합니다.

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

top : 테이블 위에 위치.
bottom : 테이블 아래에 위치.

vertical-align 속성

HTML 요소 내의 수직 방향 정렬을 설정합니다.
인라인 블록 또는 인라인 테이블 셀 박스의 수직 방향을 설정합니다.

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

empty-cells 속성

테이블 내의 빈 셀(cell)들의 테두리 및 배경색을 표현할지 안 할지를 설정합니다.
이 속성은 border-collapse속성의 값이 separate 일 때만 효과가 있습니다.
IE8+ 부터 지원합니다.

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

show : 테두리와 배경은 일반 셀처럼 그려집니다.
hide : 테두리 나 배경이 그려지지 않습니다.

table-layout 속성

테이블에 사용되는 너비를 설정합니다.

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

auto : 기본값으로 대부분의 브라우저는 자동 테이블 레이아웃 알고리즘을 사용합니다. 표와 셀의 너비는 내용에 맞게 조정됩니다.
fixed : 테이블 및 열 너비는 셀의 너비 table와 col요소 또는 첫 번째 행의 너비로 설정됩니다. 후속 행의 셀은 열 너비에 영향을 미치지 않습니다.