표

HTML 표는 행과 열을 사용하여 표 형식 데이터를 표시합니다. 표시하는 콘텐츠와 해당 콘텐츠와 관련된 사용자의 요구사항에 따라 <table>를 사용해야 합니다. 데이터가 표시, 비교, 정렬, 계산 또는 상호 참조되는 경우 <table>가 적합할 수 있습니다. 썸네일 이미지 그룹과 같은 표가 아닌 콘텐츠를 정리하는 데는 표가 적합하지 않습니다. 대신 이미지 목록을 만들고 CSS로 그리드를 스타일 지정합니다.

이 섹션에서는 표를 구성하는 모든 요소와 표 형식 데이터를 표시할 때 고려해야 할 접근성 및 사용성 기능을 설명합니다. HTML 학습은 CSS에 중점을 두지 않지만 표 관련 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> 요소에는 요소별 속성이 없습니다.

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

데이터 테이블에는 명확한 헤더와 캡션이 있어야 하며 거의 자명할 정도로 명확해야 합니다. 모든 사용자의 인지 능력이 동일하지는 않습니다. 표가 '요점을 제시'하거나 해석이 필요한 경우 표의 주요 요점이나 기능을 간략하게 요약합니다. 요약이 배치되는 위치는 길이와 복잡성에 따라 달라집니다. 간단한 경우 캡션의 내부 텍스트로 사용합니다. 길이가 긴 경우 캡션에 요약하고 표 앞의 단락에 요약을 제공하여 aria-describedby 속성으로 두 요약을 연결합니다. 표를 <figure>에 넣고 요약을 <figcaption>에 넣는 방법도 있습니다.

데이터 섹션 나누기

표의 콘텐츠는 최대 3개의 섹션으로 구성됩니다. 표 헤더 (<thead>) , 표 본문 (<tbody>), 표 바닥글 (<tfoot>)이 있으며, 각 섹션은 0개 이상이 지원됩니다.

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

지금까지의 결과:

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

<tfoot> 요소는 원래 접근성상의 이유로 <thead> 바로 뒤에, <tbody> 앞에 오도록 지정되었으며, 이로 인해 기존 코드베이스에서 직관적이지 않은 소스 순서를 접할 수 있습니다.

테이블 콘텐츠

표는 표 헤더, 본문, 바닥글로 나눌 수 있지만 표에 표 행, 셀, 콘텐츠가 포함되어 있지 않으면 이러한 요소는 아무런 역할을 하지 않습니다. 각 표 행 <tr>에는 하나 이상의 셀이 포함됩니다. 셀이 헤더 셀인 경우 <th>을 사용합니다. 그 외의 경우 <td>를 사용합니다.

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

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

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

이 예시에는 캡션, 표 헤더, 표 본문이 있습니다. 헤더에는 3개의 헤더 <th> 셀이 포함된 행이 하나 있어 열이 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 Sheets, Numbers와 마찬가지로 여러 셀을 하나의 셀로 결합할 수 있습니다. HTML colspan 및 rowspan 속성을 사용하면 됩니다.

• colspan는 단일 행 내에서 인접한 두 개 이상의 셀을 병합합니다.
• rowspan는 병합된 행의 첫 번째 행에 있는 셀에 추가되면 행 전체의 셀을 병합합니다.

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

표 헤더의 두 번째 행에는 두 개의 셀이 포함되어 있습니다. 이는 두 번째 행의 두 번째 열과 세 번째 열의 셀입니다. 첫 번째 행의 첫 번째 열과 마지막 열의 셀은 두 행에 걸쳐 있으므로 첫 번째 열과 마지막 열에 선언된 셀이 없습니다.

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

이 경우 headers 속성이 필요하지 않았을 수도 있지만 테이블의 복잡성이 증가함에 따라 기억해 두는 것이 중요합니다. 헤더나 셀이 병합되었거나 열 또는 행 헤더가 3개 이상인 테이블과 같이 구조가 복잡한 테이블에는 연결된 헤더 셀을 명시적으로 식별해야 합니다. 이러한 복잡한 표에서는 각 데이터 셀을 각 해당 헤더 셀과 명시적으로 연결하여 모든 연결된 헤더의 공백으로 구분된 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> 스타일을 재정의합니다. CodePen에서 colspan를 설정하여 테이블의 일부 행을 병합했지만 일부는 병합하지 않았습니다. nth-child CSS 선택기가 <tr>에 적용되면 병합된 행 또는 열에 따라 스타일이 영향을 받을 수 있습니다.

아쉽게도 일부 속성만 지원됩니다. 스타일은 셀로 상속되지 않으며 <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 display 속성을 변경하는 경우 ARIA role 속성을 포함하세요. 중복되는 것처럼 들릴 수 있지만 CSS display 속성은 일부 브라우저에서 접근성 트리에 영향을 줄 수 있습니다.

데이터 표시

표 요소에는 사용자가 길을 잃지 않고 행과 열을 탐색할 수 있도록 지원 기술에서 사용하는 시맨틱 의미가 있습니다. <table> 요소는 프레젠테이션에 사용하면 안 됩니다. 목록 위에 제목이 필요한 경우 헤더와 목록을 사용하세요. 여러 열에 콘텐츠를 배치하려면 다단 레이아웃을 사용하세요. 콘텐츠를 그리드로 배치하려면 CSS 그리드를 사용하세요.

데이터에만 표를 사용하세요.

회의에서 데이터를 표시하기 위해 스프레드시트가 필요한 경우 <table>을 사용하세요. Google Slides나 PowerPoint와 같은 프레젠테이션 소프트웨어에서 제공하는 기능을 사용하려면 설명 목록이 필요할 수 있습니다.

요약하자면, 테이블 형식 데이터를 표시하지 않는다면 <table>를 사용하지 마세요. 표를 프레젠테이션에 사용하는 경우 role="none"을 설정합니다.

많은 개발자가 표를 사용하여 양식을 배치하지만 이는 불필요합니다. HTML 양식에 대해 알아야 합니다.

이해도 확인

표에 대한 지식을 테스트합니다.