여러 행사의 시간과 장소를 같은 기준으로 비교할 때는 표가 유용하다. [[HTML로 전시 초대장 만들기]]의 한 행사 안내에서, 여러 일정 사이의 관계를 보여주는 문서로 확장한다.
- **표의 이름:** `caption`에는 무엇을 비교하는 표인지 적는다. 열 제목은 `th`로 쓰고 `scope="col"`로 해당 열을 가리킨다.
- **순서:** 날짜와 시간을 사람이 읽는 순서로 적는다. 칸을 합치기 전에 짧은 표 여러 개나 [[목록]]이 더 알맞은지 살핀다.
- **좁은 화면:** 표가 넓으면 표 영역 안에서 가로로 이동하게 할 수 있다. 키보드로도 들어갈 수 있는 영역에 이름과 이동 안내를 붙인다.
## 한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 `example-04.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
```html
전시 일정표를 HTML로 만들기: 제작 예제
종이방의 주말
가상의 일정입니다. 표가 화면보다 넓으면 좌우로 이동하세요.
제작 예제: 전시와 대화 일정
| 날짜 | 시간 |
행사 | 장소 |
|---|
| 11월 7일 | 14:00 | 전시 함께 보기 | 전시장 |
| 11월 8일 | 16:00 | 책을 만든 사람과 대화 | 책상 옆 |
```
창을 좁힌 뒤 `Tab`으로 표 영역에 들어가 방향키로 가로 이동을 확인한다. 긴 행사 이름을 넣었을 때 줄바꿈과 행의 높이도 살핀다. [[작품 목록을 데이터로 만들기]]에서 관리한 값을 표로 내보낼 수 있지만, [[표로 만들지 않을 정보]]까지 억지로 칸에 넣을 필요는 없다.
## 참고
- [셰이 하우: 표로 데이터 정리하기](https://learn.shayhowe.com/html-css/organizing-data-with-tables/)
- [W3C: 제목 셀이 있는 표](https://www.w3.org/WAI/tutorials/tables/one-header/)
#HTML #전시 #접근성