HTML 테이블 고급 기능 및 접근성

Attributions and copyright licensing (opens in a new tab) by Mozilla Contributors (opens in a new tab) is licensed under CC-BY-SA 2.5 (opens in a new tab).

표에 캡션 추가하기

표에 캡션을 <caption> 요소 안에 넣고 <table> 요소 안에 중첩하여 caption을 지정할 수 있습니다. caption은 opening tag 바로 아래에 넣어야 합니다.

이 기능은 페이지를 스캔할 때 표가 유용한지 여부를 빠르게 파악하고자 하는 모든 독자에게 유용하지만, 특히 시각 장애가 있는 사용자에게 유용합니다.

🦋 summary 속성은 <table> 요소에 설명을 제공하는 데에도 사용할 수 있으며, 이 역시 화면 리더에서 읽습니다. 그러나 summary은 더 이상 사용되지 않으며 시각 장애가 있는 사용자가 읽을 수 없으므로(페이지에 표시되지 않음) 대신 <caption> 요소를 사용하는 것이 좋습니다.

<thead>, <tfoot>, <tbody>로 구조 추가하기

테이블의 구조가 조금 더 복잡해지면 테이블에 더 많은 구조적 정의를 부여하는 것이 유용합니다. 이를 위한 한 가지 명확한 방법은 표의 headers, 바닥글 및 본문 섹션을 마크업할 수 있는 <thead>, <tfoot> 및 <tbody>를 사용하는 것입니다.

이러한 요소는 화면 리더 사용자가 표에 더 쉽게 액세스할 수 있게 해주지 않으며, 그 자체로 시각적 향상을 가져오지도 않습니다. 그러나 스타일과 레이아웃에 매우 유용하며 표에 CSS를 추가하는 데 유용한 후크 역할을 합니다. 몇 가지 흥미로운 예를 들자면, 긴 표의 경우 인쇄된 모든 페이지에서 표 headers과 바닥글이 반복되도록 하고 표 본문은 한 페이지에 표시하고 위아래로 스크롤하여 내용을 볼 수 있도록 할 수 있습니다.

아래의 경우 사용됩니다.

• <thead> 요소는 표에서 headers에 해당하는 부분을 감싸야 합니다. 일반적으로 열 headers이 포함된 첫 번째 행이지만 항상 그런 것은 아닙니다. <col> / <colgroup> 요소를 사용하는 경우 테이블 헤더는 그 바로 아래에 와야 합니다.
• <tfoot> 요소는 표에서 바닥글인 부분을 감싸야 합니다. 예를 들어 이전 행의 항목이 합산된 마지막 행이 여기에 포함될 수 있습니다. 표 바닥글은 예상대로 표 하단에 포함하거나 표 headers 바로 아래에 포함할 수 있습니다(브라우저에서는 여전히 표 하단에 렌더링됨).
• <tbody> 요소는 표 headers이나 바닥글에 포함되지 않은 표 콘텐츠의 다른 부분을 감싸야 합니다. 구조에 따라 표 headers 아래에 표시되거나 때로는 바닥글에 표시될 수 있습니다.

🦋 <tbody>는 코드에 지정하지 않은 경우 암시적으로 모든 표에 항상 포함됩니다. 이를 확인하려면 <tbody>가 포함되지 않은 이전 예시 중 하나를 열고 브라우저 개발자 도구에서 HTML 코드를 살펴보면 브라우저에서 이 태그를 추가한 것을 확인할 수 있습니다. 굳이 이 태그를 포함해야 하는 이유가 궁금할 수도 있지만, 테이블 구조와 스타일을 더 잘 제어할 수 있으므로 반드시 포함해야 합니다.

테이블 중첩

<table> 요소를 포함한 전체 구조를 포함한다면 다른 표 안에 표를 중첩할 수 있습니다. 일반적으로 이 방법은 마크업을 더 혼란스럽게 만들고 화면 리더 사용자의 접근성을 떨어뜨리므로 권장하지 않으며, 대부분의 경우 기존 표에 추가 셀/행/열을 삽입하는 것이 더 나을 수 있습니다. 그러나 다른 소스에서 콘텐츠를 쉽게 가져오려는 경우와 같이 필요한 경우도 있습니다.

시각 장애 사용자를 위한 테이블

표는 데이터에 빠르게 액세스하고 다양한 값을 조회할 수 있는 편리한 도구가 될 수 있으나 시각장애인에게는 표를 해석하는 것이 상당히 어려울 수 있습니다. 하지만 적절한 마크업을 사용하면 시각적 연상을 프로그래밍 방식으로 대체할 수 있습니다.

참고: 2017년 WHO 데이터에 따르면 시각 장애를 가진 인구는 약 2억 5,300만 명에 달합니다.

이 문서 섹션에서는 가능한 한 접근하기 쉬운 표를 만들기 위한 추가 기술을 제공합니다.

열 및 행 headers 사용

스크린 리더는 모든 headers를 식별하고 이를 사용하여 headers과 해당 headers이 관련된 셀을 프로그래밍 방식으로 연결하고 표를 해석할 수 있도록 합니다.

scope 속성

이 글의 새로운 주제는 <th> 요소에 추가할 수 있는 범위 속성으로, 스크린 리더가 헤더가 어떤 셀에 대한 헤더인지(예: 헤더가 있는 행의 헤더인지, 아니면 열의 헤더인지) 정확히 알려줄 수 있습니다. 앞서의 지출 기록 예시로 돌아가서 열 headers을 다음과 같이 열 headers로 명확하게 정의할 수 있습니다:

스크린 리더는 이와 같이 구조화된 마크업을 인식하여 사용자가 전체 열 또는 행을 한 번에 읽을 수 있도록 합니다.

범위에는 두 가지 가능한 값, 즉 colgroup과 rowgroup이 더 있습니다. 이 값은 여러 열 또는 행의 맨 위에 있는 제목에 사용됩니다. 이 문서 섹션의 시작 부분에 있는 '2016년 8월 판매된 품목' 표를 다시 살펴보면 '옷' 셀이 '바지', '스커트', '원피스' 셀 위에 있는 것을 볼 수 있습니다. 이러한 셀은 모두 headers(<th>)로 마크업되어야 하지만 "Clothes"는 맨 위에 위치하며 다른 세 개의 부제목을 정의하는 headers입니다. 따라서 "Clothes"는 범위="colgroup"의 속성을 가져야 하지만 다른 셀은 범위="col"의 속성을 가져야 합니다.

id, headers 속성

범위 속성을 사용하는 대신 아이디 및 헤더 속성을 사용하여 헤더와 셀 간의 연결을 만드는 방법이 있습니다.

사용 방법은 다음과 같습니다.

• 각 <th> 요소에 고유 ID를 추가합니다.
• 각 <td> 요소에 headers 속성을 추가합니다. 각 헤더 속성에는 해당 셀의 헤더 역할을 하는 모든 <th> 요소의 ID 목록이 공백으로 구분되어 포함되어야 합니다.

이렇게 하면 스프레드시트처럼 표의 각 셀이 속한 열과 행의 headers에 의해 정의된 표의 각 셀 위치에 대한 명시적인 정의가 HTML 표에 제공됩니다.

표가 제대로 작동하려면 열과 행 헤더가 모두 필요합니다.