표의 머리칸을 연결해야 숫자가 길을 잃지 않는다

표에서 숫자 3을 보았다고 해도 어느 사람의 어떤 달 기록인지 모르면 쓸 수 없습니다. 눈으로는 위쪽 제목과 왼쪽 이름을 따라가지만, 한 칸씩 읽어 주는 도구에서는 그 관계가 코드에 들어 있어야 합니다. 화면에 선을 예쁘게 그린 것만으로는 부족한 이유입니다.

장부를 펼쳐 놓고 손가락으로 한 칸을 짚는 장면을 생각해 보세요. 장부 위쪽에 ‘월요일’, 왼쪽에 ‘사과’가 적혀 있으면 가운데 3이 사과 세 개라는 뜻을 알 수 있습니다. 그런데 이름표를 떼고 숫자만 남기면 장부를 만든 사람조차 다시 계산하기 어렵습니다. 웹 표의 머리칸도 같은 길잡이입니다.

자료를 비교할 때만 표를 쓴다

HTML은 웹페이지에서 내용의 역할을 적는 언어입니다. HTML의 table은 행과 열이 교차하는 자료 표를 뜻합니다. 날짜별 수량이나 사람별 시간을 비교할 때처럼 두 방향을 함께 읽어야 한다면 알맞습니다. 카드 두 개를 나란히 놓거나 화면의 여백을 맞추려고 표를 쓰는 것은 자료 관계를 잘못 알릴 수 있습니다. W3C의 표 안내도 자료 표와 배치용 표를 구분합니다.

표를 만들기 전에 ‘왼쪽에서 오른쪽으로 읽을 이름이 있는가’, ‘위에서 아래로 읽을 이름이 있는가’를 먼저 묻습니다. 둘 중 어느 것도 없다면 목록이나 짧은 문장으로 전달하는 편이 더 자연스러울 수 있습니다. 자료가 아주 복잡하다면 한 표에 모든 것을 억지로 넣기보다 질문별로 나누는 선택도 검토합니다.

표 제목은 무엇을 비교하는지 알려 준다

caption은 표 전체의 제목을 적는 칸입니다. ‘기록’이라고만 쓰기보다 ‘연습용 과일 주문 수량’처럼 대상과 값의 뜻을 적으면 읽는 사람이 표를 열어 볼지 판단할 수 있습니다. MDN은 caption을 table 시작 태그 바로 아래에 두는 예를 보여 줍니다. 제목이 화면에도 보이므로 눈으로 읽는 사람과 화면 읽기 도구를 쓰는 사람이 같은 설명을 받습니다.

페이지의 큰 제목과 표 제목은 맡는 범위가 다릅니다. 페이지가 ‘이번 주 주문’이라도 표가 여러 개라면 각 표가 어느 시간대나 품목을 다루는지 따로 알려 줘야 합니다. 표 안의 첫 칸에 제목처럼 보이는 문장을 넣는 방법은 머리칸과 값의 관계를 설명하는 caption을 대신하지 못합니다.

머리칸과 자료칸을 다르게 적는다

th는 표의 머리칸, td는 실제 자료가 들어 있는 칸입니다. 단지 굵은 글씨로 꾸민 td는 눈에만 머리칸처럼 보일 뿐 구조상 머리칸이 되지 않습니다. W3C는 이 둘을 구분해야 보조 기술이 값과 이름의 관계를 전달할 수 있다고 안내합니다. 화면 읽기 도구는 화면의 글을 소리나 점자로 전하는 도구이며, 표에서는 현재 칸의 행과 열을 함께 파악하는 데 이 구조를 씁니다.

tr은 표의 가로 한 줄입니다. 연습용 표에서 첫 줄의 ‘품목’과 ‘월요일’은 th로, 다음 줄의 ‘사과’도 행 이름이므로 th로 적습니다. 가운데 수량 3은 td입니다. 숫자가 적은 칸과 그 숫자를 설명하는 칸의 역할을 나누면 이후 색이나 글꼴을 바꾸어도 뜻이 남습니다.

scope는 머리칸이 가리키는 방향이다

