Table colgroup 웹접근성 - table colgroup webjeobgeunseong

Question

테이블 관련 요소

표 관련 요소는 열과 행으로 구분되는 2차원 형태의 데이터 테이블을 마크업할 때 사용합니다. 주요 요소로는 table, caption, colgroup, col, thead, tbody, tfoot, tr, th, td 요소가 있습니다. 기존에 웹 문서를 제작할 때는 table 관련 요소를 레이아웃을 위해 주로 사용하였는데, 이는 구조적인 마크업을 해치며 웹접근성 관점에서도 바람직하지 않은 사용 사례라고 볼 수 있습니다.

목차 Show

테이블 관련 요소
table, tr, th, td 요소
caption 요소
colgroup, col 요소
thead, tbody, tfoot 요소

table, tr, th, td 요소

데이터 테이블은 table 요소에 행을 의미하는 tr 요소를 자식 요소로 포함하고, tr 요소 내에서는 th 요소와 td 요소를 사용하여 마크업합니다.th 요소는 데이터 테이블의 제목 셀을 의미하며, 이는 데이터 테이블의 필드에 해당합니다. 이때 th 요소에 scope 속성을 사용하여 해당 셀이 영향을 주는 내용 셀의 범위를 지정할 수 있습니다. 예를 들어 th 요소로 마크업한 셀이 동일한 열에 있는 내용 셀과 연관성이 있는 경우 scope="col", 동일한 행에 있는 내용 셀과 연관성이 있는 경우 scope="row" 형식으로 지정할 수 있습니다.

또한 행이나 열 그룹으로 지정된 범위의 제목 셀이라면 colgroup, rowgroup 등의 값을 지정할 수도 있습니다. td 요소는 테이블의 내용 셀을 의미합니다. HTML5에서 td 요소는 섹셔닝 루트 요소이기 때문에 td 요소 안에 제목 등을 사용하였다고 하더라도 독립된 콘텐츠로 인식되어 아웃라인에 영향을 주지 않는 것이 특징입니다.

만약 특정 셀을 병합하고자 할 때 병합하고자 하는 방향에 따라 열이 다른 셀을 병합할 때는 colspan 속성을, 행이 서로 다른 셀을 병합할 때는 rowspan 속성을 사용할 수 있습니다.

Codepen으로 보기

caption 요소

caption 요소는 table 요소에 제목이나 설명을 마크업할 때 사용하는 요소입니다. caption 요소는 table 요소 안에서 가장 먼저 마크업해야 하며, 필수 요소는 아닙니다. 만약 테이블을 HTML5에서 추가된 신규 요소인 figure 안에 마크업할 경우, figcaption이 caption의 역할을 대신하도록 할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table, tr, th, td 요소</title>
</head>
<body>
 <section>
  <h2>데이터 테이블</h2>
  <table border="1">
   <caption>전 세계 웹 브라우저 점유율</caption>
   <tr>
    <th scope="col">웹브라우저</th>
    <th scope="col">점유율</th>
   </tr>
   <tr>
    <td>익스플로러</td>
    <td>38.79%</td>
   </tr>
   ...
  </table>
 </section>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

colgroup, col 요소

col 요소는 테이블의 열 그룹을 의미합니다. colgroup 요소를 사용하여 2개 이상의 열을 그룹화한 경우 span 속성을 사용할 수 있습니다. 이때 span="2"는 2개의 열을 그룹화했음을 의미하며, colgroup 요소의 자식 요소로 col 요소를 사용하여 2개의 열이 각각 어떤 의미를 가지는지에 대한 의미를 부여하고 특정 열에 스타일을 지정할 수 있습니다. 그러나 의미 없이 스타일만을 적용하기 위해 사용하는 것은 바람직하지 않습니다.

colgroup 요소는 caption 요소 다음에 마크업해야 하며, thead, tbody, tfoot 요소보다 이전에 마크업해야 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>table, tr, th, td 요소</title>
</head>
<body>
 <section>
  <h2>데이터 테이블</h2>
  <table border="1">
   <caption>전 세계 웹 브라우저 점유율</caption>
   <colgroup class="ranking"></colgroup>
   <colgroup class="team"></colgroup>
   <colgroup span="2" class="game">
    <col class="victory">
    <col class="defeat">
   </colgroup>
   <tr>
    <th scope="col">웹브라우저</th>
    <th scope="col">점유율</th>
   </tr>
   <tr>
    <td>익스플로러</td>
    <td>38.79%</td>
   </tr>
   ...
  </table>
 </section>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

