html-examples/doc/html5/57_표.md

표

<table>
  <caption>주간 판매 보고서</caption>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">제품</th>
      <th scope="col">판매량</th>
      <th scope="col">매출</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>사과</td>
      <td>50</td>
      <td>50,000원</td>
    </tr>
    <tr>
      <td>바나나</td>
      <td colspan="2">품절</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>50</td>
      <td>50,000원</td>
    </tr>
  </tfoot>
</table>

• 설명: 모든 태그를 활용한 완전한 표 구조.

table

<table>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

• 설명: 간단한 1행 2열 표 생성.

tbody

<table>
  <tbody>
    <tr>
      <td>데이터 1</td>
      <td>데이터 2</td>
    </tr>
  </tbody>
</table>

• 설명: 표의 본문 데이터를 그룹화.

thead

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>나이</th>
    </tr>
  </thead>
</table>

• 설명: 표의 머리글 부분 정의.

tfoot

<table>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>100</td>
    </tr>
  </tfoot>
</table>

• 설명: 표의 바닥글 부분 정의.

caption

<table>
  <caption>학생 정보</caption>
  <tr>
    <td>홍길동</td>
    <td>20</td>
  </tr>
</table>

• 설명: 표에 제목 추가.

th

속성	설명
colspan	셀이 차지할 열 수를 지정합니다. (예: colspan="2")
rowspan	셀이 차지할 행 수를 지정합니다. (예: rowspan="2")
scope	셀이 어떤 데이터와 관련 있는지 정의합니다. (예: row, col, rowgroup)

<table>
  <tr>
    <th scope="col">제품</th>
    <th scope="col">가격</th>
  </tr>
</table>

• 설명: 머리글 셀로 열 제목 정의.

td

속성	설명
colspan	셀이 차지할 열 수를 지정합니다. (예: colspan="2")
rowspan	셀이 차지할 행 수를 지정합니다. (예: rowspan="2")

<table>
  <tr>
    <td>사과</td>
    <td>1000원</td>
  </tr>
</table>

• 설명: 데이터 셀로 내용 입력.

tr

<table>
  <tr>
    <td>1행 1열</td>
    <td>1행 2열</td>
  </tr>
  <tr>
    <td>2행 1열</td>
    <td>2행 2열</td>
  </tr>
</table>

• 설명: 표의 행을 정의.

col

속성	설명
span	적용될 열 수를 지정합니다. (예: span="2")

colgroup

속성	설명
span	적용될 열 수를 지정합니다. (예: span="2")

<table>
  <colgroup>
    <col span="1" style="background-color: lightblue;">
    <col span="1" style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <td>첫 번째 열</td>
    <td>두 번째 열</td>
  </tr>
</table>

• 설명: 열 그룹과 개별 열에 스타일 적용.