표

표는 행과 열로 이루어진 데이터를 보여 줄 때 사용합니다. 가격표, 시간표, 비교표처럼 두 축으로 의미가 정해지는 데이터에 적합합니다. 이번 강의에서는 표의 구조와 셀 병합을 배웁니다.

학습 목표

• table, tr, th, td로 기본 표를 만든다.
• thead, tbody, tfoot로 표를 구조화한다.
• colspan, rowspan으로 셀을 병합한다.
• caption과 scope로 접근성을 높인다.

기본 표 만들기

표는 table 안에 행(tr)을 넣고, 각 행 안에 셀을 넣어 만듭니다. 머리글 셀은 th, 일반 데이터 셀은 td입니다.

<table>
  <tr>
    <th>이름</th>
    <th>점수</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>90</td>
  </tr>
</table>

th는 기본적으로 굵게, 가운데 정렬되어 머리글임을 시각적으로 보여 줍니다.

⚠️ 주의 — 표는 데이터를 표현할 때만 사용합니다. 페이지 레이아웃을 잡으려고 표를 쓰는 것은 오래된 방식이며, 레이아웃은 CSS로 해야 합니다.

thead, tbody, tfoot

표가 길어지면 머리글, 본문, 바닥글을 구분해 의미를 명확히 합니다.

<table>
  <thead>
    <tr>
      <th>상품</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>사과</td>
      <td>1,000원</td>
    </tr>
    <tr>
      <td>바나나</td>
      <td>2,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>3,000원</td>
    </tr>
  </tfoot>
</table>

💡 TIP — thead로 머리글을 묶으면 인쇄 시 페이지가 넘어가도 머리글이 반복 출력되는 등 브라우저가 더 똑똑하게 처리할 수 있습니다.

셀 병합

colspan은 가로로(열 방향), rowspan은 세로로(행 방향) 셀을 합칩니다.

<table>
  <tr>
    <th colspan="2">2학기 시간표</th>
  </tr>
  <tr>
    <th rowspan="2">오전</th>
    <td>국어</td>
  </tr>
  <tr>
    <td>수학</td>
  </tr>
</table>

colspan="2"는 한 셀이 두 칸을 차지하고, rowspan="2"는 두 행에 걸칩니다. 병합한 만큼 다음 행/열의 셀 개수를 줄여야 표가 어긋나지 않습니다.

caption과 scope

caption은 표의 제목이며, table 바로 다음에 옵니다. scope 속성은 머리글 셀이 행 머리글인지(row) 열 머리글인지(col) 알려 줘 접근성을 높입니다.

<table>
  <caption>학생별 과목 점수</caption>
  <thead>
    <tr>
      <th scope="col">이름</th>
      <th scope="col">국어</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">홍길동</th>
      <td>88</td>
    </tr>
  </tbody>
</table>

💡 TIP — scope를 지정하면 스크린 리더가 "홍길동의 국어 88점"처럼 셀의 맥락을 함께 읽어 줍니다.

요약

• 표는 table > tr > th/td 구조로 만듭니다.
• thead, tbody, tfoot로 표를 의미 단위로 나눕니다.
• colspan은 가로, rowspan은 세로로 셀을 병합합니다.
• caption으로 제목을, scope로 머리글 방향을 명시합니다.
• 표는 데이터용이며 레이아웃 용도로 쓰지 않습니다.

연습문제

1. 이름과 전화번호 두 명분을 담은 기본 표를 만드세요.
2. 위 표를 thead와 tbody로 구조화하세요.
3. "1분기"가 세 행에 걸치는 표를 rowspan으로 작성하세요.
4. 표에 caption과 열 머리글 scope를 추가하세요.

힌트 — 셀을 병합하면 그만큼 같은 행/열의 셀 수를 줄여야 합니다.