9. 정보를 표처럼 보여주기: 테이블 기초

2026-04-14Views 97약 6분

9. 정보를 표처럼 보여주기: 테이블 기초

웹페이지에 정보를 올리는 방법은 여러 가지가 있습니다. 문단으로 설명할 수도 있고, 목록으로 나열할 수도 있지요. 그런데 어떤 정보는 줄글로 쓰면 오히려 더 헷갈립니다. 예를 들어 시간표, 메뉴판, 가격 비교표처럼 "가로와 세로로 딱 맞춰서" 보여줘야 한눈에 들어오는 정보들이 있습니다. 이럴 때 등장하는 든든한 도구가 바로 테이블(table) 입니다.¹

테이블은 쉽게 말해 행(row)과 열(column)로 정리된 정보 상자입니다. 종이에 표를 그려서 정리하듯, HTML에서도 표를 만들 수 있습니다. 오늘 배울 핵심 태그는 딱 네 가지입니다.

<table>: 표 전체를 감싸는 태그
<tr>: 한 줄, 즉 행을 만드는 태그
<th>: 제목 칸을 만드는 태그
<td>: 내용 칸을 만드는 태그

이 네 친구만 잘 익혀도 초보자용 표는 충분히 만들 수 있습니다.

정보를 표처럼 보여주기: 테이블 기초

테이블은 언제 사용할까요?

테이블은 정리된 데이터를 보여줄 때 사용합니다. "이 정보가 행과 열로 나뉘면 더 보기 쉬울까?"라고 생각해 보면 판단이 쉽습니다.¹

예를 들어 이런 경우에 잘 어울립니다.

수업 시간표
카페 메뉴와 가격표
휴대폰 요금제 비교표
시험 성적표
영화 상영 시간표

반대로 웹페이지의 전체 배치, 예를 들어 헤더를 위에 두고 본문을 옆으로 나누는 식의 레이아웃 용도로 테이블을 쓰면 안 됩니다. 예전에는 그렇게 쓰던 시절도 있었지만, 지금은 CSS로 배치하는 것이 올바른 방법입니다. 테이블을 레이아웃에 쓰면 코드도 복잡해지고, 접근성도 나빠질 수 있습니다.¹

한마디로 정리하면 이렇습니다.

표처럼 생긴 데이터를 보여줄 때는 테이블, 페이지 배치는 CSS.

테이블의 기본 구조 한눈에 보기

가장 간단한 표는 이렇게 생깁니다.

<table>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>김밥</td>
    <td>4,000원</td>
  </tr>
  <tr>
    <td>라면</td>
    <td>5,000원</td>
  </tr>
</table>

이 코드를 사람 말로 바꾸면 이렇습니다.

먼저 <table>로 "여기부터 표입니다"라고 알려 줍니다. 그 안에서 <tr>로 한 줄씩 만들고, 첫 번째 줄에는 제목 칸인 <th>를 넣습니다. 그다음 줄부터는 실제 데이터이므로 <td>를 넣습니다.

즉, 순서는 보통 이렇게 흘러갑니다.

표를 만들고 → 행을 만들고 → 그 행 안에 칸을 넣는다.

초보자가 자주 하는 착각 중 하나는 "열부터 만드는 것 아닌가요?"라는 생각입니다. 하지만 HTML 테이블은 보통 행 단위로 작성합니다. 한 줄을 만들고, 그 줄 안에 칸을 왼쪽에서 오른쪽으로 넣는 방식입니다.

`<table>`: 표 전체를 감싸는 바깥 상자

<table>은 표의 시작과 끝을 알려 주는 태그입니다. 이 태그가 없으면 브라우저는 이것이 표인지 알 수 없습니다.²

<table>
  <!-- 표 내용 -->
</table>

이 안에 행과 셀들이 들어갑니다. 마치 도시락 통이 있고, 그 안에 칸이 나뉘는 느낌이라고 생각하면 쉽습니다. 도시락 통이 바로 <table>입니다.

`<tr>`: 표의 한 줄을 만드는 태그

<tr>은 table row의 줄임말입니다. 말 그대로 표의 한 행을 만듭니다.²

<tr>
  <td>사과</td>
  <td>3개</td>
</tr>

이 코드는 "사과 | 3개"라는 한 줄을 만든다고 생각하면 됩니다.

