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>
) 요소가 포함될 수 있습니다.
테이블의 하위 요소는 다음과 같습니다.
<caption>
요소<colgroup>
요소<thead>
요소<tbody>
요소<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>
) 등 최대 3개의 섹션으로 구성됩니다. 모두 선택사항이며, 각 섹션은 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를 사용하여 표와 각 개별 셀에 테두리를 추가했습니다.
이 예시에는 제목, 표 헤더, 표 본문이 있습니다. 헤더에는 헤더 <th>
셀이 3개 포함된 행이 하나 있어 3개의 열이 생성됩니다. 본문에는 데이터 행 3개가 포함되어 있습니다. 첫 번째 셀은 행의 헤더 셀이므로 <td>
대신 <th>
를 사용합니다.
<th>
셀은 columnheader 또는 rowheader의 암시적 ARIA 역할과 함께 시맨틱 의미를 갖습니다. 열거형 scope
속성의 값에 따라 셀을 표 셀의 열 또는 행의 헤더로 정의합니다. scope
을 명시적으로 설정하지 않으면 브라우저의 기본값은 col
또는 row
입니다.
시맨틱 마크업을 사용했으므로 1956
셀에는 Year(연도) 및 Lou Minious(루 미니우스)라는 두 가지 헤더가 있습니다. 이 연결은 '1956'이 '루 미니우스'의 졸업 '연도'임을 나타냅니다. 이 예에서는 전체 표를 볼 수 있으므로 연결이 시각적으로 명확합니다.
<th>
를 사용하면 헤더 열 또는 행이 화면 밖으로 스크롤되더라도 연결이 유지됩니다. <th scope="col">Year</th>
및 <th scope="row">Lou Minious</th>
를 명시적으로 설정할 수도 있지만, 이와 같은 간단한 표에서는 열거된 기본값이 작동합니다.
scope
의 다른 값에는 rowgroup
및 colgroup
가 있으며, 이는 복잡한 표에 유용합니다.
셀 병합
MS Excel, Google Sheets, Numbers와 마찬가지로 여러 셀을 하나의 셀로 결합할 수 있습니다. HTML을 사용하면 됩니다.
colspan
속성은 단일 행 내에서 인접한 셀 2개 이상을 병합하는 데 사용됩니다. 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>
는 테이블에 더 쉽게 액세스할 수 있도록 하는 측면에서 의미론적 의미가 없지만 CSS로 열 너비를 설정하는 등 제한된 열 스타일 지정을 허용합니다.
<col>
스타일은 해당 스타일을 재정의하는 <td>
또는 <th>
스타일이 없는 한 열에 스타일을 지정합니다. 예를 들어 <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>
요소는 프레젠테이션에 사용해서는 안 됩니다. 목록 위에 제목이 필요한 경우 header 및 list를 사용하세요. 여러 열에 콘텐츠를 배치하려면 다중 열 레이아웃을 사용하세요.
그리드에 콘텐츠를 배치하려면 CSS 그리드를 사용하세요. 데이터에만 표를 사용하세요. 예를 들어 회의에서 데이터를 표시하기 위해 스프레드시트가 필요한 경우<table>
를 사용하세요.
Keynote나 PowerPoint와 같은 프레젠테이션 소프트웨어에서 제공하는 기능을 사용하려면 설명 목록이 필요할 수 있습니다.
표 형식 데이터를 표시하지 않는 경우 <table>
를 사용하지 마세요. 프레젠테이션에 테이블을 사용하는 경우 role="none"
를 설정합니다.
많은 개발자가 표를 사용하여 양식을 배치하지만 그렇게 할 필요는 없습니다. 하지만 HTML 양식에 관해 알아야 하므로 다음에 다루겠습니다.
이해도 확인
표에 대한 지식을 테스트합니다.
제목인 셀을 마크업하는 데 사용되는 요소는 무엇인가요?
<caption>
<header>
<th>
표가 포함된 레이아웃에 적합한 정보는 무엇인가요?