표

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> 요소에 중첩된 첫 번째 요소여야 합니다. 이를 포함하면 모든 사용자가 테이블의 용도를 즉시 찾을 수 있습니다. 또는 aria-label 또는 aria-labelledby를 사용할 수 있습니다. <table>를 설정하여 액세스 가능한 이름을 캡션으로 제공합니다. <caption> 요소에는 요소별 속성이 없습니다.

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

데이터 테이블에는 명확한 헤더와 캡션이 있고 거의 설명할 수 있을 정도로 단순해야 합니다. 다음 사항에 유의하세요. 모든 사용자의 인지 능력이 동일한 것은 아닙니다. 표가 '의견을 밝히거나' 다른 방식으로 해석이 필요한 경우 테이블의 주요 요점 또는 기능에 대한 간략한 요약입니다. 요약이 배치되는 위치는 길이와 복잡성에 따라 다릅니다. 간결한 문구인 경우 캡션의 내부 텍스트로 사용하세요. 이보다 긴 경우 캡션으로 요약하고 두 단락을 aria-describedby와 연결 속성의 값을 제공합니다. 테이블을 <figure>에 넣고 요약을 <figcaption>에 넣는 것도 또 다른 옵션입니다.

데이터 섹션화

표의 콘텐츠는 0개 이상의 표 헤더 (<thead>) , 표 본문 (<tbody>), 및 표 바닥글 (<tfoot>) 모두 선택사항이며 각각 0개 이상 지원됩니다.

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

지금까지의 결과:

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

<tfoot> 요소는 원래 접근성을 위해 <thead> 바로 뒤와 <tbody> 앞에 오도록 지정되었습니다. 이것이 레거시 코드베이스에서 이 직관적이지 않은 소스 순서가 발생할 수 있는 이유입니다.

테이블 콘텐츠

표는 표 머리글, 본문, 바닥글로 구분할 수 있지만 표가 없는 경우에는 표 행, 셀 및 콘텐츠를 포함할 수 있습니다. 표의 각 행 <tr>에는 하나 이상의 셀이 포함되어 있습니다. 셀이 헤더 셀인 경우 <th>를 사용하세요. 그 외의 경우에는 <td>를 사용합니다.

사용자 에이전트 스타일시트는 일반적으로 <th> 테이블 헤더 셀의 콘텐츠를 중앙에 굵은 글씨로 표시합니다. 이러한 기본 스타일은 모든 스타일 지정은 개별 셀에서 사용할 수 있었던 지원 중단된 속성 대신 CSS로 가장 잘 제어됩니다. 행, 심지어 <table>까지 포함할 수 있습니다.

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

이 예에서는 표와 CSS를 사용하여 각 개별 셀에 테두리를 추가하여 일부 기능을 더 명확하게 만들었습니다.

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

<th> 셀에는 의미론적 의미가 있으며 columnheader의 암시적 ARIA 역할이 있음 또는 rowheader 셀을 테이블 셀의 열 또는 행의 헤더로 정의합니다. 열거된 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 속성이 필요하지 않았을 가능성이 있지만 도구 벨트에 다음과 같이 중요합니다. 테이블이 복잡해집니다 헤더나 셀이 병합되거나 여러 개가 포함된 표와 같이 복잡한 구조의 표 2개 수준의 열 또는 행 헤더가 있는 경우 연관된 헤더 셀을 명시적으로 식별해야 합니다. 이러한 복잡한 테이블에서는 각 데이터 셀을 해당하는 각 헤더 셀과 연결된 모든 헤더의 공백으로 구분된 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> 모두 테이블의 접근성을 높이는 데 도움이 되는 의미론적 의미는 없지만 를 사용합니다.

<col> 스타일은 이 스타일을 재정의하는 <td> 또는 <th> 스타일이 없는 한 열의 스타일을 지정합니다. 예를 들어 <colspan>는 표의 일부 행에 있는 셀을 병합하는 데 사용되며 전체가 아닌 셀을 병합하는 데 사용됩니다. 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 양식에 관해 알아야 하므로 다음에 다루겠습니다.

이해도 확인

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