thead, tbody, tfoot 요소

thead, tbody, tfoot 요소는 테이블의 행 그룹을 의미합니다. 이때 thead 요소는 데이터 테이블의 제목 셀 그룹으로, tbody 요소는 테이블의 본문 행을 의미하며, tbody 요소는 원래 필수 요소입니다. 그러나 tbody 요소를 생략하더라도 대다수의 웹 브라우저에서 tbody 요소가 있는 것으로 가정하고 DOM을 구성합니다.

마지막으로 tfoot 요소는 레코드 내용의 소계나 합계 등의 정보에 해당하는 푸터 행을 의미하며, thead 요소와 tfoot 요소는 table 요소 내에서 한 번만 사용할 수 있습니다. 또한 마크업 시 thead, tbody, tfoot 또는 thead, tfoot, tbody 순서로 작성할 수 있으며, 두 가지 경우 모두 tfoot 요소는 테이블의 가장 마지막에 렌더링 됩니다.

Codepen으로 보기

여기서 잠깐

thead, tfoot 요소의 장점은 무엇인가요?

웹 브라우저에 따라 테이블의 데이터가 매우 많기 때문에 인쇄할 때 여러 장에 걸쳐 출력되는 경우 페이지마다 테이블의 thead, tfoot 정보를 인쇄할 수 있습니다. 그리고 thead 요소 다음에 tfoot 요소의 정보가 위치하여 순차적으로 콘텐츠에 접근하는 시각 장애인의 경우에는 점수 통계 및 등수와 같은 테이블 종합 정보를 일일이 모든 셀의 데이터를 다 읽지않아도 먼저 알 수 있습니다.

일반 사용자의 경우에는 웹 브라우저에 나타나는 테이블 데이터를 열과 행, 그리고 셀로 구별하는 것이 어렵지 않습니다. 하지만 시각 장애가 있는 사용자나 화면 낭독기의 경우에는 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단하기 때문에 열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않습니다. 따라서 이러한 경우에는 테이블의 열과 행의 제목 셀에 해당하는 th 요소에 scope 속성을 사용할 것을 권장합니다.

th 요소에 scope 속성을 지정하고 해당 값으로 col이나 row, rowgroup, colgroup를 할당하면 해당 셀이 열의 제목인지,행의 제목인지 등을 알 수 있습니다.

scope 속성의 경우 주로 병합되지 않은 단순한 형태의 테이블 유형에 사용할 수 있습니다. 그리고 좀 더 복잡하게 병합된 셀의 경우, th 요소는 id 속성으로 네이밍을 하고 해당 제목 셀과 연관성이 있는 내용 셀에 headers 속성과 id값을 연결하여 제목 셀과 내용 셀의 관계를 지정할 수 있습니다.

일부 스크린 리더의 경우 이런 방법으로 제목 셀과 내용 셀의 관계를 지정하면 제목 셀과 내용 셀을 함께 읽어 주기 때문에 데이터의 의미 및 관계를 파악하기가 쉽다는 장점이 있습니다. scope 속성이나 id, headers 속성의 사용 형식은 다음과 같습니다.

- scope 속성의 사용
<table border="1">
 <tr>
  <th scope="col">열 제목</th>
  <th scope="col">열 제목</th>
  <th scope="col">열 제목</th>
 </tr>
 <tr>
  <th scope="row">행 제목</th>
  <td>내용 셀</td>
  <td>내용 셀</td>
 </tr>
</table>

- id, headers 속성의 사용
<table>
 <tr>
  <th>&nbsp;</th>
  <th id="imported" colspan="2">수입품목</td>
 </tr>
 <tr>
  <th>&nbsp;</th>
  <th id="cosmetic">화장품</td>
  <th id="car">자동차</td>
 </tr>
 <tr>
  <th id="america">미국</th>
  <td headers="imported cosmetic america">7000</td>
  <td headers="imported car america">30</td>
 </tr>
 <tr>
  <th id="japan">일본</th>
  <td headers="imported cosmetic japan">5000</td>
  <td headers="imported car japan">80</td>
 </tr>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

여기서 잠깐

scope 속성과 headers 속성을 같이 사용해도 되나요?

