• 목록

CSS Table 속성 정리

1. border-collapse (테두리 병합)

• 설명: 표의 테두리를 하나로 합칠지, 아니면 각각 분리해서 보여줄지 결정합니다.

• 주요 값:

  • collapse: 이웃한 테두리를 하나로 합쳐서 깔끔하게 표현합니다. (가장 많이 사용)

  • separate: 테두리를 각각 분리하여 표시합니다. (기본값)

2. border-spacing (테두리 간격)

• 설명: border-collapse: separate; 상태일 때, 셀 사이의 간격을 조절합니다.

• 작성법: border-spacing: 10px; (가로 세로 동일) 또는 border-spacing: 10px 20px; (가로 세로 다르게)

3. table-layout (표 레이아웃 방식)

• 설명: 표의 너비를 콘텐츠 양에 맞춰 조절할지, 고정할지 결정합니다.

• 주요 값:

  • auto: 셀 안의 내용에 따라 너비가 자동으로 조절됩니다. (기본값)

  • fixed: 셀 안의 내용에 상관없이 지정된 너비를 유지합니다. (반응형 웹 디자인에서 유용)

4. caption-side (표 제목 위치)

• 설명: <caption> 태그로 작성된 표 제목의 위치를 지정합니다.

• 주요 값: top(위), bottom(아래)

5. empty-cells (빈 셀 표시 여부)

• 설명: 내용이 없는 빈 셀의 테두리와 배경색을 표시할지 말지 결정합니다.

• 주요 값: show(표시), hide(숨김)

/* 1. 기본 표 스타일: 테두리 통합 및 너비 설정 */
.table-basic {
  width: 100%;
  border-collapse: collapse; /* 테두리 병합 - 가장 중요 */
  table-layout: fixed; /* 셀 너비 고정 */
}

/* 2. 셀(th, td) 테두리 및 간격 설정 */
.table-basic th, 
.table-basic td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

/* 3. 표 제목(caption) 위치 설정 */
.table-basic caption {
  caption-side: top; /* 제목을 표 위쪽에 배치 */
  padding: 10px;
  font-weight: bold;
}

/* 4. 빈 셀 숨기기 예제 */
.table-empty-hide {
  border-collapse: separate; /* separate 상태에서만 작동 */
  empty-cells: hide; /* 내용 없는 셀 숨김 */
}

• 목록