중요한 점은 <tr> 안에 바로 글자를 쓰는 것이 아니라, 보통 그 안에 <th>나 <td>가 들어간다는 것입니다. 즉, <tr>은 줄을 만들고, 실제 칸은 다른 태그가 담당합니다.

`<th>`: 제목 칸을 만드는 태그

<th>는 table header의 줄임말입니다. 표에서 "이 열은 무엇을 뜻하는가?"를 알려 주는 제목 칸입니다.¹

예를 들어 아래 코드에서 메뉴, 가격은 제목입니다.

<tr>
  <th>메뉴</th>
  <th>가격</th>
</tr>

브라우저는 보통 <th>의 글자를 굵게 보여 주고, 가운데 정렬하는 기본 스타일을 적용합니다.²

하지만 <th>의 진짜 장점은 단순히 굵게 보이는 데 있지 않습니다. 이 칸이 "제목"이라는 의미를 가지기 때문에, 사람도 읽기 쉽고 보조 기술도 표 구조를 더 잘 이해할 수 있습니다.¹

쉽게 말해 <th>는 꾸밈용이 아니라 의미를 담는 태그입니다.

`<td>`: 실제 내용을 넣는 데이터 칸

<td>는 table data의 줄임말입니다. 표 안의 실제 데이터를 담는 칸입니다.²

<tr>
  <td>김밥</td>
  <td>4,000원</td>
</tr>

여기서 김밥과 4,000원이 실제 데이터입니다. 제목이 아니라 내용이므로 <td>를 사용합니다.

<td> 안에는 글자만 넣는 것이 아닙니다. 링크, 이미지, 목록 같은 다른 HTML 요소도 들어갈 수 있습니다.²

예를 들면 이런 것도 가능합니다.

<tr>
  <td><a href="menu.html">김밥 세트</a></td>
  <td>6,500원</td>
</tr>

그러니까 <td>는 "표 안의 일반 칸"이라고 생각하면 됩니다.

첫 번째 실전 예제: 간식 메뉴판 만들기

이제 조금 더 재미있는 예제를 만들어 봅시다. 학교 매점의 간식 메뉴판이라고 상상해 보세요.

<table>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
    <th>인기</th>
  </tr>
  <tr>
    <td>떡볶이</td>
    <td>3,500원</td>
    <td>★★★★★</td>
  </tr>
  <tr>
    <td>순대</td>
    <td>4,000원</td>
    <td>★★★★☆</td>
  </tr>
  <tr>
    <td>튀김</td>
    <td>3,000원</td>
    <td>★★★☆☆</td>
  </tr>
</table>

이 표를 읽는 방법은 간단합니다.

첫 번째 줄은 제목 줄입니다. 그래서 <th>를 사용했습니다. 그 아래 줄들은 실제 메뉴 데이터이므로 <td>를 사용했습니다. 각 줄은 하나의 메뉴를 나타내고, 각 칸은 메뉴 이름, 가격, 인기 정보를 담습니다.

이렇게 보면 테이블은 생각보다 어렵지 않습니다. 그냥 한 줄씩 차곡차곡 적는 것입니다.

시간표 예제로 행과 열 감각 익히기

테이블을 잘 만들려면 행과 열을 헷갈리지 않아야 합니다.

행(row): 가로줄
열(column): 세로줄

예를 들어 시간표를 만들어 보겠습니다.

<table>
  <tr>
    <th>교시</th>
    <th>월요일</th>
    <th>화요일</th>
    <th>수요일</th>
  </tr>
  <tr>
    <td>1교시</td>
    <td>국어</td>
    <td>수학</td>
    <td>영어</td>
  </tr>
  <tr>
    <td>2교시</td>
    <td>과학</td>
    <td>체육</td>
    <td>음악</td>
  </tr>
</table>

여기서 첫 번째 행은 요일 제목을 알려 주고, 두 번째와 세 번째 행은 실제 수업 정보를 담습니다.

이 표를 머릿속으로 분해해 보면,

첫 번째 줄에는 "교시, 월요일, 화요일, 수요일"이 있고, 두 번째 줄에는 "1교시, 국어, 수학, 영어"가 있고, 세 번째 줄에는 "2교시, 과학, 체육, 음악"이 있습니다.

