CSS를 활용하여 테이블 꾸미기: 다양한 예제와 가이드

HTML의 기본 테이블은 단순한 구조로 데이터를 보여주는 데 적합하지만, 시각적 매력이 부족합니다. CSS를 사용하면 테이블을 스타일링하여 사용자 경험을 향상시킬 수 있습니다. 이 글에서는 CSS를 활용해 테이블을 이쁘게 꾸미는 다양한 예제를 소개합니다.

---

1. 기본 테이블 스타일링

기본 테이블은 HTML에서 다음과 같이 정의됩니다:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

기본 출력은 단조롭습니다. CSS로 스타일링해 보겠습니다.

---

2. 기본적인 테이블 꾸미기

table {
  border-collapse: collapse; /* 테이블 경계선 합치기 */
  width: 100%;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

th, td {
  border: 1px solid #dddddd; /* 셀 경계선 */
  padding: 8px; /* 셀 여백 */
}

thead {
  background-color: #f2f2f2; /* 헤더 배경색 */
}

결과:

• 테두리가 나타나고 셀 간격이 깔끔하게 정리됩니다.
• 헤더에 배경색을 추가해 강조했습니다.

---

3. 테이블에 대체 행 색 추가하기

가독성을 높이기 위해 짝수행과 홀수행에 다른 배경색을 적용합니다.

tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* 홀수행 */
}

tbody tr:nth-child(even) {
  background-color: #ffffff; /* 짝수행 */
}

결과:

• 대체 행 색상이 적용되어 가독성이 개선됩니다.

---

4. 테이블에 호버 효과 추가

사용자가 행 위에 마우스를 올릴 때 강조 효과를 추가합니다.

tbody tr:hover {
  background-color: #e0f7fa; /* 호버 시 배경색 */
  cursor: pointer; /* 마우스 포인터 변경 */
}

결과:

• 사용자가 마우스를 올릴 때 강조 효과가 적용됩니다.

---

5. 테이블 헤더에 그림자 효과 추가

헤더에 그림자 효과를 추가해 입체감을 부여합니다.

thead {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

결과:

• 헤더가 더 눈에 띄고 테이블에 깊이감을 줍니다.

---

6. 테이블에 테마 색상 추가

전체 테이블에 테마를 지정해 깔끔한 스타일을 적용합니다.

table {
  border: 2px solid #4caf50;
}

th {
  background-color: #4caf50;
  color: white;
}

tbody tr {
  border-bottom: 1px solid #dddddd;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

결과:

• 테이블 경계선, 헤더, 셀 스타일이 통일감 있게 적용됩니다.

---

7. 테이블에 이미지와 아이콘 추가

테이블에 이미지를 포함해 정보 전달력을 높일 수 있습니다.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img src="https://via.placeholder.com/50" alt="Product"></td>
      <td>Sample Product</td>
      <td>$10</td>
    </tr>
    <tr>
      <td><img src="https://via.placeholder.com/50" alt="Product"></td>
      <td>Another Product</td>
      <td>$20</td>
    </tr>
  </tbody>
</table>

td img {
  border-radius: 4px; /* 둥근 모서리 */
  width: 50px; /* 이미지 크기 */
}

결과:

• 각 행에 이미지가 추가되어 시각적으로 풍부한 테이블이 만들어집니다.

---

8. 반응형 테이블 구현

모바일 환경에서 테이블의 가독성을 유지하려면 반응형 디자인을 적용해야 합니다.

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  display: none; /* 헤더 숨기기 */
}

tbody tr {
  display: block; /* 각 행을 블록 요소로 */
  margin-bottom: 15px;
}

tbody td {
  display: block; /* 각 셀을 블록 요소로 */
  text-align: right;
  position: relative;
  padding-left: 50%;
  white-space: nowrap;
}

tbody td::before {
  content: attr(data-label); /* 데이터 라벨로 셀 설명 추가 */
  position: absolute;
  left: 10px;
  font-weight: bold;
  white-space: nowrap;
  text-align: left;
}

HTML 구조 변경:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Header 1">Data 1</td>
      <td data-label="Header 2">Data 2</td>
      <td data-label="Header 3">Data 3</td>
    </tr>
    <tr>
      <td data-label="Header 1">Data 4</td>
      <td data-label="Header 2">Data 5</td>
      <td data-label="Header 3">Data 6</td>
    </tr>
  </tbody>
</table>

결과:

• 모바일에서는 각 셀에 라벨이 표시되어 정보가 명확하게 나타납니다.

---

9. 고급 테이블 스타일: 카드 스타일

테이블을 카드 형식으로 보여주는 스타일입니다.

table {
  border: none;
}

tbody tr {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

td {
  margin-bottom: 5px;
}

td:last-child {
  margin-bottom: 0;
}

---

10. 테이블 꾸미기의 종합 예제

종합적으로 스타일링된 테이블 예제입니다.

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="btn">Edit</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="btn">Edit</button></td>
    </tr>
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  text-align: left;
}

thead {
  background-color: #4caf50;
  color: white;
}

th, td {
  padding: 12px;
  border: 1px solid #ddd;
}

tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

button.btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

button.btn:hover {
  background-color: #45a049;
}

---

결론

CSS를 활용하면 단순한 테이블을 사용자 친화적이고 시각적으로 매력적인 디자인으로 꾸밀 수 있습니다. 이번 글에서는 기본 스타일링부터 반응형 디자인, 카드 스타일까지 다양한

테이블 스타일링 방법을 다뤘습니다. 프로젝트에서 필요한 스타일을 적절히 활용하여 멋진 테이블을 만들어 보세요!