격자 전체를 먼저 그린 뒤 병합된 각 셀에 사각형을 지정하고, 그 사각형이 시작되는 위치에만 셀을 작성해 서로 맞물리는 범위가 있는 HTML 표를 계획하세요. 이 안내에서는 TextEdit에서 만들고 Mac에서 미리 볼 수 있는 가상의 예제를 살펴봅니다.

셀을 작성하기 전에 격자 정의하기

이 작업은 열 제목을 그룹으로 묶고, 행과 열을 모두 가로지르는 셀 하나와 서로 다른 행 수를 가로지르는 셀 하나가 있는 5열 표를 만드는 것입니다. 아래 레이블과 내용은 설명용이며, 슬롯별로 배치된 중립적인 노드 블록을 나타냅니다.

HTML 표는 다차원 데이터를 표현합니다. 표의 셀은 겹치지 않으면서 격자 전체를 채워야 합니다. 의도한 결과가 서로 관련 없는 상자들을 단순히 페이지에 배치하는 것이라면, HTML 표준은 대신 CSS Grid 같은 레이아웃 도구를 사용하도록 안내합니다. 여기서는 각 블록이 행 및 열 제목과 의미 있는 관계를 가지므로 표가 적합합니다. HTML Standard: The table element.

표 어디에나 존재하는 가장 작은 단위의 열부터 이름을 정하세요. 이 예제의 열은 Slot, Node A, Node B, Node C, Note입니다. Nodes 제목은 그중 세 열을 포괄하며, 별도의 열을 추가하지 않습니다.

두 범위 속성은 시작 위치를 포함해 셀이 차지하는 전체 크기를 셉니다. 따라서 colspan="2"은 두 열을 포괄하고, rowspan="2"은 두 행을 포괄합니다. 둘 다 적용하면 2×2 사각형이 됩니다. 생략된 범위의 기본값은 1입니다. MDN: The Table Data Cell element.

“서로 맞물린다”는 것은 이 사각형들이 서로 맞춰지는 방식을 뜻합니다. 각 셀은 여전히 사각형 형태로 영역을 차지하며, 한 셀이 다른 셀을 피해 구부러질 수는 없습니다. 모눈종이 위에 레이블이 붙은 사각형들을 맞춰 놓는다고 생각해 보세요.

각 행의 슬롯 장부 만들기

병합된 셀 하나가 차지하는 영역을 반복해서 표시하는 확장형 계획 표를 사용하세요. 이 장부에 레이블이 반복되어도 HTML에서 해당 셀을 반복하라는 뜻은 아닙니다. 머리글 구역에는 두 행, 본문에는 네 행이 있습니다.

계획된 행 열 1 열 2 열 3 열 4 열 5
머리글 1 Slot Nodes Nodes Nodes Note
머리글 2 Slot Node A Node B Node C Note
본문 1 Slot 1 Block P Block P Block Q Note X
본문 2 Slot 2 Block P Block P Block R Note X
본문 3 Slot 3 Block S Block T Block T Note X
본문 4 Slot 4 Block U Block U Block U Note Y

이제 병합된 각 사각형의 시작 위치와 크기를 기록하세요. 좌표는 1부터 세며, 각 구역 안에서 다시 시작합니다.

셀 시작 위치 포괄하는 행 수 포괄하는 열 수
Slot 제목 머리글 1행, 1열 2 1
Nodes 제목 머리글 1행, 2열 1 3
Note 제목 머리글 1행, 5열 2 1
Block P 본문 1행, 2열 2 2
Note X 본문 1행, 5열 3 1
Block T 본문 3행, 3열 1 2
Block U 본문 4행, 2열 1 3

이 장부를 이용하면 어려운 본문 2행도 간단해집니다. Block P가 이미 2열과 3열을 차지하고, Note X가 5열을 차지합니다. 따라서 해당 행에서 시작하는 것은 Slot 2와 Block R뿐이므로, 이 행에는 셀 요소가 두 개만 필요합니다.

