6강. 표 만들기 | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 여러분은 데이터를 행과 열로 정리한 표를 만들고, 여러 칸을 하나로 합치는 셀 병합까지 할 수 있게 됩니다. 표는 시간표, 가격표, 성적표처럼 정해진 항목별로 정보를 비교해 보여 줄 때 아주 유용합니다. 이번 강에서 여러 태그가 짜임새 있게 중첩되는 구조를 익히면, 앞으로 복잡한 HTML 구조를 다루는 힘도 함께 길러집니다.

구체적으로는 세 가지를 배웁니다. 첫째, 표의 기본 뼈대인 table·tr·th·td를 익힙니다. 둘째, 표의 머리와 몸통을 나누는 thead·tbody를 살펴봅니다. 셋째, 칸을 합치는 colspan·rowspan을 배웁니다.

🧱 표의 기본 구조 — table, tr, td

이 섹션에서는 표를 이루는 가장 기본적인 태그들을 살펴보겠습니다.

표는 행(가로줄)과 열(세로줄)이 만나 이루는 칸(셀)들로 이루어집니다. HTML에서 표를 만들 때는 이 구조를 태그로 그대로 표현합니다. 먼저 표 전체를 <table>로 감쌉니다. 그 안에 행을 <tr>(table row)로 만들고, 각 행 안에 칸을 <td>(table data)로 넣습니다. 아래 코드를 보세요.

<table>
  <tr>
    <td>사과</td>
    <td>1000원</td>
  </tr>
  <tr>
    <td>바나나</td>
    <td>1500원</td>
  </tr>
</table>

이 코드의 구조를 읽어 봅시다. <table> 안에 <tr>이 두 개 있으니 행이 두 줄이고, 각 <tr> 안에 <td>가 두 개씩 있으니 열이 두 칸입니다. 즉 2행 2열의 표입니다. 핵심은 table → tr(행) → td(칸)의 순서로 중첩된다는 것입니다. 표는 이렇게 태그가 겹겹이 들어가는 구조라, 들여쓰기를 잘해야 구조가 한눈에 보입니다.

🔠 제목 칸 — th

이 섹션에서는 표의 제목 칸을 만드는 태그를 살펴보겠습니다.

위 표에는 아쉬운 점이 있습니다. 각 열이 무엇을 뜻하는지(품목인지 가격인지) 알려 주는 제목 줄이 없습니다. 표의 제목 칸은 일반 칸인 <td> 대신 <th>(table header)로 만듭니다. th로 만든 칸은 브라우저가 자동으로 굵은 글씨에 가운데 정렬로 표시해, 제목임을 시각적으로 드러냅니다.

<table>
  <tr>
    <th>품목</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>1000원</td>
  </tr>
</table>

이제 맨 윗줄에 '품목'과 '가격'이라는 굵은 제목이 생겨, 표가 훨씬 알아보기 쉬워졌습니다. th는 단지 보기 좋게 하는 것을 넘어, 이 칸이 제목(머리말)임을 컴퓨터에도 알려 줍니다. 그래서 화면 낭독기 같은 도구가 표를 더 잘 이해할 수 있습니다. 제목 칸에는 <th>, 일반 데이터 칸에는 <td>를 쓴다고 기억하세요.

🗂️ 머리와 몸통 나누기 — thead와 tbody

이 섹션에서는 표를 의미 있는 영역으로 나누는 thead와 tbody를 살펴보겠습니다.

표가 커지면, 제목 줄과 실제 데이터 줄을 구조적으로 구분해 주는 것이 좋습니다. 이때 제목 행들은 <thead>(table head)로, 실제 데이터 행들은 <tbody>(table body)로 감쌉니다.

<table>
  <thead>
    <tr>
      <th>품목</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>사과</td>
      <td>1000원</td>
    </tr>
    <tr>
      <td>바나나</td>
      <td>1500원</td>
    </tr>
  </tbody>
</table>

