본문 바로가기

기초공부/WEB

[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 웹 프로그래밍 입문, 저자 : 임순범, 박희민, 이창환


'기초공부 > WEB' 카테고리의 다른 글

[CSS]생활코딩 WEB2-CSS 정리  (0) 2019.03.24
[HTML5]이미지 태그, 오디오 태그, 비디오 태그  (0) 2019.03.20
[HTML5]목록 태그  (0) 2019.03.20
[HTML5]기초 설명, 구조 태그  (0) 2019.03.20
[HTML5]생활코딩 WEB1 정리  (0) 2019.03.19