여러 행에 걸친 헤더에 HTML 값을 연결하려면 행 그룹을 정의하고 scope="rowgroup"을 사용합니다. 더 복잡한 관계에는 헤더마다 고유 ID를 부여하고 각 데이터 셀의 headers 속성에 나열합니다. 이 가이드에서는 Mac의 TextEdit에서 로컬 예제를 만듭니다.

여러 행에 걸쳐 있는 레이블이 표 값을 설명하더라도 해당 값의 맥락을 유지할 수 있도록 HTML 표 하나를 만드는 것이 이 작업의 목표입니다. W3C는 불규칙 표 튜토리얼에서 그룹화된 헤더를, 다단계 헤더 튜토리얼에서 명시적 연결을 설명합니다.

표에 어떤 연결 방식이 필요한가요?

먼저 값 하나를 이해하는 데 필요한 레이블을 적어 보세요. 아래의 가상 예제에서 값 40은 Alpha 세트의 Large 변형의 너비(밀리미터)를 뜻합니다. 따라서 전체 맥락은 Alpha, Large, Width입니다. 모든 치수는 예시용 샘플 데이터입니다.

편집하기 전에 다음 기준을 참고하세요.

표 구조 사용할 연결 방식 구조상 요구 사항
헤더 하나가 일반 행 하나에 레이블을 지정함 scope="row" 해당 행의 th 셀에 헤더를 넣습니다
헤더 하나가 일반 열 하나에 레이블을 지정함 scope="col" 해당 열의 th 셀에 헤더를 넣습니다
헤더 하나가 본문 행 그룹 전체에 레이블을 지정함 scope="rowgroup" 해당 행들을 별도의 tbody로 묶습니다
값에 여러 헤더가 필요하거나 표 안에서 관계가 바뀜 고유 헤더 ID와 headers 목록 해당되는 모든 헤더를 명시적으로 지정합니다

scope 값은 관계를 설명하고, rowspan은 셀이 차지하는 행의 수를 설명합니다. 높이가 큰 헤더에도 적절한 연결 방식이 필요합니다. MDN은 표 헤더 요소 참고 문서에서 두 속성을 각각 설명합니다.

일반적인 그룹의 경우 W3C 패턴은 여러 행에 걸친 헤더를 별도의 tbody 및 scope="rowgroup"과 함께 사용합니다. 표에는 본문 그룹이 여러 개 있을 수 있습니다. 헤더 행은 thead에 두고, 바닥글에서 여러 행에 걸치는 헤더는 tfoot에 둡니다. W3C: 불규칙 헤더가 있는 표.

복잡한 표에서는 명시적 연결을 사용해 값의 전체 의미를 직접 지정할 수 있습니다. W3C는 열 헤더가 바뀌거나 셀이 헤더 세 개 이상과 연결되는 패턴에 이 방식을 권장합니다. 전체 예제에서는 구조적 scope 속성과 함께 명시적 목록을 사용해 각 숫자 값이 세 헤더를 모두 지정하도록 합니다. W3C: 다단계 헤더가 있는 표.

TextEdit에서 HTML 문서 만들기

이 연습에는 새 로컬 파일을 사용하세요. 기존 문서를 수정하는 경우 먼저 별도 사본을 만들어 원래 값과 순서를 편집 내용과 비교할 수 있도록 하세요.

  1. TextEdit을 열고 File > New를 선택합니다.
  2. Format > Make Plain Text를 선택합니다.
  3. Markdown 코드 펜스 표시를 제외한 아래 문서 전체를 붙여 넣습니다.
  4. File > Save를 선택하고 파일 이름을 table-headers.html으로 지정합니다.
  5. 확장자에 대한 메시지가 표시되면 Use .html을 선택합니다.

다음은 Apple이 문서화한 TextEdit에서 HTML 파일 만들기 단계입니다. 이 예제에는 패키지, 스크립트 또는 외부 에셋이 필요하지 않습니다.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

결과를 미리 보려면 저장한 파일을 Safari에서 여세요. 네 개의 열이 표시되고, Alpha와 Beta가 각각 본문 행 두 개를 차지해야 합니다. 아래에서 소스를 확인할 수 있도록 TextEdit에서 파일을 열어 두세요.

TextEdit에서 문서를 다시 열 때는 File > Open을 사용해 파일을 선택하고 Show Options를 클릭한 다음 Ignore rich text commands를 선택하세요. 또는 TextEdit > Settings의 Open and Save에서 Display HTML files as HTML code instead of formatted text를 활성화하세요. Apple은 HTML 편집 안내에서 이 옵션을 설명합니다.

예제는 각 값을 헤더와 어떻게 연결하나요?

값 40의 소스를 작은 연결 지도로 살펴보세요. 값의 headers 목록에는 tiles-alpha, tiles-alpha-large, tiles-width가 들어 있습니다. 이 ID들은 각각 Alpha, Large, Width를 가리킵니다. 이에 대응하는 높이 값 60은 앞의 두 ID를 그대로 두고 세 번째 ID를 tiles-height로 바꿉니다.

