테이블

표를 만들고 싶다면 테이블 태그를 사용하면 된다.

테이블 태그

<table>

표를 나타낼 때는 <table> </table> 태그를 사용한다.

테이블의 행은 <tr> </tr> 태그로 감싸고, 각 데이터들은 <td> </td> 태그로 넣는다.

머리글 <thead>

머리글은 <thead> </thead> 태그로 감싸면 된다. 이때, 행은 동일하게 <tr>태그로 감싸주면 된다.
여기서 중요한 점은 각 행 안에 있는 것들은 제목이기 때문에 <td>가 아닌 <th> </th>태그를 사용한다.

그리고 본문에 해당하는 행들은 <tbody> </tbody> 태그로 감싸주면 된다.

바닥글 <tfoot>

표의 바닥글은 <tfoot> </tfoot> 태그로 감싸면 된다. <thead>와 마찬가지로 행은 <tr>로 감싸고 제목을 쓰는 칸은 <th> 태그를 넣는다.

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

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

👆🏻라잌디스

---

테이블 스타일링

테두리 넣기

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;
}