각 행에 다음 절차를 적용하세요.

  1. 이전 행에서 시작된 범위가 차지하는 위치를 표시합니다.
  2. 점유되지 않은 첫 번째 열을 찾습니다.
  3. 다음 셀을 배치하고, 미래의 행까지 포함한 전체 사각형을 표시합니다.
  4. 사각형의 일부라도 점유된 위치와 겹치면 배치를 거부합니다.
  5. 열 위치 다섯 곳을 모두 확인할 때까지 계속합니다.

이 절차는 표준의 표 모델에서 도출한 계획 보조 방법입니다. 브라우저는 셀을 배치할 때 이미 점유된 시작 위치를 건너뛰지만, 작성자는 여전히 사각형들이 겹치지 않도록 해야 합니다. 그러므로 행의 셀 요소 개수만 세어서는 충분하지 않습니다. HTML Standard: Processing model.

행을 점검할 때 유용한 기준은 다음과 같습니다. 이월된 점유 열 수 + 새로 시작하는 셀이 포괄하는 열 수 = 5. 본문 2행에는 이월된 위치 세 곳과 새 위치 두 곳이 있습니다. 본문 3행에는 이월된 위치 한 곳과 새 위치 네 곳이 있습니다. 합계뿐 아니라 실제 위치도 확인하세요. 합계가 맞더라도 겹침과 빈칸이 함께 있으면 발견할 수 없습니다.

행 그룹과 머리글 관계 계획하기

두 머리글 행은 하나의 thead 안에, 본문의 네 행은 하나의 tbody 안에 넣으세요. 셀은 서로 다른 행 그룹을 가로지를 수 없습니다. 예를 들어, 블록 P는 하나의 tbody에서 시작해 다른 행 그룹에서 끝날 수 없습니다. 표준은 표 자식 요소의 순서도 명시합니다. 선택적 caption, 열 그룹, 선택적 thead, 본문 행, 선택적 tfoot 순입니다. HTML Standard: Tables.

이 예제에는 세 개의 열 그룹이 있습니다. Slot은 한 열, Nodes는 세 열, Note는 한 열을 차지합니다. Nodes 제목에는 scope="colgroup"을 사용하고, 그 하위 제목에는 scope="col"를 사용합니다. W3C의 불규칙 머리글 안내에서는 그룹 제목과 명시적인 열 그룹 구조를 함께 사용하도록 설명합니다. Tables with Irregular Headers.

기하학적 범위와 의미는 별도로 결정해야 합니다. Block P는 두 슬롯 행과 두 노드 열을 차지하므로, 의도한 머리글은 Slot 1, Slot 2, Nodes, Node A, Node B입니다. Note X는 세 슬롯 행과 Note 열에 해당합니다.

이 예제에서는 병합된 데이터 셀의 연관 관계를 명시하기 위해 머리글 셀의 id 값과 각 데이터 셀의 headers 속성에 공백으로 구분된 참조를 사용합니다. W3C는 머리글 관계를 명시적으로 식별해야 하는 복잡한 표에서 이 방법을 설명합니다. Tables with Multi-Level Headers.

텍스트가 같다는 이유만으로 서로 독립적인 값을 병합하지 마세요. 이 가상 문서에서 Block P는 네 위치에 걸쳐 있는 하나의 블록을 의도적으로 설명합니다. 각 위치에 별개의 관측값이 들어 있다면 개별 셀을 유지해 표가 그 차이를 보존하도록 하세요.

Mac에서 완전한 HTML 파일 만들기

TextEdit으로 로컬 HTML 문서를 만들 수 있습니다. 파일 > 새로 만들기를 선택한 다음 서식 > 일반 텍스트로 만들기를 선택하세요. 아래의 완전한 문서를 붙여넣고 파일 > 저장을 선택한 뒤, 파일 이름을 span-plan.html으로 지정하세요. 확장자에 관한 메시지가 나타나면 Use .html을 선택하세요. 이는 Apple이 안내하는 HTML 작성 절차입니다. Work with HTML documents in TextEdit on Mac.

아래 문서는 예제 내용과 스타일을 포함한 완전한 독립형 문서입니다. 스크립트나 외부 에셋이 필요하지 않습니다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

