[HTML/CSS] table 태그를 활용한 표 만들기 방법

table 태그란?

table 태그는 웹사이트에서 표를 나타낼 때 사용하는 태그입니다. 행(row)과 열(column)의 구조를 가지고 있으며, 각 셀(cell)에는 데이터를 입력할 수 있습니다. 표는 웹사이트에서 다양한 용도로 사용되며, 주로 테이블, 차트, 일정표 등을 나타낼 때 사용됩니다.

table 태그의 구조

table 태그는 다음과 같은 구조를 가지고 있습니다.

<table>
  <thead>
    <tr>
      <th>열 1</th>
      <th>열 2</th>
      <th>열 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>행 1, 열 1</td>
      <td>행 1, 열 2</td>
      <td>행 1, 열 3</td>
    </tr>
    <tr>
      <td>행 2, 열 1</td>
      <td>행 2, 열 2</td>
      <td>행 2, 열 3</td>
    </tr>
    <tr>
      <td>행 3, 열 1</td>
      <td>행 3, 열 2</td>
      <td>행 3, 열 3</td>
    </tr>
  </tbody>
</table>

열 1	열 2	열 3
행 1, 열 1	행 1, 열 2	행 1, 열 3
행 2, 열 1	행 2, 열 2	행 2, 열 3
행 3, 열 1	행 3, 열 2	행 3, 열 3

• <table>: 표 전체를 감싸는 태그입니다.
• <thead>: 표의 제목 부분을 감싸는 태그입니다.
• <tbody>: 표의 내용 부분을 감싸는 태그입니다.
• <th>: 제목(title) 셀을 나타내는 태그입니다.
• <tr>: 행(row)을 나타내는 태그입니다.
• <td>: 내용(content) 셀을 나타내는 태그입니다.

표를 만들기 위해서는 위와 같은 구조를 이해하고 있어야 합니다.

table 태그의 속성

HTML table 태그는 다양한 속성을 가지고 있습니다. 대표적인 속성은 다음과 같습니다.

• border: 표의 테두리 두께를 지정합니다.
• cellpadding: 셀과 셀 사이의 간격을 지정합니다.
• cellspacing: 행과 행 사이의 간격을 지정합니다.
• width: 표의 너비를 지정합니다.
• height: 표의 높이를 지정합니다.

이외에도 다양한 속성이 존재합니다. 이번에는 예제를 통해 각 속성이 어떻게 적용되는지 살펴보겠습니다

<table border="1" cellpadding="10" cellspacing="0" width="400" height="200">
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>이메일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>30</td>
      <td>hong@gmail.com</td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>25</td>
      <td>kim@gmail.com</td>
    </tr>
    <tr>
      <td>박영희</td>
      <td>27</td>
      <td>park@gmail.com</td>
    </tr>
  </tbody>
</table>

이름	나이	이메일
홍길동	30	hong@gmail.com
김철수	25	kim@gmail.com
박영희	27	park@gmail.com

CSS를 이용한 표 스타일링

table 태그는 간단하게 표를 만들 수 있는 장점이 있지만, 스타일링이 어렵다는 단점이 있습니다. 따라서 CSS를 이용하여 표를 스타일링하는 것이 좋습니다.

CSS를 이용하여 표를 스타일링하는 방법은 다양합니다. 여기에서는 간단한 예제를 통해 CSS를 이용하여 표의 셀 배경색과 폰트 색상을 변경하는 방법을 알아보겠습니다.

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
  }
  th, td {
    padding: 10px;
    border: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
    font-weight: bold;
  }
  td {
    background-color: #fff;
    color: #666;
  }
</style>

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
      <th>이메일</th>
	</tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>30</td>
      <td>hong@gmail.com</td>
    </tr>
    <tr>
      <td>김철수</td>
      <td>25</td>
      <td>kim@gmail.com</td>
    </tr>
    <tr>
      <td>박영희</td>
      <td>27</td>
      <td>park@gmail.com</td>
    </tr>
  </tbody>
</table>

이름	나이	이메일
홍길동	30	hong@gmail.com
김철수	25	kim@gmail.com
박영희	27	park@gmail.com

border-collapse : 표의 셀 테두리를 합칠 것인지, 분리할 것인지를 지정하는 속성으로, collapse 값을 지정하면 테두리를 합칩니다. width 속성은 표의 너비를 100%로 지정하고 있습니다. text-align 속성은 표 내의 텍스트 정렬 방식을 지정하는데, center 값을 지정하면 가운데 정렬됩니다.

padding 속성은 셀과 셀 사이의 간격을 지정하며, border 속성은 셀의 테두리 두께와 스타일을 지정합니다. background-color 속성은 셀의 배경색을 지정하며, font-weight 속성은 텍스트의 두께를 지정합니다. color 속성은 텍스트 색상을 지정합니다.