즉, 테이블은 결국 "가로 한 줄씩" 쌓아 올리는 구조입니다.

왜 `<th>`를 꼭 써야 할까요?

초보자는 종종 이런 식으로 작성합니다.

<table>
  <tr>
    <td>메뉴</td>
    <td>가격</td>
  </tr>
  <tr>
    <td>김밥</td>
    <td>4,000원</td>
  </tr>
</table>

겉으로 보기엔 얼핏 맞아 보일 수 있습니다. 하지만 첫 줄의 메뉴, 가격은 데이터가 아니라 제목이므로 <th>가 더 적절합니다.

<table>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>김밥</td>
    <td>4,000원</td>
  </tr>
</table>

이렇게 쓰면 표의 구조가 더 명확해집니다. 사람도 읽기 쉽고, 브라우저와 보조 기술도 "아, 이건 제목 칸이구나" 하고 이해할 수 있습니다.¹

겉모습만 비슷하게 만드는 것과, 의미까지 올바르게 만드는 것은 다릅니다. HTML에서는 이 차이가 꽤 중요합니다.

표는 보기 좋게 맞춰진 정보일 때 빛난다

테이블이 특히 잘 어울리는 정보는 서로 비교하거나 대조해야 하는 정보입니다.

예를 들어 아래처럼 요금제를 비교해 봅시다.

<table>
  <tr>
    <th>요금제</th>
    <th>월 요금</th>
    <th>데이터</th>
  </tr>
  <tr>
    <td>라이트</td>
    <td>10,000원</td>
    <td>5GB</td>
  </tr>
  <tr>
    <td>스탠다드</td>
    <td>20,000원</td>
    <td>20GB</td>
  </tr>
  <tr>
    <td>프리미엄</td>
    <td>30,000원</td>
    <td>무제한</td>
  </tr>
</table>

이런 정보는 문장으로 길게 쓰는 것보다 표로 보여 주는 편이 훨씬 빠르게 이해됩니다. 사용자는 한 열만 쭉 보거나, 같은 행만 따라가면서 정보를 비교할 수 있기 때문입니다.¹

테이블은 말하자면 정보 정리의 칸 맞춤 장인입니다.

초보자가 자주 하는 실수

테이블을 처음 만들 때는 비슷한 실수를 자주 합니다. 미리 알고 가면 훨씬 편합니다.

`<tr>` 없이 `<td>`만 쓰는 실수

잘못된 예시는 이렇습니다.

<table>
  <td>사과</td>
  <td>배</td>
</table>

<td>는 반드시 행 안에 들어가야 하므로, <tr>이 필요합니다.

<table>
  <tr>
    <td>사과</td>
    <td>배</td>
  </tr>
</table>

제목 칸도 모두 `<td>`로 쓰는 실수

제목은 <th>, 내용은 <td>라고 구분해 두면 구조가 훨씬 명확해집니다.

셀 개수가 들쭉날쭉한 실수

예를 들어 첫 번째 줄은 3칸인데 두 번째 줄은 2칸이면 표가 어색해질 수 있습니다.

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>민지</td>
    <td>20</td>
  </tr>
</table>

이 경우 두 번째 줄에는 직업 칸이 비어 있는 셈입니다. 초보자 단계에서는 각 행의 칸 수를 맞춘다고 생각하면 좋습니다.

브라우저에서 테이블이 밋밋해 보여도 걱정하지 마세요

처음 테이블을 만들면 "어? 선이 안 보이는데요?" 하고 놀랄 수 있습니다. HTML은 구조를 만드는 언어이고, 보기 좋게 꾸미는 일은 주로 CSS가 담당합니다.¹

예를 들어 아래 CSS를 더하면 표가 훨씬 또렷해집니다.

<style>
  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }
</style>

여기서 중요한 것은 지금 당장 CSS를 완벽히 외우는 것이 아닙니다. "아, HTML로는 구조를 만들고 CSS로는 보기 좋게 꾸민다"는 감각만 잡으면 충분합니다.

한 단계 더: 제목까지 붙이면 더 친절한 표가 된다

이번 챕터의 핵심은 <table>, <tr>, <th>, <td>입니다. 하지만 표를 더 친절하게 만들고 싶다면 나중에 <caption>도 함께 배울 수 있습니다. 이 태그는 표의 제목을 붙이는 데 쓰이며, 표가 무엇에 대한 것인지 이해하는 데 도움을 줍니다.¹

