테이블

HTML 테이블은 행과 열이 있는 표 형식 데이터를 표시하는 데 사용됩니다. <table> 사용은 제공하는 콘텐츠와 해당 콘텐츠와 관련된 사용자의 요구사항에 따라 결정해야 합니다. 데이터를 표시, 비교, 정렬, 계산 또는 교차 참조한다면 <table>를 선택하는 것이 좋습니다. 대규모 썸네일 이미지 그룹과 같이 테이블이 아닌 콘텐츠를 깔끔하게 배치하려는 경우 테이블이 적절하지 않습니다. 대신 이미지 목록을 만들고 CSS로 그리드의 스타일을 지정합니다.

이 섹션에서는 표를 구성하는 모든 요소와 함께 표 형식 데이터를 표시할 때 고려해야 하는 몇 가지 접근성 및 사용성 기능을 설명합니다. HTML 학습이 기본적으로 CSS를 다루는 것은 아니며 CSS 학습 전용 과정도 있지만, 표와 관련된 CSS 속성 몇 가지를 다루겠습니다.

표 요소(순서대로)

<table> 태그는 모든 테이블 요소를 포함하여 테이블 콘텐츠를 래핑합니다. <table>의 암시적 ARIA 역할은 table입니다. 보조 기술은 이 요소가 행과 열로 정렬된 데이터가 포함된 테이블 구조라는 것을 인식합니다. 테이블이 선택 상태를 유지하거나 2차원 탐색이 있거나 사용자가 셀 순서를 재정렬할 수 있는 경우 role="grid"를 설정합니다. grid의 행을 펼치고 접을 수 있는 경우 role="treegrid"를 대신 사용하세요.

<table> 내에는 표 헤더(<thead>), 표 본문(<tbody>), 표 바닥글(<tfoot>(선택사항))이 있습니다. 각 행은 표 행(<tr>)으로 구성됩니다. 행에는 표 헤더(<th>)와 표 데이터(<td>) 셀이 포함되며, 이 셀에 모든 데이터가 포함됩니다. DOM에서는 그 전에 표 캡션 (<caption>)과 열 그룹 (<colgroup>)이라는 두 가지 추가 기능을 찾을 수 있습니다. <colgroup>에 span 속성이 있는지에 따라 중첩된 테이블 열 (<col>) 요소가 포함될 수 있습니다.

테이블의 하위 요소는 순서대로 다음과 같습니다.

1. <caption> 요소
2. <colgroup> 요소
3. <thead> 요소
4. <tbody> 요소
5. <tfoot> 요소

선택사항이지만 권장되는 <table> 요소의 하위 요소를 살펴본 후 행, 표 헤더 셀, 테이블 데이터 셀을 살펴보겠습니다. <colgroup>가 마지막에 처리됩니다.

표 설명

기본적인 시맨틱 요소인 <caption>는 테이블에 이름을 지정할 때 선호되는 방법입니다. <caption>는 설명적이고 프로그래매틱 방식으로 연결된 테이블 제목을 제공합니다. 기본적으로 모든 사용자에게 표시되고 사용할 수 있습니다.

<caption> 요소는 <table> 요소 내에 중첩된 첫 번째 요소여야 합니다. 이를 포함하면 모든 사용자가 주변 텍스트를 읽지 않고도 테이블의 목적을 즉시 알 수 있습니다. 또는 <table>에서 aria-label 또는 aria-labelledby를 사용하여 액세스 가능한 이름을 캡션으로 제공할 수 있습니다. <caption> 요소에는 요소별 속성이 없습니다.

설명이 표 밖에 표시됩니다. 자막의 위치는 CSS caption-side 속성을 사용하여 설정할 수 있습니다. 이 방법이 지원 중단된 align 속성을 사용하는 것보다 좋습니다. 이렇게 하면 자막을 상단과 하단으로 설정할 수 있습니다. inline-start 및 inline-end를 사용한 왼쪽 및 오른쪽 배치는 아직 완전히 지원되지 않습니다. 상단은 기본 브라우저 프레젠테이션입니다.

