Index

<table>

<table> 태그는 테이블을 생성할 때 사용합니다. 하나의 테이블을 정의합니다.

<table> 태그는 컨테이너 요소로서 그 내부에는 제목(caption)과 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th) 역할을 하는 여러 요소들이 자식으로 사용됩니다.

table의 마크업 구조도

스크린샷 2022-02-25 오후 12.59.33.png

누르면 큰 이미지로 볼 수 있습니다.

<caption>

<caption>은 테이블의 제목이나 설명을 의미합니다. <table> 요소의 첫번째 자식으로 사용해야합니다.

<table>
		<caption> 이달의 책 판매량 </caption>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
</table>

<thead>, <tbody>, <tfoot>

<thead>, <tbody>, <tfoot> 태그는 각각 머리글, 본문, 바닥 글을 의미 합니다. 테이블의 내용이 많을 때 <thead>와 <tfoot>는 머리글과 바닥 글, 본문으로 테이블의 구역을 나누는 요소로 사용합니다. 이 요소들은 테이블의 레이아웃에 영향을 미치지 않습니다. 하지만 CSS를 사용하여 디자인의 스타일을 지정할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Title</title>
    <style>
      table,
      tr,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>구분</th>
          <th>이름</th>
          <th>판매량</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>해리포터</td>
          <td>100</td>
        </tr>
        <tr>
          <td>2</td>
          <td>헝거게임</td>
          <td>200</td>
        </tr>
        <tr>
          <td>3</td>
          <td>반지의제왕</td>
          <td>300</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">총 판매량</td>
          <td>600</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>