실행 가능한 HTML 문서: HTML table

Q: HTML에서 표는 어떻게 만드나요?

로 감싸고, 행마다 을 하나씩 쓰고, 그 안에 셀을 넣으세요. 제목 셀은 , 데이터 셀은 예요. 여러 열에 걸친 셀이 없다면 모든 행의 셀 개수가 같아야 해요.

Q: th와 td는 무엇이 다른가요?

는 열이나 행에 이름을 붙이는 제목 셀이고, 는 데이터 셀이에요. 브라우저는 를 굵게 가운데 정렬해서 보여 주고, 스크린 리더는 각 데이터 셀 앞에 해당 제목을 읽어서 숫자가 무슨 뜻인지 알 수 있게 해요.

Q: HTML 표에 왜 테두리가 없나요?

표에는 기본적으로 테두리가 없어요. CSS로 추가하세요. table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }처럼요. 예전의 border="1" 속성은 더 이상 쓰지 않아요.

Q: HTML 표를 반응형으로 만들려면 어떻게 하나요?

표를 overflow-x: auto가 적용된 컨테이너에 넣으세요. 좁은 화면에서 페이지 전체가 넓어지는 대신 컨테이너 안에서 표가 가로로 스크롤돼요.

HTML에서 표 만드는 법

표는 행(<tr>)으로 이루어진 <table> 요소이고, 각 행은 셀로 이루어져요. 제목 셀은 <th>, 데이터 셀은 <td>예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Table</title>
  <style>
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Language</th>
      <th>Year</th>
    </tr>
    <tr>
      <td>Ada</td>
      <td>Python</td>
      <td>2023</td>
    </tr>
    <tr>
      <td>Linus</td>
      <td>C</td>
      <td>2021</td>
    </tr>
  </table>
</body>
</html>

표에는 자체 테두리가 없어서, 셀이 보이도록 CSS 규칙 하나로 테두리를 추가했어요. 열은 셀에서 만들어져요. 모든 행의 첫 번째 셀이 첫 번째 열, 두 번째 셀이 두 번째 열이 되는 식이에요. 각 행의 셀 개수는 같아야 해요. <td>를 하나 지우면 그 행이 일찍 끝나서 빈자리가 생겨요.

<th> 셀은 기본적으로 굵게 가운데 정렬돼요. 그건 모양일 뿐이고, 중요한 건 이 셀이 이름표라는 점이에요. 다음 섹션에서 다뤄요.

표 요소

요소	역할
`<table>`	표
`<caption>`	표의 제목, `<table>`의 첫 번째 자식
`<thead>`	머리 행 묶음
`<tbody>`	본문 행 묶음(표 하나에 여러 개 가능)
`<tfoot>`	합계 같은 바닥 행 묶음
`<tr>`	행
`<th>`	제목 셀
`<td>`	데이터 셀
`<colgroup>`, `<col>`	열 전체를 꾸밀 때 쓰는 열(너비, 배경)

테두리는 HTML 표 테두리에서, 여러 열이나 행에 걸친 셀은 colspan과 rowspan에서 다뤄요.

제목 셀, scope, caption

