[HTML] 테이블

<table>
  <thead>
    <tr>
     <th>헤더1</th>
     <th>헤더2</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>내용1</td>
    <td>내용2</td>
   </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>결과합1</th>
      <th>결과합2</th>
    </tr>
  </tfoot>
</table>

<table></table> 테이블은 표를 넣는 태그이다. 

<thead></thead> 표에서 머리글이 들어가는 곳이다.

<tbody></tbody> 표에서 데이터가 들어가는 곳이다.

<tfoot></tfoot> 표에서 바닥글이 들어가는 곳이다.

<tr></tr> tr을 통해 행을 나눠준다.

<td></td> 데이터가 들어가는 것을 나타낸다.

<th></th> 데이터가 뜻하는 제목을 나타낸다.

헤더1	헤더2
내용1	내용2
결과합1	결과합2

다음과 같은 표처럼 나오게 된다.

table {
  border: 1px solid red;  /* 테두리 색깔을 빨갛게*/
  border-collapse: collapse; /*테두리 사이 간격 없애기*/
}

table {
  border-spacing: 10px; /*테두리 사이 간격 조정*/
}

border 요소를 사용해서 테두리 색깔을 변경할 수 있다.

border-collapse: collapse;를 사용해 테두리 사이 간격을 없앨 수 있다.

border-spacing: a px 를 사용해 테두리 사이 간격을 a px로 만들 수 있다.