표로 데이터 표현하기

요일마다 무엇을 공부할지 정리할 때는 요일과 학습 주제를 나란히 놓으면 관계를 쉽게 읽을 수 있습니다. HTML의 표를 사용하면 각 주제가 어느 요일에 해당하는지 구조로 표현할 수 있습니다.

표를 이루는 요소

표는 가로로 이어지는 행과 세로로 이어지는 열로 데이터를 정리합니다. table은 표 전체를 감싸고, tr은 한 행을 만듭니다. 각 행 안에는 제목 셀인 th와 일반 데이터 셀인 td를 넣습니다. caption은 표가 무엇을 보여 주는지 알려 주는 제목으로, table 바로 안의 첫 요소에 둡니다.

이 예제의 핵심은 요일별 학습 주제를 두 열로 연결하는 것입니다. 열의 이름뿐 아니라 각 행의 요일도 제목 셀로 표시해 데이터의 맥락을 전달합니다.

요일별 학습 계획 만들기

환경은 Chromium입니다. 아래 HTML이 예제의 입력이며, 추가 파일이나 네트워크 연결은 필요하지 않습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>학습 계획</title>
</head>
<body>
  <h1>나의 학습 계획</h1>
  <table>
    <caption>요일별 학습 계획</caption>
    <thead>
      <tr>
        <th scope="col">요일</th>
        <th scope="col">학습 주제</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">월요일</th>
        <td>HTML 문서 구조</td>
      </tr>
      <tr>
        <th scope="row">수요일</th>
        <td>링크와 이미지</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

예상 화면에는 나의 학습 계획이라는 제목과 요일별 학습 계획이라는 표 제목이 나타납니다. 표의 첫 행에는 요일과 학습 주제가 있고, 그 아래에는 월요일과 HTML 문서 구조, 수요일과 링크와 이미지가 각각 한 행에 표시됩니다. 별도의 스타일을 지정하지 않았으므로 표 테두리는 보이지 않을 수 있습니다.

thead는 표의 머리글 행을, tbody는 데이터가 들어 있는 본문 행을 묶습니다. 첫 행의 scope="col"은 각 th가 해당 열의 제목임을 나타냅니다. 다음 두 행의 scope="row"는 요일이 해당 행의 제목임을 나타냅니다. 예를 들어 HTML 문서 구조는 같은 행의 월요일과 같은 열의 학습 주제에 연결됩니다. 이런 제목 정보는 표를 보조 기술로 탐색할 때도 맥락을 전달하는 데 도움이 됩니다.

흔한 실수와 경계 조건

tr 안에 셀을 넣지 않고 텍스트만 나열하거나, 모든 셀을 td로 작성하면 제목과 데이터의 역할을 코드에서 구분하기 어렵습니다. 제목에는 th를 사용하고, 각 행에서 셀의 순서를 열 제목과 맞추세요. 이 예제에서 요일 다음에 학습 주제가 와야 두 값이 올바른 열에 놓입니다.

학습할 주제가 아직 정해지지 않았다면 빈칸의 의미가 불분명할 수 있습니다. 예를 들어 해당 셀에 미정이라고 적으면 아직 정하지 않았다는 뜻을 전달할 수 있습니다. 행이나 열을 합치는 복잡한 표는 제목과 데이터의 관계가 더 어려워지므로, 처음에는 이 예제처럼 한 셀에 한 항목을 담는 표부터 연습하세요.

표는 요일과 주제처럼 두 방향의 관계가 있는 데이터에 적합합니다. 학습 주제 이름만 순서 없이 나열한다면 앞에서 배운 ul과 li가 더 알맞습니다. 페이지의 위치를 맞추기 위한 용도로 표를 사용하지는 않습니다.

연습과 해설

위 표에 금요일의 학습 주제 표 만들기를 추가해 보세요. 요일을 행 제목으로 표시하고 기존 열 순서를 유지하세요.

풀이: tbody의 수요일 행 뒤에 새 tr을 추가합니다. 그 안에 <th scope="row">금요일</th>을 먼저 넣고, 이어서 <td>표 만들기</td>를 넣습니다. 그러면 금요일이 새 행의 제목이 되고 표 만들기가 학습 주제 열에 놓입니다.

표 요소와 제목 셀에 관한 자세한 내용은 HTML 표 표준을 참고하세요.