#07 HTML 테이블 요소

 

<table> 태그

• 표의 시작과 끝을 표시

 

- border 속성 : 표의 테두리 두께 지정

 

<caption> 태그

• 표의 제목을 표현

 

<tr> 태그

• 행의 시작과 끝을 표시

 

<th> 태그, <td> 태그

• <th> 요소는 표의 헤더 셀을 표현한다.
• <td> 요소는 표의 데이터 셀을 표시한다.

- colspan 속성 : 가로 셀 병합

- rowspan 속성 : 세로 셀 병합

 

<thead> 태그, <tbody> 태그, <tfoot> 태그

• 테이블을 그룹핑할 때 사용한다.
• 레이아웃에 영향을 주지 않는다.

 

<table border="1">
  <caption>용돈기입장</caption>
  <thead>
    <tr>
      <th colspan="2">1월</th>
      <th colspan="2">2월</th>
    </tr>
    <tr>
      <th>구매물품</th>
      <th>금액</th>
      <th>구매물품</th>
      <th>금액</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>과자</td>
      <td>1,500원</td>
      <td>커피</td>
      <td>2,500원</td>
    </tr>
    <tr>
      <td>공책</td>
      <td>1,000원</td>
      <td>사탕</td>
      <td>1,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>2,500원</td>
      <td>합계</td>
      <td>3,500원</td>
    </tr>
  </tfoot>
</table>

---