HTML 테이블과 데이터 표현의 본질

웹 페이지에서 정보를 정확하고 체계적으로 보여주기 위해 표는 필수적인 역할을 합니다. HTML의 table 태그를 활용하면 복잡한 데이터마저도 깔끔하게 시각화할 수 있습니다. 단순한 셀 나열에서부터 다중 행·열 병합에 이르기까지, 표는 웹에서 거의 모든 데이터 표현의 기본 도구입니다.

표를 구성하는 핵심 태그들

HTML에서 표의 중심은 <table>입니다. 이 태그 내부에는 행을 의미하는 <tr>, 데이터 셀인 <td>, 그리고 머리글 셀을 나타내는 <th>를 배치할 수 있습니다. 기본 구조는 다음과 같습니다.

<table>
  <tr>
    <th>이름</th>
    <th>이메일</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>hong@example.com</td>
  </tr>
</table>

<th> 셀은 굵은 글씨와 중간 정렬이 자동 적용되어, 표의 헤더에 사용하면 정보를 빠르게 파악할 수 있습니다.

행과 열 병합: colspan과 rowspan

단순한 표를 넘어 다양한 구조가 필요할 땐, 셀 병합 기능이 필요합니다. colspan 속성은 한 셀이 여러 열에, rowspan은 여러 행에 걸쳐 있을 때 쓰입니다. 예를 들어, 아래처럼 한 학생이 두 과목의 점수를 한 번에 표시하고 싶다면 다음과 같이 쓸 수 있습니다.

<tr>
  <td rowspan="2">김영희</td>
  <td>수학</td>
  <td>95</td>
</tr>
<tr>
  <td>과학</td>
  <td>98</td>
</tr>

이렇게 하면 "김영희" 셀은 두 줄에 걸쳐 나타납니다.

표의 확장: 캡션, 그룹, 스타일 지정

간결한 설명이 필요하다면 <caption>을 <table> 바로 아래에 작성해 표 전체의 제목을 붙일 수 있습니다. 또한 <thead>, <tbody>, <tfoot>으로 구역을 나누면, 대량의 데이터를 가진 표도 구조가 깔끔해집니다. 각 구역별로 스타일을 지정하거나 스크립트를 적용하는 데도 용이합니다.

CSS를 더한다면, 표의 테두리, 셀 간격, 배경색 등도 다양하게 변화할 수 있습니다. border, cellspacing, cellpadding 속성 대신 CSS의 border-collapse, padding, background 속성을 권장합니다.

데이터의 의미를 살리는 표 작성

테이블은 단순히 줄과 칸의 집합이 아닙니다. 데이터의 상관관계와 계층을 명확하게 전달하는 역할을 합니다. 예를 들어, 상품 목록, 시간표, 통계 자료 등에서 각각의 의미를 제대로 전달하려면 표 구조를 논리적으로 설계해야 합니다. 접근성을 고려하여, 반드시 헤더 정보를 <th>로, 내용은 <td>에 기재하고, 필요하다면 scope 속성을 추가해 화면 읽기 도구의 도움까지 받을 수 있습니다.

표, 데이터, 그리고 웹의 미래

HTML 표는 여전히 데이터 시각화의 중심 기술입니다. 복잡한 정보도 잘 정리된 표 안에서 한눈에 파악할 수 있습니다. 오늘 소개한 태그와 속성만 익혀도, 어떤 웹페이지든 전문적인 데이터 표현이 가능합니다. 이제 여러분도 HTML로 데이터를 자유롭게 표현할 준비가 되어 있습니다.