HTML에서 표를 만들 때는 table 태그를 사용합니다.
표는 데이터를 행과 열로 정리해서 보여줄 때 사용합니다.
예를 들어 가격표, 시간표, 성적표, 비교표 같은 정보를 표현할 때 적합합니다.
이 글에서는 HTML 표를 만들 때 자주 사용하는 태그를 정리합니다.
이 글에서 다루는 내용
tabletrthtd- 표를 사용할 때 주의할 점
표는 언제 사용할까?
표는 서로 비교하거나 정리해야 하는 데이터가 있을 때 사용합니다.
예를 들어 다음과 같은 정보를 보여줄 때 표가 잘 어울립니다.
- 상품별 가격 비교
- 요일별 시간표
- 회원 목록
- 게시글 목록
- 기술 스택 비교
중요한 기준은 간단합니다.
줄과 칸으로 정리했을 때 더 이해하기 쉬운 데이터라면 표를 사용합니다.
table 태그
table 태그는 표 전체를 감싸는 태그입니다.
표를 만들 때 가장 바깥쪽에 사용합니다.
<table>
...
</table>
하지만 table만으로는 표가 완성되지 않습니다.
표 안에는 줄을 만드는 tr, 제목 칸을 만드는 th, 일반 칸을 만드는 td가 함께 들어갑니다.
tr 태그
tr 태그는 표의 한 줄을 만듭니다.
tr은 table row를 의미합니다.
여기서 row는 행, 즉 가로 줄을 뜻합니다.
<table>
<tr>
...
</tr>
</table>
표에서 한 줄이 필요할 때마다 tr을 하나씩 작성합니다.
예를 들어 3줄짜리 표라면 tr도 3개가 필요합니다.
th 태그
th 태그는 표의 제목 칸을 만듭니다.
th는 table header를 의미합니다.
보통 표의 맨 위 줄에서 각 열의 이름을 나타낼 때 사용합니다.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직무</th>
</tr>
</table>
브라우저에서는 보통 th 안의 글자가 굵게 표시되고 가운데 정렬됩니다.
하지만 중요한 것은 디자인이 아니라 이 칸이 제목 역할을 한다는 의미입니다.
td 태그
td 태그는 표의 일반 데이터 칸을 만듭니다.
td는 table data를 의미합니다.
실제 데이터는 대부분 td 안에 들어갑니다.
<table>
<tr>
<td>민준</td>
<td>28</td>
<td>백엔드</td>
</tr>
</table>
td는 제목이 아닌 일반 값을 넣을 때 사용합니다.
표 기본 구조
아래는 가장 기본적인 표 예시입니다.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직무</th>
</tr>
<tr>
<td>민준</td>
<td>28</td>
<td>프론트엔드</td>
</tr>
<tr>
<td>지훈</td>
<td>31</td>
<td>백엔드</td>
</tr>
</table>
이 표는 다음과 같은 구조입니다.
| 이름 | 나이 | 직무 |
|---|---|---|
| 민준 | 28 | 프론트엔드 |
| 지훈 | 31 | 백엔드 |
코드로 보면 길어 보이지만 구조는 단순합니다.
table: 표 전체tr: 한 줄th: 제목 칸td: 일반 데이터 칸
table, tr, th, td 관계 이해하기
표 태그는 상자 안에 상자가 들어가는 구조로 생각하면 쉽습니다.
표 전체 table
└─ 한 줄 tr
├─ 제목 칸 th
├─ 제목 칸 th
└─ 제목 칸 th
└─ 한 줄 tr
├─ 데이터 칸 td
├─ 데이터 칸 td
└─ 데이터 칸 td
즉, table 안에 tr이 들어가고, tr 안에 th나 td가 들어갑니다.
td가 바로 table 안에 들어가면 구조가 올바르지 않습니다.
<!-- 잘못된 예시 -->
<table>
<td>이름</td>
</table>
아래처럼 반드시 tr 안에 넣어야 합니다.
<!-- 올바른 예시 -->
<table>
<tr>
<td>이름</td>
</tr>
</table>
게시글 목록 예시
블로그나 게시판에서는 게시글 목록을 표로 보여줄 수도 있습니다.
<table>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
</tr>
<tr>
<td>1</td>
<td>HTML 기본 구조 이해하기</td>
<td>2026-05-16</td>
</tr>
<tr>
<td>2</td>
<td>HTML 폼 태그 기초 정리하기</td>
<td>2026-05-16</td>
</tr>
</table>
이처럼 같은 형식의 데이터가 반복될 때 표를 사용하면 보기 좋게 정리할 수 있습니다.
표를 사용할 때 주의할 점
table은 데이터를 표 형태로 보여주기 위한 태그입니다.
예전에는 웹 페이지의 전체 레이아웃을 만들 때도 table을 많이 사용했습니다.
하지만 지금은 그런 방식이 좋지 않습니다.
table을 레이아웃용으로 쓰지 않기
아래처럼 화면 배치를 위해 table을 사용하는 것은 피하는 것이 좋습니다.
<table>
<tr>
<td>왼쪽 메뉴</td>
<td>본문 내용</td>
</tr>
</table>
이런 구조는 표 데이터가 아니라 화면 배치에 가깝습니다.
화면 배치는 CSS의 flex, grid 같은 기능으로 처리하는 것이 좋습니다.
table은 표 데이터에만 사용하는 습관을 들이는 것이 좋습니다.
제목 칸에는 th 사용하기
표의 제목 역할을 하는 칸에는 td보다 th를 사용하는 것이 좋습니다.
<!-- 좋지 않은 예시 -->
<tr>
<td>이름</td>
<td>나이</td>
<td>직무</td>
</tr>
겉으로는 표처럼 보일 수 있습니다.
하지만 HTML 의미상으로는 일반 데이터 칸으로 처리됩니다.
아래처럼 제목 칸은 th로 작성하는 것이 더 적절합니다.
<!-- 좋은 예시 -->
<tr>
<th>이름</th>
<th>나이</th>
<th>직무</th>
</tr>
이렇게 작성하면 브라우저와 보조 기술이 표 구조를 더 잘 이해할 수 있습니다.
표의 칸 개수 맞추기
표를 만들 때는 각 줄의 칸 개수를 맞추는 것이 좋습니다.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직무</th>
</tr>
<tr>
<td>민준</td>
<td>28</td>
</tr>
</table>
위 예시에서는 첫 번째 줄은 칸이 3개인데, 두 번째 줄은 칸이 2개입니다.
브라우저가 어느 정도 알아서 보여줄 수는 있지만, 표 구조가 어색해질 수 있습니다.
가능하면 각 줄의 칸 개수를 맞춰 작성하는 것이 좋습니다.
<table>
<tr>
<th>이름</th>
<th>나이</th>
<th>직무</th>
</tr>
<tr>
<td>민준</td>
<td>28</td>
<td>프론트엔드</td>
</tr>
</table>
정리
HTML에서 표를 만들 때는 table 태그를 사용합니다.
tr은 표의 한 줄을 만듭니다.
th는 제목 칸을 만들 때 사용합니다.
td는 일반 데이터 칸을 만들 때 사용합니다.
표를 만들 때는 table 안에 tr, tr 안에 th 또는 td가 들어가는 구조를 기억하면 됩니다.
그리고 table은 화면 배치용이 아니라 표 데이터를 보여줄 때 사용하는 태그라는 점을 주의해야 합니다.