#07 HTML 테이블 요소

2022. 1. 14. 20:00HTML

 

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

 

반응형

'HTML' 카테고리의 다른 글

#09 HTML 이미지 요소  (0) 2022.01.15
#08 HTML 링크 요소  (0) 2022.01.15
#06 HTML 서식 요소  (0) 2022.01.14
#05 HTML 영역 분할 요소  (0) 2022.01.14
#04 HTML 목록 요소  (0) 2022.01.13