HTML

2-9. HTML의 기본 태그_테이블(table) 태그

박은서's avatar
박은서
Jan 05, 2026
2-9. HTML의 기본 태그_테이블(table) 태그
Contents
1. 테이블(table) 태그1️⃣ table 태그란?2️⃣ table 관련 핵심 태그 설명3️⃣ 열/행 합치기 (중요!)4️⃣ caption 태그 (표 제목)5️⃣ 실습

1. 테이블(table) 태그

1️⃣ table 태그란?

1) 개념

행과 열로 이루어진 데이터를 표 형태로 표현할 때 사용
게시판 목록, 성적표, 가격표 같은 “정형 데이터”에 딱 맞는 태그

2) 기본 구조

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>20</td>
  </tr>
</table>

3) 구조 한 눈에 보기

태그
역할
table
표 전체
tr
행 (row)
th
제목 셀 (header)
td
데이터 셀 (data)

2️⃣ table 관련 핵심 태그 설명

1) <table>

  • 표의 전체 컨테이너
  • 모든 테이블 요소는 이 안에 들어감

2) <tr> (Table Row)

  • 표의 한 줄(행)
<tr>
	<td>A</td>
	<td>B</td>
</tr>

3) <th> (Table Header)

  • 제목 셀
  • 기본적으로 굵게 + 가운데 정렬
  • 의미론적으로도 중요 (접근성)
<th>이름</th>

4) <td> (Table Data)

  • 실제 데이터가 들어가는 셀
<td>김철수</td>

3️⃣ 열/행 합치기 (중요!)

1) colspan (열 합치기)

<td colspan="2">합계</td>

2) rowspan (행 합치기)

<td rowspan="2">서울</td>

4️⃣ caption 태그 (표 제목)

<table>
	<caption>학생 성적표</caption>
  ...
</table>
➡️ 표의 의미를 설명 (접근성 👍)

5️⃣ 실습

1) 기본

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>테이블</h1>
    <hr />
    <table border="1">
      <tr>
        <th>id</th>
        <th>pname</th>
      </tr>
      <tr>
        <td>1</td>
        <td>바나나</td>
      </tr>
      <tr>
        <td>2</td>
        <td>딸기</td>
      </tr>
    </table>
  </body>
</html>
notion image

2) 열 합치기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>테이블</h1>
    <hr />
    <table border="1">
      <tr>
        <th>id</th>
        <th>pname</th>
        <th>pname</th>
        <th>pname</th>
      </tr>
      <tr>
        <td>1</td>
        <td>딸기(v)</td>
        <td colspan="2">바나나</td>
      </tr>
      <tr>
        <td>2</td>
        <td>딸기(v)</td>
        <td>딸기</td>
        <td>딸기</td>
      </tr>
    </table>
  </body>
</html>
notion image

3) 행 합치기

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>테이블</h1>
    <hr />
    <table border="1">
      <tr>
        <th>id</th>
        <th>pname</th>
        <th>pname</th>
        <th>pname</th>
      </tr>
      <tr>
        <td>1</td>
        <td rowspan="2">딸기(v)</td>
        <td colspan="2">바나나</td>
      </tr>
      <tr>
        <td>2</td>
        <td>딸기</td>
        <td>딸기</td>
      </tr>
    </table>
  </body>
</html>
notion image
Share article