데이터 테이블은 헤더와 캡션이 명확하고, 설명이 필요 없을 정도로 단순해야 하는 것이 좋습니다. 모든 사용자의 인지 능력이 동일한 것은 아니라는 점에 유의하세요. 표에 '요점 전달' 중이거나 다른 이유로 해석이 필요한 경우 표의 요점이나 기능을 간략하게 요약하세요. 요약이 배치되는 위치는 요약의 길이와 복잡성에 따라 달라집니다. 짧은 경우 캡션의 내부 텍스트로 사용합니다. 더 긴 경우 캡션에 요약하고 표 앞의 단락에 요약을 제공합니다. 이때 두 단락을 aria-describedby 속성과 연결합니다. 테이블을 <figure>에 넣고 요약을 <figcaption>에 넣는 것도 또 다른 옵션입니다.

데이터 섹션화

테이블의 콘텐츠는 0개 이상의 표 헤더 (<thead>), 표 본문 (<tbody>), 표 바닥글 (<tfoot>) 등 최대 세 개의 섹션으로 구성됩니다. 모두 선택사항이며 각 섹션이 0개 이상 지원됩니다.

이러한 요소는 테이블의 접근성에 도움이 되거나 방해가 되지 않지만 사용성 측면에서 유용합니다. 스타일 지정 후크를 제공합니다. 예를 들어 헤더 콘텐츠를 고정하고 <tbody> 콘텐츠는 스크롤하도록 만들 수 있습니다. 이 3개의 포함된 요소 중 하나에 중첩되지 않은 행은 암시적으로 <tbody>에 래핑됩니다. 세 가지 모두 동일한 암시적 역할 rowgroup을 공유합니다. 이 3가지 요소에는 요소별 속성이 없습니다.

지금까지의 결과:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

<tfoot> 요소는 원래 접근성을 위해 <thead> 바로 뒤와 <tbody> 앞에 오도록 지정되었기 때문에 기존 코드베이스에서 이러한 직관적이지 않은 소스 순서가 표시될 수 있습니다.

테이블 콘텐츠

테이블은 표 헤더, 본문, 바닥글로 나눌 수 있지만 테이블에 표 행, 셀, 콘텐츠가 포함되지 않은 경우 이들은 실제로 아무 작업도 하지 않습니다. 표의 각 행 <tr>에는 하나 이상의 셀이 포함됩니다. 셀이 헤더 셀인 경우 <th>를 사용합니다. 그 외의 경우에는 <td>를 사용하세요.

User-agent 스타일시트는 일반적으로 <th> 표 헤더 셀에 콘텐츠를 가운데에 굵게 표시합니다. 이러한 기본 스타일과 모든 스타일은 개별 셀, 행, 심지어 <table>에서도 사용할 수 있었던 지원 중단된 속성 대신 CSS로 제어하는 것이 가장 좋습니다.

셀 사이 및 셀 내에 패딩을 추가하고 테두리 및 텍스트 정렬을 위한 속성이 있었습니다. 셀 콘텐츠와 셀 테두리 사이의 공간 및 인접한 셀의 테두리 사이의 공간을 정의하는 Cellpadding 및 셀 간격은 각각 CSS border-collapse 및 border-spacing 속성을 사용하여 설정해야 합니다. border-collapse: collapse가 설정되면 Border-spacing는 아무런 영향을 미치지 않습니다. border-collapse: separate;가 설정되면 empty-cells: hide;를 사용하여 빈 셀을 완전히 숨길 수 있습니다. 표 스타일 지정에 관해 자세히 알아보려면 표 관련 CSS 스타일의 대화형 슬라이드 자료를 참고하세요.

이 예에서는 테이블에 테두리를 추가하고 CSS가 포함된 각 개별 셀을 추가하여 일부 기능을 더 명확하게 만들었습니다.

이 예에는 설명, 표 헤더, 표 본문이 있습니다. 헤더에 헤더 <th> 셀이 3개 포함된 행이 1개 있어서 열이 3개 생성됩니다. 본문에는 세 개의 데이터 행이 포함됩니다. 첫 번째 셀은 행의 헤더 셀이므로 <td> 대신 <th>를 사용합니다.

<th> 셀은 columnheader 또는 rowheader의 암시적 ARIA 역할이 있는 시맨틱 의미를 가집니다. 열거된 scope 속성 값에 따라 셀을 테이블 셀의 열 또는 행의 헤더로 정의합니다. scope가 명시적으로 설정되지 않은 경우 브라우저는 기본적으로 col 또는 row로 설정됩니다. 시맨틱 마크업을 사용했으므로 1956 셀에는 Year 및 Lou Minious, 이렇게 두 개의 헤더가 있습니다. 이 연관성을 통해 '1956년'은 'Lou Minious'가 졸업한 '해'라고 알 수 있습니다. 이 예에서는 전체 표에서 볼 수 있듯이 연결이 시각적으로 명확하게 표시됩니다. <th>를 사용하면 헤더 열이나 행이 뷰 밖으로 스크롤되어도 연결이 제공됩니다. <th scope="col">Year</th> 및 <th scope="row">Lou Minious</th>를 명시적으로 설정할 수도 있지만 이와 같은 간단한 테이블을 사용하면 열거된 기본값이 작동합니다. scope의 다른 값에는 rowgroup 및 colgroup가 있으며, 이는 복잡한 테이블에 유용합니다.

