10. Tabular data

Index

Index <table><tr>, <th>, <td>colspan, rowspan <thead>, <tbody>, <tfoot><caption>, <colgroup>scope

`<table>`

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

`<tr>, <th>, <td>`

<tr> 태그는 테이블의 행을 나눌 때 사용합니다. <td> 태그는 <tr> 태그로 나눈 행에서 셀을 분리할 때 사용합니다. HTML 요소의 모든 종류(텍스트, 이미지, 목록, 테이블 등)를 포함할 수 있습니다. <th> 태그는 행, 열의 머리말을 나타내는 데 사용합니다. 글씨를 굵고 가운데 정렬하여 보여줍니다.


<table>
    <tr>
        <th>구분</th>
        <th>이름</th>
        <th>판매량</th>
    </tr>
    <tr>
        <td>1</td>
        <td>해리포터</td>
        <td>100</td>
    </tr>
</table>

`colspan, rowspan`

<td> 또는 <th> 태그 요소에 Colspan 속성을 사용하면 가로로 셀들을 병합할 수 있습니다. 또한 rowspan 속성을 사용하면 세로로 셀들을 병합할 수 있습니다. 이때 병합하고 싶은 셀의 개수를 지정해 줍니다.


<tr>
    <td colspan="2">총 판매량</td>
    <td>600</td>
</tr>

`<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>
    <!-- 
        1. thead, tbody, tfoot, caption이나 colgroup은 하지 않습니다
        2. 구도를 잡는 용도로 사용하지 않습니다.
    -->
    <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>

`<caption>, <colgroup>`

colgroup에서 col에 span을 사용하여 여러 셀을 지정하는 것도 가능합니다.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Page Title</title>
    <style>
      table {
        width: 100%;
      }
      table,
      tr,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      .구분 {
        width: 20%;
      }
      .이름 {
        width: 50%;
      }
      .판매량 {
        width: 20%;
      }
    </style>
  </head>
  <body>
    <!-- 
        1. thead, tbody, tfoot, caption이나 colgroup은 하지 않습니다
        2. 구도를 잡는 용도로 사용하지 않습니다.
    -->
    <table>
      <caption>
        이 table은 영국에서 최초로 시작되어 일년에 한바퀴 돌면서...
      </caption>
      <colgroup>
        <col class="구분" />
        <col class="이름" />
        <col class="판매량" />
      </colgroup>
      <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>

`scope`

<th> 요소에 scope 속성을 사용해 머리말이 열에 대한 것인지 아니면 행에 대한 것인지 나타낼 수 있습니다.

row : 행에 대한 머릿말입니다.

col : 열에 대한 머릿말입니다.

scope 속성을 이용한 수평, 수직 테이블의 구현


<!-- 직접 구현하여 결과를 확인해 보세요 -->
<table>
  <caption>요일별 급식 만족도</caption>
  <tbody>
    <tr>
      <th></th>
      <th scope="col">월요일</th>
      <th scope="col">화요일</th>
      <th scope="col">수요일</th>
      <th scope="col">목요일</th>
      <th scope="col">금요일</th>
      <th scope="col">토요일</th>
    </tr>      
    <tr>
      <th scope="row">메뉴</th>
      <td>돈까스</td>
      <td>짜장면</td>
      <td>볶음밥</td>
      <td>해물라면</td>
      <td>잔치국수</td>
      <td>떡볶이</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">만족도</th>
      <td>3/5</td>
      <td>4/5</td>
      <td>1/5</td>
      <td>5/5</td>
      <td>2/5</td>
      <td>3/5</td>
    </tr>
  </tfoot>
</table>

scope, colgroup에 대한 보강 설명

- HTML: Hypertext Markup Language | MDN

HTML 요소는 표의 열을 묶는 그룹을 정의합니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/colgroup

- HTML: Hypertext Markup Language | MDN

HTML 요소는 행과 열로 이루어진 표를 나타냅니다. Simple table with header First name Last name John Doe Jane Doe Table with thead, tfoot, and tbody Header content 1 Header content 2 Footer content 1 Footer content 2 Body content 1 Body content 2 Table with colgroup Countries Capitals Population Language USA Washington D.C.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/table#%ED%96%89%EA%B3%BC_%EC%97%B4_%EB%B2%94%EC%9C%84_%EC%A7%80%EC%A0%95