[HTML 테이블(Table)] #02 <tr>, <td>, <th> 태그의 차이와 사용법

 

 

 

안녕하세요 토스트데브입니다!
HTML에서 테이블을 만들 때 가장 많이 등장하는 세 가지 태그가 바로 <tr>, <td>, <th>입니다.
처음 테이블을 접하신 분이라면 이 태그들이 헷갈릴 수 있는데요, 이번 글에서는 각각의 역할과 차이점, 그리고 실전 예제를 통해 깔끔하게 정리해드리겠습니다!

 

 

📋 1. <tr> 태그 - "테이블의 행(Row)"

• tr은 table row의 줄임말로, 테이블의 한 줄을 의미합니다.
• 그 안에 셀(cell)이 들어가며, <td>나 <th> 태그를 포함합니다.

<tr>
  <td>홍길동</td>
  <td>30</td>
  <td>개발자</td>
</tr>

✔ 하나의 <tr> 안에는 여러 개의 셀(<td> 또는 <th>)이 들어갑니다.

 

 

📦 2. <td> 태그 - "일반 데이터 셀"

• td는 table data의 줄임말로, 일반적인 데이터가 들어가는 셀입니다.
• 기본적으로 왼쪽 정렬과 일반 글꼴로 표시됩니다.

<td>HTML</td>
<td>95점</td>

 

 

🎯 3. <th> 태그 - "제목 셀 (헤더 셀)"

• th는 table header의 줄임말로, 열 제목 또는 행 제목을 표시하는 셀입니다.
• 브라우저에서 기본적으로 굵은 글씨와 가운데 정렬로 표시됩니다.

<th>과목</th>
<th>점수</th>

• 스크린 리더나 접근성 도구에서 제목으로 인식되기 때문에 웹 접근성에 유리합니다.

 

 

🧩 차이점 한눈에 보기

태그	역할	정렬 방식	의미
<tr>	테이블의 행 (줄)	N/A	셀을 묶는 단위
<td>	일반 데이터 셀	기본: 왼쪽 정렬	내용
<th>	제목 셀	기본: 가운데 정렬 & 굵게	제목/헤더

 

 

🧪 실전 예제

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>직업</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
    <td>개발자</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>28</td>
    <td>디자이너</td>
  </tr>
</table>

 

 

💡 팁: <th>는 꼭 첫 줄에만 써야 할까?

아닙니다! <th>는 행(Row)의 제목으로도 사용될 수 있기 때문에 첫 열(column)에도 사용 가능합니다.

<tr>
  <th>이름</th>
  <td>홍길동</td>
</tr>
<tr>
  <th>나이</th>
  <td>30</td>
</tr>

📌 이처럼 <th>는 데이터의 구조를 명확하게 설명해주는 용도로 활용됩니다.

 

 

✅ 마무리 요약

태그	역할 요약
<tr>	테이블의 한 행(줄)을 구성하는 태그
<td>	일반 데이터 셀 (텍스트, 숫자 등 내용)
<th>	제목 셀 (헤더 역할, 굵은 글씨 + 가운데 정렬)

웹에서 구조적인 정보를 깔끔하게 전달하려면 테이블 구조 이해는 필수입니다!
특히 <th>를 적극적으로 활용하면 접근성과 SEO까지 챙길 수 있으니 꼭 구분해서 사용해보세요!

 

 

#HTML #테이블태그 #tr태그 #td태그 #th태그 #HTML기초 #웹퍼블리싱 #프론트엔드입문 #웹개발 #toastdev #코딩기초 #웹접근성 #테이블구조 #프론트엔드기초 #코딩입문