행과 열에 모두 머리칸이 있을 때 scope는 그 이름표가 어느 방향을 맡는지 적는 속성입니다. scope 값 col은 같은 열의 자료, row는 같은 행의 자료를 가리킵니다. 택배 상자에 세로 선반 번호와 가로 칸 번호를 함께 적는 것처럼, 교차점의 숫자가 어느 두 이름에 속하는지 확인할 단서를 줍니다.

다음 코드는 실제 서비스 자료가 아닌 연습 예시입니다. 첫 줄은 열의 이름이고, 두 번째 줄의 첫 칸은 행의 이름입니다.

<table>
  <caption>연습용 과일 주문 수량</caption>
  <tr><th scope="col">품목</th><th scope="col">월요일</th></tr>
  <tr><th scope="row">사과</th><td>3</td></tr>
</table>

여기서 3은 ‘사과’ 행과 ‘월요일’ 열이 만나는 값입니다. W3C와 MDN은 이렇게 간단한 두 방향 표에서 th와 scope로 머리칸의 적용 범위를 알리는 예를 제시합니다. 모든 표에 똑같은 코드 조각을 복사하기보다 실제 머리칸이 몇 단계인지 살펴야 합니다.

복잡한 표를 무리하게 한 장에 넣지 않는다

제목이 여러 줄에 걸치고 한 머리칸이 여러 행이나 열을 가리킨다면 단순한 row와 col만으로 뜻이 충분하지 않을 수 있습니다. W3C는 이런 경우 묶음의 범위나 머리칸의 개별 연결을 따로 설명합니다. 처음 배우는 단계에서는 큰 표를 작은 표 둘로 나눌 수 있는지 먼저 검토하세요. 표가 짧아지면 작성자도 틀린 숫자를 찾기 쉽습니다.

모바일 폭에서 표가 좁아졌다고 열 제목을 숨기고 값만 남겨서는 안 됩니다. 옆으로 스크롤할 수 있게 하거나 내용을 다시 구성하더라도 ‘어느 값이 무엇인가’라는 관계는 유지해야 합니다. 51강에서 다룬 글자 대비와 현재 위치 표시도 표 안의 링크나 버튼에 그대로 적용됩니다. 숫자를 읽을 수 있는지와 눌러야 할 위치가 보이는지는 별개로 확인합니다.

오늘 바로 해볼 작은 실습

개인 정보나 실제 결제 기록 대신 종이에 적은 가짜 과일 주문으로 10분 안에 표 한 개를 점검해 보세요. 코드를 실행하지 않아도 칸의 역할을 표시하는 것만으로 시작할 수 있습니다.

1. ‘과일 주문 수량’처럼 표 전체를 설명하는 제목을 한 줄 적습니다.
2. 위쪽에 날짜 두 개, 왼쪽에 품목 두 개를 놓고 빈 표를 그립니다.
3. 제목을 caption, 날짜와 품목 이름을 th, 숫자를 td라고 표시합니다.
4. 위쪽 이름 옆에 col, 왼쪽 이름 옆에 row를 적습니다.
5. 숫자 하나를 짚고 행 이름과 열 이름을 함께 말해 봅니다.
6. 이름을 가린 뒤 숫자의 뜻을 여전히 알 수 있는지 비교합니다.
7. 작은 화면을 상상하며 열 하나가 사라졌을 때 뜻이 남는지 살핍니다.
8. 표가 복잡해졌다면 둘로 나눌 수 있는 질문을 적습니다.

이 실습에는 설치 명령이나 외부 스크립트가 필요하지 않습니다. 모르는 명령을 그대로 실행하지 말고 대상 파일과 변경 내용을 먼저 확인하세요. 비밀번호, API 비밀키, 실제 고객 이름이나 카드 번호를 예시 표에 넣거나 화면을 캡처해 공개하지 않습니다. 결제·삭제 버튼이 있는 운영 화면은 연습 대상으로 삼지 말고, 실제 자료를 바꿀 때는 담당자와 시험 환경, 되돌릴 방법을 확인합니다. 표의 한 숫자를 보고 행과 열의 이름을 모두 설명할 수 있다면 첫 점검을 마친 것입니다.