이 ID는 작성자가 정하는 식별자이며, 특별한 HTML 키워드가 아닙니다. 목록에 있는 각 토큰은 같은 표 안의 th 요소를 가리켜야 합니다. 토큰은 공백으로 구분하고, 한 목록 안에서 같은 토큰을 반복하지 마세요. 이러한 요구 사항은 HTML 표준의 표 셀 공통 속성에 명시되어 있습니다.

이 목록은 독자가 다른 헤더를 통해 맥락을 재구성하게 하지 않고 전체 맥락을 직접 표현합니다. W3C의 H43 기법에서는 각 데이터 셀의 headers 속성에 해당 헤더 ID를 넣는 방법을 설명합니다.

두 번째 Alpha 행은 Large로 시작합니다. Alpha를 위한 별도 셀은 없습니다. 첫 번째 행의 rowspan="2"이 이미 그 위치를 차지하고 있기 때문입니다. 그 자리에 빈 셀을 추가하면 격자가 달라집니다. MDN은 헤더 셀 사용 참고 사항에서 여러 행에 걸친 셀이 남겨 둔 위치에 셀을 맞추는 방법을 설명합니다.

같은 원리로 겉보기에 비슷한 두 레이아웃을 구분하세요. 여러 본문 행에 걸쳐 있는 왼쪽 레이블은 행 그룹 헤더가 될 수 있습니다. 위쪽에서 두 행에 걸쳐 있는 열 레이블은 여전히 scope="col"를 사용하는 열 헤더일 수 있습니다. 물리적으로 높이가 크다고 해서 행 그룹과의 관계로 바뀌는 것은 아닙니다. MDN: 헤더 속성.

표를 변경하기 전에 연결 관계 확인하기

이 예제에서는 세 레이블을 점검하세요. 값을 하나 선택하고 의도한 세트, 변형, 치수를 확인한 다음, 해당 레이블을 참조된 ID와 비교합니다.

값 의도한 맥락 예상 headers 값
20 Alpha, Small, Width tiles-alpha tiles-alpha-small tiles-width
60 Alpha, Large, Height tiles-alpha tiles-alpha-large tiles-height
25 Beta, Small, Width tiles-beta tiles-beta-small tiles-width
65 Beta, Large, Height tiles-beta tiles-beta-large tiles-height

모든 숫자 셀에 대해 이 점검을 반복하세요. 참조된 모든 ID가 존재하는지, 각 참조가 의도한 헤더를 가리키는지, 문서 안에서 ID가 중복되지 않는지 확인합니다. 이 점검은 W3C의 H43 기법에 설명된 절차를 따릅니다. 표가 시각적으로 깔끔한지 확인하는 것은 점검의 일부일 뿐입니다. 소스의 연결 관계도 살펴보세요.

세 번째 Alpha 변형을 추가할 때는 Alpha의 기존 tbody 안에 새 행을 넣고, Alpha의 span을 rowspan="3"로 변경한 다음, 새 변형에 고유 ID를 부여하고 새 숫자 셀마다 적절한 헤더 세 개의 목록을 추가합니다. 변경하는 동안 원래 행 순서와 값은 유지하세요.

변형을 제거할 때는 그에 맞게 span을 줄입니다. 그룹의 첫 행을 제거하면 그룹 헤더를 첫 번째 남은 행으로 옮기세요. 여러 행 그룹에 걸쳐 셀이 확장되지 않도록 하세요. HTML 표 모델에서는 셀이 여러 행 그룹에 걸쳐 확장되는 것을 허용하지 않습니다. WHATWG: 표 모델.

나중에 애플리케이션에서 행을 생성하거나 순서를 바꾼다면 다음 요구 사항을 지키세요. 각 그룹을 함께 유지하고, 그룹의 첫 행에 여러 행에 걸친 헤더를 배치하며, span 수를 유지하고, 변경된 참조를 업데이트합니다. 이 예제에서 Alpha 안의 Large와 Small 순서를 바꾸면 Alpha 헤더도 새 첫 행으로 옮겨야 합니다.

편집기에서 이러한 속성을 보존할 수 없으면 어떻게 하나요?

편집기에서 셀을 병합할 수 있다고 해서 여기에 사용된 연결 관계까지 보존한다고 단정할 수는 없습니다. 편집하거나 내보낸 문서를 사용하기 전에 의도한 그룹 경계, scope, ID, 헤더 목록이 HTML에 있는지 확인하세요. 이 튜토리얼에서 지원하는 Mac 워크플로는 TextEdit에서 소스를 직접 편집하는 방식입니다.

작성 도구가 필요한 구조를 유지하지 못한다면 세트마다 별도의 간단한 표를 만들고 Variant, Width, Height 열을 두는 방법을 고려하세요. W3C는 복잡한 표를 더 작은 표들로 나누면 읽기와 작성이 쉬워질 수 있다고 설명합니다. 원래 구조를 바꿔도 괜찮은 경우에만 이 방법을 사용하세요. W3C: 다단계 표 나누기.

예제를 완성한 후 숫자 하나를 골라 그 숫자가 참조하는 세 레이블이 측정 대상을 정확히 설명하는지 확인하세요. 그런 다음 행을 삽입하거나 삭제하거나 순서를 바꿀 때마다 같은 점검을 이어가세요. 이렇게 하면 표의 모양뿐 아니라 의미도 유지할 수 있습니다.

출처