html의 table 요소

Table 사용이 권장되는 경우

일반적으로 데이터를 표시하거나 비교할 때에는 Table 요소를 사용한다.
단지 콘텐츠를 깔끔하게 표시하고 싶을 경우에는 Table 요소를 사용하는것보다는 ccs의 grid를 사용하는것이 권장된다.

Table 요소의 접근성

table 요소의 암묵적인 ARIA 역할은 table입니다. table의 행을 선택할 수 있거나 2차원 탐색이 있거나 사용자가 셀의 순서를 재구성할 수 있을 경우에는 role=”grid”를 설정해야 한다. grid 에서 행을 펼치거나 접을수 있으면 role=”treegrid” 로 설정해야 한다.

Table에 사용되는 요소들

• caption
• colgroup
• thead
• tbody
• tfoot

caption 요소

Table의 제목을 표시하는데 사용된다. table 태그에서 첫번째 중첩 요소로 위치해야한다.
css 속성인 caption-side 를 사용해 caption의 위치를 변경할 수 있다.

caption은 한눈에 이해 가능할 정도로 간결해야한다. table 요소를 요약하기 힘들 경우에는 figure 요소를 이용해서 table를 figure 요소에 중첩시키고 긴 제목을 figurecaption 요소에 쓰는 방법도 있다.

table의 section 구성

table은 thead, tbody, tfoot 3가지로 구성되며, 각각은 모두 선택사항이다.
이러한 요소들은 접근성에 도움이되거나 방해되기 보다는 사용성 측면에서 이점을 제공한다.
예로는 각 요소별로 스타일을 지정해 tbody만 스크롤 되도록 할 수 있다.
3 요소 모두 암시적 ARIA role은 rowgroup 이고 요소에 특화된 속성을 가지지 않는다.

table contents

각 행은 tr 로 표시하고 하나의 행은 0개 이상의 셀을 가진다.
셀은 header 셀인 경우에는 th 를 사용하고 일반 셀인 경우에는 td 로 표시한다.

사용자 에이전트 스타일시트(브라우저에서 제공하는 스타일시트)는 기본적으로 th는 굵게 표시하고 각 셀들 사이에 border가 적용된다.
th는 암묵적인 ARIA 역할인 colheader 또는 rowheader 가 적용된다. (시멘틱 요소라는 뜻)

th의 scope 속성을 사용해 해당 제목 셀의 방향을 표시한다. (row or col or rowgroup or colgroup). scope를 명시해주지 않아도 브라우저에서 기본값을 적용한다.

• css 속성 border-collapse
  • collapse or separate
• css 속성 border-spacing
  • 각 셀 사이의 간격

셀 병합

th 또는 td 요소에 rowspan 또는 colspan 속성을 사용하면 셀을 병합해서 사용할 수 있다.

복잡한 테이블의 경우에는 제목 셀의 id를 headers 속성에 공백을 구분자로 사용한 문자열로 지정해주면 정확하게 셀과 제목 셀을 연결 시킬 수 있다.

<table>
  <caption>MLW Alumni</caption>
  <thead>
    <tr>
      <th rowspan="2" id="name" scope="col">Name</th>
      <th colspan="2" id="path">Career path</th>
      <th rowspan="2" id="year">Year</th>
    </tr>
    <tr>
      <th id="past" scope="col">Past</th>
      <th id="future" scope="col">Destiny</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="hal" scope="row">Hal Gibrah</th>
      <td headers="hal path past">Calculator</td>
      <td headers="hal path future">Mars rover</td>
      <td>2020</td>
    </tr>
    <tr>
      <th id="cathy" scope="row">Cathy Terr</th>
      <td headers="cathy path past">Waste disposal</td>
      <td headers="cathy path future">Automated teller</td>
      <td>2018</td>
    </tr>
  </tbody>
</table>

표 스타일링

colgroup 은 column의 그룹을 나타내기 위해서 사용한다. colgroup은 table 요소에 중첩되어야 하며, caption 뒤에 위치해야한다. colgroup 내부에는 col 요소가 중첩된다. colgroup은 주로 열의 스타일을 지정할 때 사용한다.

• colgroup 없이 스타일링 하기
  

    <style>
      td:nth-child(1),
      th:nth-child(1) {
        background-color: lightblue;
      }
  
      td:nth-child(2),
      th:nth-child(2) {
        background-color: lightgreen;
      }
    </style>
     <table>
        <caption>
          without colgroup
        </caption>
        <thead>
          <tr>
            <th>헤더 1</th>
            <th>헤더 2</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>내용 1</td>
            <td>내용 2</td>
          </tr>
        </tbody>
      </table>

• colgroup으로 스타일링 하기
  

  <table>
    <colgroup>
      <col style="background-color: lightblue;">
      <col style="background-color: lightgreen;">
    </colgroup>
    <thead>
      <tr>
        <th>헤더 1</th>
        <th>헤더 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>내용 1</td>
        <td>내용 2</td>
      </tr>
    </tbody>
  </table>