위쪽과 옆쪽 모두에 제목이 있는 표는 각 제목이 어느 방향을 가리키는지 알려야 해요. scope="col"은 아래쪽 열에, scope="row"는 옆의 행에 이름을 붙여요. <caption>은 표에 눈에 보이는 제목을 줘요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headers and caption</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    caption { font-weight: bold; padding-bottom: 6px; }
    th, td { border: 1px solid #9ca3af; padding: 6px 10px; }
    thead th { background: #e5e7eb; }
    tbody th { text-align: start; }
  </style>
</head>
<body>
  <table>
    <caption>Opening hours</caption>
    <thead>
      <tr>
        <th scope="col">Day</th>
        <th scope="col">Opens</th>
        <th scope="col">Closes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Monday</th>
        <td>9:00</td>
        <td>17:00</td>
      </tr>
      <tr>
        <th scope="row">Saturday</th>
        <td>10:00</td>
        <td>14:00</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

이렇게 마크업하면 스크린 리더가 14:00 셀로 이동할 때 "Saturday, Closes, 14:00"이라고 알려 줄 수 있어서 숫자만 따로 읽히는 일이 없어요. 제목 행이 하나뿐인 간단한 표라면 scope 없이도 브라우저가 대개 제목을 알아내지만, 써 두면 손해가 없고 추측할 필요도 없어져요.

caption은 스크린 리더가 표에 도착했을 때 알려 주는 내용이기도 해요. 표와 연결되지 않는, 표 위에 둔 제목보다 caption을 쓰세요.

thead, tbody, tfoot

세 묶음은 행을 머리, 본문, 바닥으로 나눠요. 합계는 바닥에 넣어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>thead tbody tfoot</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; }
    thead th { border-bottom: 2px solid #111827; text-align: start; }
    tfoot td, tfoot th { border-top: 2px solid #111827; font-weight: bold; }
    .num { text-align: end; font-variant-numeric: tabular-nums; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Item</th><th scope="col" class="num">Price</th></tr>
    </thead>
    <tbody>
      <tr><td>Notebook</td><td class="num">4.50</td></tr>
      <tr><td>Pens (10)</td><td class="num">11.20</td></tr>
      <tr><td>Backpack</td><td class="num">39.00</td></tr>
    </tbody>
    <tfoot>
      <tr><th scope="row">Total</th><td class="num">54.70</td></tr>
    </tfoot>
  </table>
</body>
</html>

숫자를 읽기 쉽게 만드는 세부 사항이 두 가지 있어요. text-align: end는 소수점을 맞추고(모든 가격이 소수점 둘째 자리까지 있어요), font-variant-numeric: tabular-nums는 모든 숫자의 너비를 같게 해요.

첫 번째 예제처럼 <table> 안에 <tr>을 바로 쓰면, 브라우저가 어쨌든 행들을 <tbody>로 감싸요. 그래서 table > tr 같은 CSS 선택자는 아무것도 선택하지 못해요. 페이지에서 행은 tbody 안에 있거든요. table tr을 쓰거나 <tbody>를 직접 쓰세요.

표 꾸미기: 줄무늬, 호버, 너비

:nth-child는 행에 번갈아 줄무늬를 넣고, :hover는 마우스 포인터 아래 행을 강조하며, width: 100%는 표를 컨테이너 너비만큼 늘려요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped table</title>
  <style>
    table { width: 100%; border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { padding: 8px 12px; text-align: start; }
    thead th { background: #2563eb; color: #fff; }
    tbody tr:nth-child(even) { background: #f3f4f6; }
    tbody tr:hover { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Course</th><th scope="col">Lessons</th><th scope="col">Level</th></tr>
    </thead>
    <tbody>
      <tr><td>HTML</td><td>40</td><td>Beginner</td></tr>
      <tr><td>CSS</td><td>55</td><td>Beginner</td></tr>
      <tr><td>JavaScript</td><td>120</td><td>Beginner</td></tr>
      <tr><td>React</td><td>60</td><td>Intermediate</td></tr>
    </tbody>
  </table>
</body>
</html>

text-align: start는 제목 텍스트를 아래 데이터와 맞춰요. 그러지 않으면 th는 가운데 정렬돼요. left 대신 start를 쓰면 오른쪽에서 왼쪽으로 쓰는 언어에서도 정렬이 올바르게 유지돼요.

스크롤되는 반응형 표

표는 내용의 너비보다 작게 줄어들 수 없어요. 휴대폰에서 넓은 표는 페이지 전체를 옆으로 밀어내요. 대신 스크롤되는 컨테이너로 감싸세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Scrolling table</title>
  <style>
    .scroll { max-width: 300px; overflow-x: auto; border: 1px solid #e5e7eb; }
    table { border-collapse: collapse; white-space: nowrap; }
    th, td { padding: 6px 12px; border-bottom: 1px solid #e5e7eb; text-align: start; }
  </style>
</head>
<body>
  <div class="scroll" tabindex="0" role="region" aria-label="Plans">
    <table>
      <thead>
        <tr><th scope="col">Plan</th><th scope="col">Price</th><th scope="col">Courses</th><th scope="col">Certificates</th><th scope="col">Support</th></tr>
      </thead>
      <tbody>
        <tr><td>Free</td><td>0</td><td>Some</td><td>No</td><td>Community</td></tr>
        <tr><td>Pro</td><td>12 per month</td><td>All</td><td>Yes</td><td>Email</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

여기서는 휴대폰 화면처럼 보이도록 컨테이너 너비를 300픽셀로 제한했어요. 옆으로 스크롤해 보세요. tabindex="0"은 키보드 사용자가 컨테이너에 포커스하고 화살표 키로 스크롤할 수 있게 해 주고, aria-label과 함께 쓴 role="region"은 그 위치에 이름을 붙여 줘요.

표는 데이터를 위한 것이에요

내용에 정말로 행과 열이 있을 때 표를 쓰세요. 가격, 일정, 비교, 결과 같은 것들이에요. 페이지에서 요소를 나란히 배치하려고 쓰지는 마세요. 레이아웃용 표는 아무 의미 없는 행과 열을 알려 주기 때문에 스크린 리더 사용자를 헷갈리게 하고, 작은 화면에 맞춰 바뀌지도 못해요. 레이아웃은 CSS flexbox와 grid가 맡아요.

자주 하는 실수

행마다 셀 개수가 다름. 짧은 행은 일찍 끝나고 열이 맞지 않게 돼요.
제목에 굵은 글씨의 <td>를 씀. 제목이 진짜 이름표가 되도록 <th>를 쓰세요.
더 이상 쓰지 않는 속성 border, cellpadding, cellspacing, bgcolor, align. 대신 CSS를 쓰세요.
셀 밖에서 <tr>이나 <table>에 내용을 바로 넣음. 브라우저가 그 내용을 표 밖으로, 보통 표 위로 옮겨요.
<caption> 대신 표 위에 제목을 둠.
CSS에서 table > tr을 씀. 브라우저가 <tbody>를 넣었어요. table tr이나 tbody tr로 쓰세요.

자주 묻는 질문

HTML에서 표는 어떻게 만드나요?

<table>로 감싸고, 행마다 <tr>을 하나씩 쓰고, 그 안에 셀을 넣으세요. 제목 셀은 <th>, 데이터 셀은 <td>예요. 여러 열에 걸친 셀이 없다면 모든 행의 셀 개수가 같아야 해요.

th와 td는 무엇이 다른가요?

<th>는 열이나 행에 이름을 붙이는 제목 셀이고, <td>는 데이터 셀이에요. 브라우저는 <th>를 굵게 가운데 정렬해서 보여 주고, 스크린 리더는 각 데이터 셀 앞에 해당 제목을 읽어서 숫자가 무슨 뜻인지 알 수 있게 해요.

thead, tbody, tfoot은 무슨 일을 하나요?

행을 표의 머리, 본문, 바닥(합계)으로 묶어요. 보조 기술에 구조를 분명히 알려 주고, CSS가 대상으로 삼을 수 있게 하며, 긴 표를 인쇄할 때 브라우저가 모든 페이지에 <thead>를 반복해서 넣을 수 있어요.

HTML 표에 왜 테두리가 없나요?

표에는 기본적으로 테두리가 없어요. CSS로 추가하세요. table { border-collapse: collapse; } th, td { border: 1px solid #ccc; }처럼요. 예전의 border="1" 속성은 더 이상 쓰지 않아요.

HTML 표를 반응형으로 만들려면 어떻게 하나요?

표를 overflow-x: auto가 적용된 컨테이너에 넣으세요. 좁은 화면에서 페이지 전체가 넓어지는 대신 컨테이너 안에서 표가 가로로 스크롤돼요.

HTML table 만들기: 행, 열, 제목 셀과 caption