<th>태그로 테이블 행이름, 열이름 지정하기

이전글에서 HTML에서 자주 사용되는 <table>태그에 대해 간략하게 알아보았습니다.

이번에는 <table>태그에서 <th>태그를 통해 행이름과 열이름을 지정하는 방법을 알아보겠습니다.

 

수량과 금액은 열 이름, A지점과 B지점은 행 이름

<table>
  <tr>
    <th></th>
    <th scope="col">수량</th>
    <th scope="col">금액</th>
  </tr>
  <tr>
    <th scope="row">A 지점</th>
    <td>32</td>
    <td>$48</td>
  </tr>
  <tr>
    <th scope="row">B 지점</th>
    <td>13</td>
    <td>$45</td>
  </tr>
</table>

<th>는 특별한 역할을 맡은 <td>라고 할 수 있습니다. 일반 데이터를 표현하는 <td>와 달리, <th>는 자기가 속한 행이나 열을 대표하는 역할을 합니다. 헤더 셀이라고 하죠.

위의 예시에서 각 브랜치의 지점을 나타내는 1열의 2행(A지점),3행(B지점)을 <th>태그를 통해 표현하고 있습니다.
또한, 2열(수량)과 3열(금액)은 해당 열의 행이 나타내는 정보를 대변하는 헤더 셀임을 알 수 있습니다.

 

<th>의 scope 속성

위의 예시에서 <th>는 scope속성을 지니고 있습니다. 이 scope는 해당 <th>의 종류를 구분합니다. <th>는 가로 행의 대표가 될 수도있고, 세로 열의 대표가 될 수도 있습니다. 그냥 막연하게 <th>태그만 사용하면 어느 것을 나타내기 위함인지 모호하기 때문에 scope속성으로 명확하게 명시해줄 수 있습니다.

💡표의 구조와 관련된 태그

<caption> : 표의 제목을 나타내는 태그
<thead> : 제목 행을 그룹화하는 태그
<tfoot> : 바닥 행을 그룹화하는 태그
<tbody> : 본문 행을 그룹화하는 태그

 

 

 

아래의 HTML코드 실행 예제

<table>
    <caption>Monthly Savings</caption>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
</table>