이들 속성 모두 제목 셀이 어떤 데이터를 안내하는지를 알려 주며, 보조 기기의 접근성을 도와주는 역할을 합니다. 예를 들면 다음과 같습니다.

<th scope="col" id="tel">전화번호</th>
… 생략 …
<th scope="raw" id="a">홍보실</th>
<td headers="tel a">02-123-1234</td>

1
2
3
4

이렇게 되면 중복된 정보를 제공하는데, 코드를 작성하는 사람도 중복 작업을 하는 것입니다. 그러므로 둘 중 하나를 테이블의 구조에 맞추어 선택하여 사용해야 합니다. 예를 들어 scope 속성은 제목 셀이 명확한 단순한 표에 적용하면 충분히 표 구조를 나타낼 수 있습니다. headers 속성은 셀 병합이 많이 되거나 표 정보가 복잡한 경우 또는 thead가 2줄이 되어 셀 제목 구조가 복잡한 양식의 경우 각 셀의 정보를 id, headers 속성으로 명확하게 연결하는 것이 좋습니다.

👍id, headers 속성을 이용한 접근성 높은 테이블 마크업하기

데이타 테이블 작성 시 테이블의 내용을 이해할 수 있도록 요약 정보를 제공하는 것치 필요합니다. 요약 정보의 경우 summary 속성을 사용하여 제공할 수 있으며 해당 요약 정보를 통해 스크린 리더 사용자는 테이블의 정보를 다 듣지 않아도 어떤 내용이 포함되어 있는지를 파악할 수 있습니다. 그러나 summary 속성의 경우 HTML5 규격에서 제외 된 속성이기 때문에 HTML5 문서 형식에 맞게 요약 정보를 제공하고자 할 경우 새롭게 추가된 figure, figcaption 요소를 사용하거나 aria-describedby으로 표의 요약 정보를 제공하고 있는 단락을 연결하거나 caption 요소 내에 포함하여 제공하거나 할 수 있습니다.

<table summary="본사의 종합상황실, 비서실, 홍보실의 전화번호 및 팩스번호 안내">
 <caption>본사 부서별 연락처</caption>
 ...
</table>
또는
<table>
 <caption>
  본사 부서별 연락처<br>
  <span>본사의 종합상황실, 비서실, 홍보실의 전화번호 및 팩스번호 안내</span> 
 </caption>
 ...
</table>

1
2
3
4
5
6
7
8
9
10
11
12

Codepen으로 보기

여기서 잠깐

Table 내의 내용 없는 셀(td) 표현

값이 없거나 0인 경우에는 아무것도 없는 <td></td>와 같이 빈 셀로 표현하는 경우가 있습니다. 이런 경우 CSS에서 border-collapse : collapse를 사용하지 않는 경우 설정한 border가 제대로 표현되지 않을 수 있으며, 스크린 리더를 사용할 경우 내용 없는 빈 셀은 테이블의 구조의 파악을 어렵게 만들기도 합니다. 이 경우에는 값을 사용하여 빈 데이터를 넣거나 값이 없는 경우는‘없음’과 같은 텍스트를 삽입한 후 CSS를 사용하여 텍스트를 숨겨서 제공하면 디자인상의 문제 없이 table의 정보 접근성을 높일 수 있습니다.

🌐좀 더 자세한 정보는 MDN 기술 문서에서 소개하고 있는 table 요소, tr 요소, th 요소, td 요소, caption 요소, colgroup 요소, col 요소, scope 속성, id 속성, headers 속성을 참조하시기 바랍니다.

Table colgroup html5 웹접근성 웹접근성 연구소 Table scope 웹접근성 레이아웃 테이블 Colgroup HTML5 table

Table colgroup 웹접근성 - table colgroup webjeobgeunseong

테이블 관련 요소

table, tr, th, td 요소

caption 요소

colgroup, col 요소

thead, tbody, tfoot 요소

관련 게시물

안드로이드 테이블 레이아웃 버튼 - andeuloideu teibeul leiaus beoteun

광고하는

최근 소식

Lg 클립보드 복구 - lg keullibbodeu boggu

세 레비 잡는 법 - se lebi jabneun beob

마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji

브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon

딸기 씨 키우기 - ttalgi ssi kiugi

스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu

마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong

갤럭시 A31 단점 - gaelleogsi A31 danjeom

실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu

식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의