셀 병합

MS Excel, Google 시트 및 숫자와 마찬가지로 여러 셀을 하나의 셀로 결합할 수 있습니다. HTML을 사용하면 됩니다. colspan 속성은 단일 행 내에서 두 개 이상의 인접한 셀을 병합하는 데 사용됩니다. rowspan 속성은 맨 위 행의 셀에 배치되는 여러 행에서 셀을 병합하는 데 사용됩니다.

이 예에서 표 헤더에는 두 개의 행이 포함되어 있습니다. 첫 번째 헤더 행에는 4개의 열에 걸쳐 있는 3개의 셀이 있으며, 가운데 셀에는 colspan="2"가 있습니다. 이렇게 하면 인접한 셀 두 개가 병합됩니다. 첫 번째와 마지막 셀에는 rowspan="2"이(가) 포함됩니다. 이렇게 하면 셀이 바로 아래 인접한 행의 셀과 병합됩니다.

표 헤더의 두 번째 행에는 두 번째 행의 두 번째 및 세 번째 열에 대한 셀이 포함되어 있습니다. 첫 번째 행의 첫 번째 열과 마지막 열의 셀이 두 행에 걸쳐 있으므로 첫 번째 또는 마지막 열에 대해 셀이 선언되지 않았습니다.

셀이 scope 속성으로만 설정할 수 없는 연결이 있는 여러 헤더 셀로 정의되는 경우 공백으로 구분된 연결된 헤더 목록과 함께 headers 속성을 포함합니다. 이 예는 좀 더 복잡한 테이블이므로 scope 속성을 사용하여 헤더의 범위를 명시적으로 정의합니다. 보다 명확히 하기 위해 각 셀에 headers 속성을 추가했습니다.

이 같은 간단한 사용 사례에서는 headers 속성이 필요하지 않았을 수 있지만 테이블이 복잡해짐에 따라 도구 벨트에 포함해야 합니다. 헤더나 셀이 병합되거나 두 개 이상의 열 또는 행 헤더가 있는 테이블과 같이 복잡한 구조의 테이블에서는 연결된 헤더 셀을 명시적으로 식별해야 합니다. 이렇게 복잡한 표에서는 연결된 모든 헤더의 공백으로 구분된 id 값 목록을 headers 속성 값과 함께 각 데이터 셀을 해당하는 각 헤더 셀과 명시적으로 연결합니다.

headers 속성은 <td> 요소에서 더 흔히 발견되지만 <th>에서도 유효합니다.

하지만 표 구조가 복잡하면 스크린 리더 사용자뿐만 아니라 모든 사용자가 이해하기 어려울 수 있습니다. 인지적으로나 스크린 리더 지원 측면에서 범위와 헤더를 추가하지 않아도 스팬 셀이 거의 없거나 아예 없는 단순한 표를 더 쉽게 이해할 수 있습니다. 관리하기도 더 쉽습니다.

테이블 스타일 지정

간단히 언급되었지만 상대적으로 모호한 두 가지 요소가 있습니다. 열 그룹 <colgroup> 요소와 요소의 유일한 하위 요소인 빈 <col> 열 요소입니다. <colgroup> 요소는 테이블 내에서 열 그룹 또는 <col> 요소를 정의하는 데 사용됩니다.

사용하는 경우 열 그룹화는 <table>의 <caption> 바로 뒤와 테이블 데이터 앞에 중첩되어야 합니다. 두 개 이상의 열에 걸쳐 있는 경우 span 속성을 사용합니다.

테이블의 콘텐츠 윤곽선 순서는 일반적으로 다음과 같으며, 포함해야 하는 두 요소는 <table> 및 <caption>입니다.

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

<colgroup>와 <col> 모두 테이블의 접근성을 높이는 데 도움이 된다는 의미론적 의미는 없지만, CSS로 열의 너비를 설정하는 등 제한된 열 스타일 지정을 허용합니다.

