[HTML5]표 태그

표 태그에 대해 설명합니다

모든 포스트 목록

표의 구성 요소

<table border="테두리">

표의 최상위 태그, <tr>, <th>, <td> 태그로 구성

• border 속성 : 표의 테두리를 지정

<tr> <td>or<th> 태그 </tr>

하나의 행(table row), 이 태그 안에 셀을 정의한다

<td>셀의 값</td>

각 셀의 데이터(table data)

<th>제목의 값</th>

제목(table header)

셀 합치기

<td>의 셀을 병합할 수 있다

<td rowspan="병합할 셀의 수">

위아래 줄(rows)의 셀 병합

< td colspan="병합할 셀의 수">

옆 간(column)의 셀 병합

표의 구조적 표현

문서를 구조화 하듯이, 표를 구조화하여 표현한다

<caption>

표의 설명 제목

<thead>

표의 머리줄

<tbody>

표의 본문

<tfoot>

표의 꼬리줄

표 태그 사용 예시

<table>
  <caption>[caption]</caption>
  <thead>
    <tr>
      <th>[제목1]</th><th>[제목2]</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[내용1]</td><td>[내용2]</td>
    </tr>
  </tbody>
  <tfoot>
    <th>[제목1]</th><td>[내용3]</td>
  </tfoot>
</table>

결과

#html5 #표
참고 : HTML5 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환