HTML - 웹 접근성을 고려하여 table 제대로 사용하기

닌니디자인 HTML 썸네일

table

데이터를 행(row)과 열(column)로 정리하여 표 형식으로 나타낼때 사용된다. 구조화된 데이터를 시각적으로 전달할 때 유용하다. 웹 접근성을 고려하여 작성해야 스크린 리더가 데이터를 분석하여 사용자에게 전달할 수 있고 SEO에도 유리하다. 

html table 태그

제목	설명	필수여부
caption	테이블의 목적이나 요약	O
colgroup	테이블의 열 그룹 정의	X
thead	테이블 열(column)의 머리글이나 제목	O
tbody	주요 데이터	O
tr	테이블의 행(row)	O
th	테이블 행의 헤더	O
scope	th가 어떤 데이터셀과 연관되어 있는지 지정 (가로 or 세로)	O

 

 

 

caption

웹접근성을 위해 필수로 작성해야 하지만 필요없는 디자인이라면 display:none; 으로 숨기지 않고 overflow:hidden; 등으로 숨겨준다.

table caption {
    position: absolute;
    width:0px;
    height: 0px;
    overflow: hidden;
}

wb_incandescent Tip

visibility:hidden; 으로 숨길 수도 있지만, 국내 스크린 리더는 내용을 읽는 반면 해외 스크린 리더는 내용을 읽지 못한다.

 

 

thead

caption과 마찬가지로 필수로 작성해야 하지만 필요없는 디자인이라면 숨겨서 사용한다.

table thead.hidden {
    position: absolute;
    width:0;
    height: 0;
    overflow: hidden;
}

 

 

scope

th에 필수로 입력해야 하는 속성으로 관련된 셀을 정의한다. 속성이 지정되지 않았거나 값이 비어있으면 브라우저는 헤더 셀이 적용되는 셀 집합을 자동으로 선택한다.

row

현재 행(row) 전체에 해당하는 헤더

<tr>
  <th scope="row">1월</th>
  <td>10,000</td>
  <td>5,000</td>
</tr>

 

col

현재 열(column) 전체에 해당하는 헤더

<tr>
  <th scope="col">월</th>
  <th scope="col">매출</th>
  <th scope="col">수익</th>
</tr>

 

rowgroup

여러 행(row)의 그룹(tbody, tfoot)

<tbody>
  <tr>
    <th scope="rowgroup">1분기</th>
    <td>10,000</td>
    <td>20,000</td>
  </tr>
</tbody>

 

colgroup

여러 열(column)의 그룹(colgroup)

<colgroup>
  <col span="2" style="background-color: #f2f2f2;">
</colgroup>
<thead>
  <tr>
    <th scope="colgroup">상반기</th>
    <th scope="col">매출</th>
  </tr>
</thead>

 

 

더 이상 사용되지 않는 속성

아래 나열된 속성들은 더이상 사용되지 않으므로 CSS 속성을 사용해야 한다.

 

align

부모 요소 내에서 테이블의 수평 정렬. (left, center, right 등)

 

bgcolor

테이블의 배경색.

 

border

테이블 테두리.

 

cellpadding

셀의 내용과 테두리 사이의 공간.

 

cellspacing

두 셀 사이의 공간 크기. 

 

frame

테이블을 둘러싼 프레임의 어느 면을 표시해야 하는지 정의. (void, above, below, hsides, vsides, lhs, , rhs, box)

 

rules

규칙(테두리)이 표시되는 위치 정의. (none, groups, rows, cols)

 

width

테이블의 너비

 

 

 

---

 

참고사이트

<table>: The Table element - HTML: HyperText Markup Language | MDN