이 스타일을 재정의하는 <td> 또는 <th> 스타일이 없는 한 <col> 스타일은 열의 스타일을 지정합니다. 예를 들어 <colspan>가 표의 일부 행에서 셀을 병합하는 데 사용되는 경우, 모든 행의 8번째 하위 요소를 선택하는 tr > *:nth-child(8)와 같은 선택기가 병합된 행 또는 열 셀에 따라 8번째 열을 완전히 강조 표시하거나 8번째 열을 여러 행에 강조 표시합니다. 그러나 병합된 행 또는 열 셀에 따라 9번째 열과 10번째 열 셀이 흩어져 있다고 확신할 수 없습니다.

하지만 몇 가지 속성만 지원됩니다. 스타일은 셀에 상속되지 않으며, 타겟팅 셀에서 <col> 요소를 사용하는 유일한 방법은 :has() 관계형 선택기를 포함한 복잡한 선택기를 사용하는 것입니다.

<table>와 <colgroup>에 모두 배경 색상이 있다면 <colgroup>의 background-color가 상단에 배치됩니다. 그리기 순서는 테이블 레이어의 스키마에 나와 있는 것처럼 테이블, 열 그룹, 열, 행 그룹, 행이며 마지막과 맨 위에 셀이 있습니다. <td> 및 <th> 요소는 <colgroup> 또는 <col> 요소의 하위 요소가 아니므로 스타일을 상속받지 않습니다.

표를 스트라이프하려면 CSS 구조 선택기가 유용합니다. 예를 들어 tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);}는 테이블 본문의 홀수 행에 반투명한 검은색을 추가하여 <colgroup>에 설정된 모든 배경 효과를 표시합니다.

테이블은 기본적으로 응답하지 않습니다. 기본적으로 콘텐츠에 따라 크기가 조절됩니다. 테이블 레이아웃 스타일 지정이 다양한 기기에서 효과적으로 작동하려면 추가 조치가 필요합니다. 표 요소의 CSS 표시 속성을 변경하는 경우 ARIA role 속성을 포함합니다. 중복으로 보일 수 있지만 CSS display 속성이 일부 브라우저의 접근성 트리에 영향을 줄 수 있습니다.

데이터 표시

테이블 요소에는 보조 기술이 '손실'되지 않고 행과 열을 탐색할 수 있도록 하는 시맨틱 의미가 있습니다. <table> 요소는 프레젠테이션에 사용해서는 안 됩니다. 목록 제목이 필요하면 헤더와 목록을 사용하세요. 콘텐츠를 여러 열에 배치하려면 다중 열 레이아웃을 사용합니다. 그리드에 콘텐츠를 배치하려면 CSS 그리드를 사용합니다. 데이터용으로만 테이블을 사용합니다. 즉, 회의에서 발표하기 위해 데이터에 스프레드시트가 필요한 경우 <table>를 사용합니다. Keynote나 PowerPoint와 같은 프레젠테이션 소프트웨어에서 제공되는 기능을 사용하려면 설명 목록이 필요할 수 있습니다.

표 열 정렬은 JavaScript의 범위에 해당하며, 헤더를 마크업하여 사용자에게 열을 정렬할 수 있음을 알 수 있도록 하는 것이 HTML의 범위입니다. 사용자에게 표의 열을 오름차순, 내림차순 또는 정렬되지 않은 모양의 아이콘으로 정렬할 수 있음을 알려주세요. 현재 정렬된 열에는 정렬 방향의 열거형 값과 함께 aria-sort 속성이 포함되어야 합니다. <caption>는 aria-live를 통해 정렬 순서 업데이트를 정중하게 알릴 수 있으며, 스크린 리더 사용자에게 표시되는 스팬은 동적으로 업데이트됩니다. 헤더 콘텐츠를 클릭하여 열을 정렬할 수 있으므로 헤더 콘텐츠는 <button>이어야 합니다.

표 형식 데이터를 표시하지 않는 경우 <table>를 사용하지 마세요. 프레젠테이션에 표를 사용하는 경우 role="none"를 설정하세요.

많은 개발자가 표를 사용하여 양식을 배치하지만 그럴 필요는 없습니다. 하지만 HTML 양식에 대해서는 알아야 하므로 다음에 관해 알아보겠습니다.

이해도 테스트

테이블에 관한 지식을 테스트합니다.