HTML 핵심 개념 : 테이블 정리

테이블

정보를 표로 나타낼 때는 <table> 태그를 사용

테이블의 행은 <tr> 태그로 감쌈

각 데이터들은 <td> 태그로 감쌈

<table>
  <tr>
    <td></td>
    <td>Premium</td>
    <td>Standard</td>
    <td>Basic</td>
  </tr>
  <tr>
    <td></td>
    <td>₩15,900</td>
    <td>₩10,900</td>
    <td>₩8,900</td>
  </tr>
  <tr>
    <td>화질</td>
    <td>최대</td>
    <td>FHD</td>
    <td>HD</td>
  </tr>
  <tr>
    <td>다운로드</td>
    <td>무제한</td>
    <td>월 30회</td>
    <td>불가</td>
  </tr>
</table>

 

머리글

표에서 머리글은 <thead> 태그로 감쌈

행은 <tr> 태그로 감쌈

각 행 안에 있는 것들은 제목이기 때문에 <td>가 아니라 <th> 태그를 넣음

본문에 해당하는 행들은 <tbody> 태그로 감쌈

<thead>
  <tr>
    <th></th>
    <th>Premium</th>
    <th>Standard</th>
    <th>Basic</th>
  </tr>
  <tr>
    <th></th>
    <th>₩15,900</th>
    <th>₩10,900</th>
    <th>₩8,900</th>
  </tr>
</thead>
<tbody>
  <tr> ... </tr>
  ...
</tbody>

 

바닥글

표에서 바닥글은 <tfoot> 태그로 감쌈

<thead>와 마찬가지로 행은 <tr>로 감쌈

제목으로 쓰는 칸은 <th>

<table>
  <thead>
    <tr>
      <th></th>
      <th>Premium</th>
      <th>Standard</th>
      <th>Basic</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th>₩15,900</th>
      <th>₩10,900</th>
      <th>₩8,900</th>
    </tr>
  </tfoot>
</table>

 

테이블 스타일링

테두리 넣기

border 속성을 사용해서 테두리를 넣을 수 있음

표 전체에 테두리를 넣고 싶으면 <table> 태그에 적용하고, 각 셀에 적용하고 싶으면 <td> 태그에 적용하면 됨

table {
  border: 1px solid red; /* 표 전체의 테두리를 빨간색으로 */
}

th {
  border: 1px solid green; /* 제목 셀의 테두리를 초록색으로 */
}

td {
  border: 1px solid blue; /* 각 셀의 테두리를 파란색으로 */
}

테두리 겹치기

기본적으로 표의 테두리는 서로 간격이 있어서 표 전체, 각 셀마다 보임

이 간격을 없애고 테두리까지 겹치고 싶다면 border-collapse 속성 활용

table {
  border: 1px solid red;
  border-collapse: collapse;
}

th {
  border: 1px solid green;
}

td {
  border: 1px solid blue;
}

테두리 간격

테두리 사이의 간격을 직접 조절하고 싶다면 border-spacing이라는 속성 사용

table {
  border: 1px solid red;
  border-spacing: 10px;
}

th {
  border: 1px solid green;
}

td {
  border: 1px solid blue;
}