예를 들면 이런 느낌입니다.

<table>
  <caption>분식 메뉴표</caption>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>라면</td>
    <td>5,000원</td>
  </tr>
</table>

아직은 "표 제목도 붙일 수 있구나" 정도만 알아 두면 충분합니다.

직접 만들어 보기: 나만의 미니 표

이제 직접 손으로 한 번 만들어 봅시다. 아래 예제를 그대로 따라 쳐도 좋고, 내용을 바꿔도 좋습니다.

예제: 좋아하는 영화 표

<table>
  <tr>
    <th>영화 제목</th>
    <th>장르</th>
    <th>별점</th>
  </tr>
  <tr>
    <td>토이 스토리</td>
    <td>애니메이션</td>
    <td>★★★★★</td>
  </tr>
  <tr>
    <td>인터스텔라</td>
    <td>SF</td>
    <td>★★★★★</td>
  </tr>
  <tr>
    <td>해리 포터</td>
    <td>판타지</td>
    <td>★★★★☆</td>
  </tr>
</table>

이 코드를 바꿔서 이런 식으로 연습해 보세요.

영화 대신 게임 목록 만들기
장르 대신 출시 연도 넣기
별점 대신 한 줄 감상 넣기

중요한 것은 예쁜 데이터를 찾는 게 아니라, 표 구조를 손으로 익히는 것입니다.

머릿속에 남겨 둘 핵심 정리

이번 챕터에서 꼭 기억해야 할 것은 많지 않습니다.

<table>은 표 전체를 감싸고, <tr>은 한 줄을 만들고, <th>는 제목 칸, <td>는 내용 칸을 만듭니다.

그리고 테이블은 아무 때나 쓰는 도구가 아니라, 행과 열로 정리된 데이터를 보여줄 때 사용하는 도구입니다. 시간표, 메뉴판, 비교표처럼요.¹

처음에는 태그 이름이 비슷해서 헷갈릴 수 있습니다. 하지만 한 줄씩 차근차근 적다 보면 금방 익숙해집니다. HTML 테이블은 복잡한 마법이 아니라, 정리정돈을 잘하는 종이 표를 웹으로 옮기는 방법에 가깝습니다.

다음 챕터에서는 사용자가 직접 값을 입력할 수 있는 폼과 입력 요소를 배우게 됩니다. 이제 우리는 정보를 보여주는 것을 넘어, 사용자와 대화하는 웹페이지로 한 걸음 더 나아가게 됩니다.

참고

¹HTML table basics - Learn web development | MDN

²HTML Tables

책 목록

html 기초에 대한 책

전체 목차 보기

9. 정보를 표처럼 보여주기: 테이블 기초

9. 정보를 표처럼 보여주기: 테이블 기초

테이블은 언제 사용할까요?

테이블의 기본 구조 한눈에 보기

<table>: 표 전체를 감싸는 바깥 상자

<tr>: 표의 한 줄을 만드는 태그

<th>: 제목 칸을 만드는 태그

<td>: 실제 내용을 넣는 데이터 칸

첫 번째 실전 예제: 간식 메뉴판 만들기

시간표 예제로 행과 열 감각 익히기

왜 <th>를 꼭 써야 할까요?

표는 보기 좋게 맞춰진 정보일 때 빛난다

초보자가 자주 하는 실수

<tr> 없이 <td>만 쓰는 실수

제목 칸도 모두 <td>로 쓰는 실수

셀 개수가 들쭉날쭉한 실수

브라우저에서 테이블이 밋밋해 보여도 걱정하지 마세요

한 단계 더: 제목까지 붙이면 더 친절한 표가 된다

직접 만들어 보기: 나만의 미니 표

예제: 좋아하는 영화 표

머릿속에 남겨 둘 핵심 정리

참고

책 목록

`<table>`: 표 전체를 감싸는 바깥 상자

`<tr>`: 표의 한 줄을 만드는 태그

`<th>`: 제목 칸을 만드는 태그

`<td>`: 실제 내용을 넣는 데이터 칸

왜 `<th>`를 꼭 써야 할까요?

`<tr>` 없이 `<td>`만 쓰는 실수

제목 칸도 모두 `<td>`로 쓰는 실수