table 속성

 

🟢  table

표의 테두리, 크기, 셀 간격, 정렬 및 레이아웃 방식을 정교하게 제어하는 속성.

 

🔹 border

표와 셀의 테두리 설정.

table, tr, th, td { border: 1px solid black; }

• 문법: border: 두께 스타일 색상;
• 테이블뿐 아니라 모든 요소에 사용 가능하며, th, td에도 각각 적용해야 전체 선이 보인다.

 

🔹 border-collapse

셀의 테두리 병합 여부 결정.

/* 기본값 */
table { border-collapse: separate; }

/* 테두리 합침 */
table { border-collapse: collapse; }

• separate: 셀마다 테두리 따로 존재. (기본값)
• collapse: 인접한 테두리를 하나로 합침.(실무 시 필수 사용)

 

🔹 border-spacing (테두리 간격)

셀과 셀 사이의 간격(거리) 설정.

/* 하나만 쓸 때 */
table {
  border-collapse: separate;
  border-spacing: 10px;
}

/* 두 개 쓸 때 */
table {
  border-collapse: separate;
  border-spacing: 10px 20px;
}

• border-collapse: separate 경우에만 적용 가능.
• 값을 두 개 주면 가로 간격(열 사이), 세로 간격(행 사이)를 다르게 설정할 수 있다.

 

🔹 caption-side

표 제목의 위치 지정.

/* 기본값 */
caption { caption-side: top; }

caption { caption-side: bottom; }

• top: 표의 윗부분 제목 표시. (기본값)
• bottom: 표의 아랫부분 제목 표시.

 

 

📍  POINT 📍 

✔️ 깔끔한 표를 만들고 싶다면 border-collapse: collapse; 를 사용한다. ✔️

✔️ 테이블은 데이터 표시용으로만 사용하고, 전체 페이지 레이아웃을 잡을 때는 Flex나 Grid를 사용하는 것이 웹 표준에 적합하다. ✔️

 

 

📋 테이블 주요 속성 요약표 📋

속성	역할	주요 값
caption-side	표 제목 위치 제어	top, bottom
border-collapse	테두리 병합 여부	collapse, separate
border-spacing	셀 사이의 간격	px, em 등 (separate일 때만)
table-layout	테이블 너비 계산 방식	auto, fixed