[HTML] 웹표준 table 구조

반응형

웹표준을 지키는 테이블 구조는 다음과 같이 작성할 수 있습니다.

<table>
  <caption>테이블 캡션</caption>
  <colgroup>
    <col style="width: 25%;">
    <col style="width: 50%;">
    <col style="width: 25%;">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">컬럼 1</th>
      <th scope="col">컬럼 2</th>
      <th scope="col">컬럼 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="column1">행 1, 열 1</td>
      <td headers="column2">행 1, 열 2</td>
      <td headers="column3">행 1, 열 3</td>
    </tr>
    <tr>
      <td headers="column1">행 2, 열 1</td>
      <td headers="column2">행 2, 열 2</td>
      <td headers="column3">행 2, 열 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">테이블 요약 정보</td>
    </tr>
  </tfoot>
</table>

위 코드에서는 table 요소를 사용하여 테이블을 생성하고, caption 요소를 사용하여 테이블에 캡션을 추가합니다.

thead 요소와 tbody 요소, 그리고 tfoot 요소를 사용하여 각각의 영역을 지정합니다.

th 요소를 사용하여 각 컬럼의 제목을 추가하고, td 요소를 사용하여 각 셀의 내용을 추가합니다.

headers 속성을 사용하여 해당 셀이 어떤 제목 셀에 속하는지를 지정합니다.

colspan 속성을 사용하여 여러 셀을 병합할 수 있습니다.

 

---

tabel 구조

table 태그를 사용하지 않고 테이블을 작성하는 방법은 div와 CSS를 이용해 다음과 같이 작성할 수 있습니다.

<div class="table">
  <div class="row header">
    <div class="cell">컬럼 1</div>
    <div class="cell">컬럼 2</div>
    <div class="cell">컬럼 3</div>
  </div>
  <div class="row">
    <div class="cell">행 1, 열 1</div>
    <div class="cell">행 1, 열 2</div>
    <div class="cell">행 1, 열 3</div>
  </div>
  <div class="row">
    <div class="cell">행 2, 열 1</div>
    <div class="cell">행 2, 열 2</div>
    <div class="cell">행 2, 열 3</div>
  </div>
</div>

그리고 CSS를 이용하여 각 요소들을 스타일링합니다.

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.row {
  display: table-row;
}

.header {
  font-weight: bold;
}

.cell {
  display: table-cell;
  padding: 0.5rem;
  border: 1px solid black;
}

이렇게 하면 table 태그를 사용하지 않고도 웹 접근성을 고려한 테이블을 만들 수 있습니다. 

하지만 table 태그를 사용한 테이블과는 달리, 스크린 리더 등 보조 기술에서는 일부 정보가 생략될 수 있으므로 주의해야 합니다. 따라서 table 태그를 사용한 테이블을 만들 수 있다면 그 방법을 우선 고려해보는 것이 좋습니다.

 

참고

https://www.w3schools.com/html/html_tables.asp

HTML Tables