여러 행사의 시간과 장소를 같은 기준으로 비교할 때는 표가 유용하다. HTML로 전시 초대장 만들기의 한 행사 안내에서, 여러 일정 사이의 관계를 보여주는 문서로 확장한다.
- 표의 이름:
caption에는 무엇을 비교하는 표인지 적는다. 열 제목은th로 쓰고scope="col"로 해당 열을 가리킨다. - 순서: 날짜와 시간을 사람이 읽는 순서로 적는다. 칸을 합치기 전에 짧은 표 여러 개나 목록이 더 알맞은지 살핀다.
- 좁은 화면: 표가 넓으면 표 영역 안에서 가로로 이동하게 할 수 있다. 키보드로도 들어갈 수 있는 영역에 이름과 이동 안내를 붙인다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-04.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>전시 일정표를 HTML로 만들기: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; inline-size: 100%; min-inline-size: 32rem; }
caption { text-align: start; padding-block: .5rem; }
th, td { padding: .6rem; border: 1px solid #777; text-align: start; }
thead { background: #eef3f7; }
</style>
<main>
<h1 id="schedule-title">종이방의 주말</h1>
<p id="scroll-hint">가상의 일정입니다. 표가 화면보다 넓으면 좌우로 이동하세요.</p>
<div class="table-wrap" role="region" tabindex="0"
aria-labelledby="schedule-title" aria-describedby="scroll-hint">
<table>
<caption>제작 예제: 전시와 대화 일정</caption>
<thead><tr><th scope="col">날짜</th><th scope="col">시간</th>
<th scope="col">행사</th><th scope="col">장소</th></tr></thead>
<tbody>
<tr><td>11월 7일</td><td>14:00</td><td>전시 함께 보기</td><td>전시장</td></tr>
<tr><td>11월 8일</td><td>16:00</td><td>책을 만든 사람과 대화</td><td>책상 옆</td></tr>
</tbody>
</table>
</div>
</main>
</html>창을 좁힌 뒤 Tab으로 표 영역에 들어가 방향키로 가로 이동을 확인한다. 긴 행사 이름을 넣었을 때 줄바꿈과 행의 높이도 살핀다. 작품 목록을 데이터로 만들기에서 관리한 값을 표로 내보낼 수 있지만, 표로 만들지 않을 정보까지 억지로 칸에 넣을 필요는 없다.