CSS Tables property

최신 레이아웃 시스템 이전부터 데이터를 구조화하는 데 사용된 CSS 테이블(Tables) 속성에 대해 알아보겠습니다.

테이블 속성은 표의 가독성을 높이고, 테두리가 겹치는 방식이나 제목의 위치 등을 정교하게 제어하는 데 사용됩니다.

---

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

<caption> 태그로 작성된 표의 제목을 표의 위나 아래 중 어디에 배치할지 결정합니다.

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

---

2. border (테두리)

테이블(<table>), 행(<tr>), 셀(<th>, <td>)에 테두리를 그립니다.

• 테이블 자체에만 border를 주면 표 전체 외곽선만 생기고, 내부 칸막이를 만들려면 <td>나 <th>에도 각각 테두리를 지정해야 합니다.

---

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

인접한 셀(Cell)의 테두리 사이의 거리를 설정합니다.

• 이 속성은 뒤에 설명할 border-collapse 속성이 separate일 때만 동작합니다.
• 값을 두 개 주면 가로 세로 간격을 다르게 설정할 수 있습니다. (예: border-spacing: 10px 20px;)

---

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

테이블의 테두리를 하나로 합칠지, 아니면 각각 떨어뜨려 놓을지 결정하는 가장 중요한 속성입니다.

• separate: 셀마다 독립된 테두리를 가집니다. (기본값) 이 경우 셀 사이의 간격이 보입니다.
• collapse: 인접한 테두리를 하나로 합쳐서 깔끔한 실선 형태로 만듭니다. 현대적인 웹 디자인에서 가장 많이 선호되는 방식입니다.

---

🖥️ 실전 예제 코드

HTML

 

<style>
  table {
    width: 100%;
    /* 1. 테두리를 하나로 합침 */
    border-collapse: collapse; 
    /* 2. 병합하지 않을 경우 간격 설정 (collapse 시 무시됨) */
    /* border-spacing: 10px; */
  }
 
  th, td {
    border: 1px solid #333;
    padding: 10px;
    text-align: center;
  }
 
  /* 3. 제목 위치를 아래로 설정 */
  caption {
    caption-side: bottom;
    padding: 10px;
    font-weight: bold;
  }
</style>
 
<table>
  <caption>2026년 프로젝트 일정표</caption>
  <thead>
    <tr>
      <th>단계</th>
      <th>내용</th>
      <th>기간</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>기획</td>
      <td>요구사항 분석</td>
      <td>2주</td>
    </tr>
    <tr>
      <td>개발</td>
      <td>프론트엔드 구현</td>
      <td>4주</td>
    </tr>
  </tbody>
</table>

---

📋 테이블 주요 속성 요약표

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

---

학습 정리

• 깔끔한 표를 만들고 싶다면 **border-collapse: collapse;**를 먼저 선언하는 것이 기본 공식입니다.
• 테이블은 데이터 표시용으로만 사용하고, 전체 페이지 레이아웃을 잡을 때는 Flex나 Grid를 사용하는 것이 웹 표준에 적합합니다.

---

표를 멋지게 디자인하는 CSS 테이블 속성을 정복하셨습니다!

---