HTML 강좌 / 표 만들기

HTML 표는 행과 열로 대응되는 데이터를 보여 줄 때 사용합니다. table 안에 tr로 행을 만들고, 각 행의 데이터 셀은 td, 제목 셀은 th로 작성합니다. 표를 페이지 배치용 틀로 사용하는 것은 피하세요.

표의 기본 구조

다음은 과일별 재고를 나타내는 작은 표입니다. 첫 번째 행의 th는 열 이름이며, 그다음 행부터 td에 실제 값을 넣습니다.

<table>
  <tr>
    <th>과일</th>
    <th>재고</th>
  </tr>
  <tr>
    <td>사과</td>
    <td>12개</td>
  </tr>
  <tr>
    <td>배</td>
    <td>8개</td>
  </tr>
</table>

코드를 HTML 파일의 body에 넣으면 값이 행과 열에 맞춰 나타납니다. 브라우저 기본 스타일에는 테두리가 거의 보이지 않을 수 있습니다. 테두리나 배경색은 표의 데이터를 정확히 작성한 다음 CSS로 추가하세요.

먼저 종이에 두 열(과일·재고)과 세 행(제목·사과·배)을 그려 보면 태그를 배치하기 쉽습니다. tr 하나가 가로 한 줄이고, 그 안의 셀이 왼쪽에서 오른쪽 순서로 놓입니다. 새 과일을 추가할 때는 tbody에 해당하는 데이터 행을 하나 더 만든다고 생각하면 됩니다.

thead와 tbody로 행의 역할 나누기

행이 많거나 머리글과 본문을 구분하고 싶다면 thead와 tbody로 그룹을 만듭니다. 합계처럼 끝에 따로 표시할 행은 tfoot에 둘 수 있습니다. 이 요소들은 데이터를 조직하지만, 사용 자체가 테두리나 색을 만들어 주지는 않습니다.

작은 표에서는 thead와 tbody를 명시하지 않아도 표를 만들 수 있습니다. 다만 HTML 파서는 코드에 tbody가 없어도 문서 구조에 이를 삽입할 수 있으므로, 개발자 도구에서 보이는 구조가 작성한 코드와 달라 보여도 당황하지 마세요.

<table>
  <thead>
    <tr><th>과일</th><th>재고</th></tr>
  </thead>
  <tbody>
    <tr><td>사과</td><td>12개</td></tr>
    <tr><td>배</td><td>8개</td></tr>
  </tbody>
</table>

제목 셀과 데이터 셀 구별하기

행이나 열을 식별하는 값이면 th, 그 값에 대응하는 실제 데이터이면 td입니다. 겉모양만 굵게 보이게 하려고 th를 남용하지 마세요. 열 제목과 행 제목이 모두 필요한 표에서는 th가 양쪽에 등장할 수 있습니다. caption·scope와 셀 병합을 적용하는 방법은 읽기 쉬운 표 만들기: caption, th, scope, 셀 병합에서 실제 표로 비교합니다.

재고의 단위도 표에서 빠지지 않아야 합니다. 예제처럼 값마다 ‘개’를 붙이거나, 표 제목 또는 열 제목에 단위를 분명히 적을 수 있습니다. ‘12’만 남기면 독자가 수량인지 가격인지 판단하기 어렵습니다. 표는 보기 좋게 정렬하는 것보다 행과 열의 의미를 정확히 전달하는 것이 우선입니다.

표에 제목을 붙이는 caption, 제목 셀의 적용 방향을 밝히는 scope, 셀을 합치는 colspan과 rowspan은 구조를 먼저 이해한 뒤 필요한 표에만 추가하면 됩니다. 공식 정의는 MDN table 참고 문서에서 확인할 수 있습니다.

가로 스크롤이 필요한 표는 실제 HTML 파일에서 다음 구조로 감쌀 수 있습니다. CSS의 overflow-x가 너비를 넘는 표를 스크롤하게 하며, 데이터를 줄이거나 표의 의미를 바꾸지는 않습니다.

<div class="table-scroll">
  <table>
    <!-- 앞의 표 행을 여기에 둡니다. -->
  </table>
</div>

.table-scroll { max-width: 100%; overflow-x: auto; }

표가 어긋나 보일 때

각 tr에 필요한 셀 수가 같은지 먼저 살펴보세요. 행마다 셀 수가 다르면 기대한 위치와 다르게 보일 수 있습니다. 폭이 좁은 화면에서 넓은 표가 잘리는 경우에는 내용을 억지로 줄이지 말고 가로 스크롤 영역을 마련하는 편이 읽기 쉽습니다.

표의 테두리가 없다는 이유로 셀 안에 공백을 반복해서 넣지 마세요. 공백은 화면 크기와 글꼴에 따라 정렬이 달라집니다. 데이터 구조는 HTML로, 선과 간격은 CSS로 처리하세요. 숫자 열의 오른쪽 정렬처럼 표시만 바꿀 때도 셀의 의미는 그대로 유지합니다.