저장한 파일을 Mac의 브라우저에서 여세요. 장부와 비교해 보세요. Block P는 Nodes A와 B 아래에서 Slot 1과 2를 포괄해야 하고, Note X는 Slot 1–3을 포괄해야 하며, Block T는 Slot 3에서만 Nodes B와 C를 포괄해야 합니다. 이 세 가지를 점검하면 단순히 바깥 윤곽만 직사각형인 표와 의도한 맞물림 구조를 구별할 수 있습니다.

TextEdit에서 파일을 다시 열었을 때 서식이 적용된 내용이 보이면 파일 > 열기를 선택하고 파일을 고른 뒤 옵션 보기를 클릭해 Ignore rich text commands를 선택하세요. 이후 편집을 위해 Apple은 TextEdit > 설정 > 열기 및 저장에서 HTML 파일을 서식이 적용된 텍스트 대신 HTML 코드로 표시를 활성화하는 방법도 안내합니다. Apple’s TextEdit HTML guide.

구조를 잃지 않고 오류를 진단하고 계획을 수정하기

결과가 계획과 다르면 처음으로 잘못된 행과 그 행에 이월된 사각형을 살펴보세요. 간격이나 스타일을 변경하기 전에 다음을 확인하세요.

증상 확인할 항목 이 예제의 수정 방법
예상치 못한 추가 열이 생김 앞선 범위가 이미 공간을 차지하는 위치에 추가된 셀 본문 2행에는 Slot 2와 Block R만 있습니다. 그곳에 추가한 채움 셀을 제거하세요
Block R이 잘못된 노드 아래에 표시됨 Block P의 너비와 높이 Block P에 rowspan="2"와 colspan="2"가 모두 있는지 확인하세요
Note X가 Slot 2 다음에 끝남 행 수 범위를 세 행으로 설정하세요
머리글 단계가 정렬되지 않음 첫 번째 머리글 행과 두 번째 행의 셀 개수 Slot과 Note는 두 행을 포괄하고, 두 번째 머리글 행에는 세 노드 제목만 있습니다
병합된 셀의 머리글이 불완전함 해당 셀의 headers 참조 장부와 비교해 포괄하는 모든 행과 열을 확인하세요

어떤 위치가 실제로 빈 값을 나타낼 때는 빈 셀이 적절합니다. 범위 셀이 이미 차지하는 위치에는 빈 셀이 필요하지 않습니다. MDN의 셀 문서에서는 일반 셀이 사용 가능한 위치에 들어가며, 범위가 서로 겹치면 안 된다고 설명합니다. MDN: The Table Data Cell element.

이 고정된 예제에는 양의 정수 행 수를 명시적으로 사용하세요. 특수 값 rowspan="0"는 현재 행 그룹의 나머지 행을 뜻하므로 행을 추가하면 해당 셀의 범위가 늘어날 수 있습니다. “이 그룹의 끝까지”라는 표현이 의도한 관계를 나타낼 때만 이 값을 사용하세요. MDN: Row span behavior.

행을 삽입하거나 삭제하거나 순서를 바꾸기 전에 장부를 업데이트하세요. Slot 1과 Slot 2 사이에 새 행을 삽입하고 Block P가 그 행도 포함해야 한다면 Block P의 범위를 늘리고, 새 행 제목을 headers 목록에 추가하세요. Note X도 별도로 검토하세요. 같은 삽입이 Note X의 의도한 범위에도 영향을 줄 수 있습니다. 행 순서를 바꾸는 경우에도 범위가 문서 위치를 따르므로 같은 검토가 필요합니다.

내용이 더 이상 이해하기 쉬운 사각형을 이루지 않는다면 표현을 단순화하세요. W3C는 머리글 단계가 여러 개인 하나의 표를 이해하기 어려울 경우 더 작은 표를 고려하도록 권장합니다. Tables with Multi-Level Headers.

문서를 수정할 때 슬롯 장부를 소스 옆에 두세요. 변경할 때마다 의도한 사각형을 정하고, 시작 위치에만 셀을 작성하며, 연결된 머리글을 확인하세요. 이렇게 하면 표의 모양과 내용이 표현하는 관계를 모두 유지할 수 있는 반복 가능한 방법을 갖게 됩니다.

출처