화면에 보이는 결과는 앞의 표와 크게 다르지 않습니다. 그러나 이렇게 나누면 제목 영역과 데이터 영역이 코드상 명확히 구분되어, 표의 구조가 훨씬 읽기 쉬워집니다. 또한 나중에 CSS로 제목 줄만 색을 입히거나, 데이터가 많을 때 몸통만 스크롤되게 하는 등 영역별로 다루기가 편해집니다. 작은 표라면 생략해도 되지만, 표를 제대로 만드는 좋은 습관으로 익혀 두면 좋습니다.

🔗 셀 병합 — colspan과 rowspan

이 섹션에서는 여러 칸을 하나로 합치는 셀 병합을 살펴보겠습니다.

표를 만들다 보면 하나의 칸을 여러 칸 크기로 넓혀야 할 때가 있습니다. 예를 들어 여러 열에 걸친 제목을 만들 때입니다. 이렇게 가로로(열 방향) 칸을 합칠 때는 colspan 속성을 씁니다. colspan은 'column span(열 걸침)'의 줄임말입니다.

<table>
  <tr>
    <th colspan="2">과일 가격표</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>1000원</td>
  </tr>
</table>

여기서 colspan="2"는 이 칸이 2개 칸 너비를 차지하라는 뜻입니다. 그 결과 '과일 가격표'라는 제목이 아래 두 칸을 합친 만큼 넓게 걸쳐 표시됩니다. 중요한 점은, 이렇게 한 칸을 2칸 너비로 합쳤으니 그 줄에는 다른 칸을 더 넣지 않는다는 것입니다.

반대로 세로로(행 방향) 칸을 합칠 때는 rowspan('row span, 행 걸침') 속성을 씁니다. rowspan="2"라고 하면 그 칸이 아래 행까지 2줄에 걸쳐 세로로 합쳐집니다. colspan은 가로 병합, rowspan은 세로 병합이라고 짝지어 기억하면 헷갈리지 않습니다. 병합은 표를 처음 배울 때 가장 어려운 부분이니, 직접 작은 표를 만들어 값을 바꿔 보며 익히는 것이 좋습니다.

⚠️ 자주 하는 실수

이 섹션에서는 표를 만들 때 흔한 실수를 정리하겠습니다.

첫 번째, td를 tr 밖에 두는 것입니다. 모든 칸(<td>·<th>)은 반드시 행(<tr>) 안에 들어가야 합니다. 'table → tr → td'의 순서를 어기면 표가 깨집니다. 항상 이 중첩 순서를 지키세요.

두 번째, 행마다 칸 수가 안 맞는 것입니다. 병합을 쓰지 않았는데 어떤 행은 칸이 2개, 어떤 행은 3개라면 표가 어긋나 보입니다. 각 행의 칸 수를 일정하게 맞추거나, 다르다면 colspan·rowspan으로 의도를 정확히 표현해야 합니다.

세 번째, 표를 화면 배치용으로 쓰는 것입니다. 표는 어디까지나 데이터를 정리하기 위한 것입니다. 과거에는 페이지 레이아웃을 표로 짜기도 했지만, 이는 잘못된 방식입니다. 화면 배치는 이 강좌 후반에 배울 CSS(특히 Flexbox·Grid)로 해야 합니다.

📝 핵심 요약

이번 강에서는 표 만들기를 배웠습니다.

기본 구조 — 표는 table → tr(행) → td(칸)의 순서로 중첩됩니다. 제목 칸은 td 대신 th를 씁니다.
th — 제목 칸으로, 굵고 가운데 정렬로 표시되며 이 칸이 머리말임을 알려 줍니다.
thead·tbody — 제목 행 영역과 데이터 행 영역을 구조적으로 나누어 표를 읽기 쉽고 다루기 편하게 합니다.
셀 병합 — colspan은 가로(열) 병합, rowspan은 세로(행) 병합입니다. 병합한 만큼 그 줄의 칸 수를 조정해야 합니다.

이제 표로 데이터를 정리하는 법까지 익혔습니다. 다음 강에서는 사용자가 정보를 입력할 수 있게 하는 폼(form)의 기초를 배워, 검색창·로그인 같은 입력 요소를 만들어 보겠습니다. 다음 강 「폼 기초」에서 이어가겠습니다.

표 만들기