CSS를 사용하여 웹사이트의 테이블을 스타일링할 수 있습니다. 이를 통해 테이블의 디자인과 레이아웃을 개선하고 사용자 경험을 향상시킬 수 있습니다.

기본 테이블 스타일링

첫 번째로, 간단한 테이블을 생성하고 CSS를 사용하여 스타일을 적용해 보겠습니다. 다음은 기본 테이블의 HTML 코드입니다.

<table>
  <tr>
    <th>항목</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>커피</td>
    <td>$2.50</td>
  </tr>
  <tr>
    <td>차</td>
    <td>$1.80</td>
  </tr>
</table>

CSS를 사용한 테이블 스타일링

이제 CSS를 사용하여 테이블을 스타일링하겠습니다. 다음은 간단한 스타일을 적용한 예시입니다.

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

th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

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

결과

위의 CSS를 적용하면 테이블이 더 깔끔하고 화려해 보일 것입니다. 이외에도 CSS를 통해 테이블의 폰트, 셀 간격, 테두리 등을 다양하게 조절할 수 있습니다.

이처럼 CSS를 사용하여 테이블을 스타일링하는 것은 웹사이트의 디자인을 개선하고 사용자에게 더 나은 시각적 경험을 제공하는 데 도움이 될 수 있습니다.

더 많은 테이블 스타일링 기술 및 예제는 CSS 테이블 스타일링을 참고하시기 바랍니다.