HTML 표(table) 만들기 – 행과 열, 셀 병합까지 쉽게 정리

HTML 표(table) 만들기 – 행과 열, 셀 병합까지 쉽게 정리

지난 글에서는 HTML의 기본 구조와 제목, 문단, 링크, 이미지, 목록 같은 기초 태그를 알아보았습니다. 이번에는 웹페이지에서 정보를 깔끔하게 정리할 때 자주 쓰이는 표(table)를 만드는 방법을 다뤄보겠습니다. 시간표, 가격표, 성적표, 제품 비교표처럼 여러 항목을 한눈에 보여줘야 할 때 표만큼 유용한 도구는 없습니다. 처음에는 태그가 여러 개라 복잡해 보일 수 있지만, 구조를 한 번 이해하면 생각보다 훨씬 간단하니 차근차근 따라와 보세요.

1. 표를 구성하는 기본 태그

HTML 표는 엑셀처럼 행(가로줄)과 열(세로줄)로 이루어집니다. 표를 만들 때 꼭 알아야 할 태그는 다음 네 가지입니다.

• <table> : 표 전체를 감싸는 태그입니다.
• <tr> : Table Row의 약자로, 표의 한 행(가로줄)을 만듭니다.
• <th> : Table Header의 약자로, 제목 칸을 만듭니다. 기본적으로 글자가 굵고 가운데 정렬됩니다.
• <td> : Table Data의 약자로, 일반 내용이 들어가는 칸을 만듭니다.

핵심은 “표 안에 행을 만들고, 행 안에 칸을 만든다”는 순서입니다. HTML 표에는 열을 직접 만드는 태그가 따로 없고, 각 행에 들어가는 칸의 개수가 곧 열의 개수가 됩니다. 이 원리만 기억하면 표 구조가 쉽게 이해됩니다.

2. 가장 간단한 표 만들어 보기

먼저 3행 3열짜리 간단한 표를 만들어 보겠습니다. 첫 번째 행은 제목 칸(th), 나머지 행은 내용 칸(td)으로 구성했습니다.

<table border="1">
  <tr>
    <th>이름</th>
    <th>나이</th>
    <th>지역</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>25</td>
    <td>서울</td>
  </tr>
  <tr>
    <td>이영희</td>
    <td>30</td>
    <td>부산</td>
  </tr>
</table>

위 코드를 실행하면 아래와 같은 표가 나타납니다.

여기서 border="1"은 표에 테두리를 표시하는 속성입니다. 이 속성이 없으면 테두리 없이 글자만 나열되어 표처럼 보이지 않기 때문에, 연습할 때는 넣어 두는 것이 좋습니다. 다만 실제 웹사이트에서는 테두리를 CSS로 지정하는 것이 일반적이며, 이 방법은 글 후반부에서 소개하겠습니다.

3. 표의 구역 나누기: thead, tbody, tfoot

표가 커지면 제목 부분, 본문 부분, 합계 부분을 구분해 두는 것이 좋습니다. 이때 사용하는 태그가 <thead>, <tbody>, <tfoot>입니다. 화면 모양이 크게 달라지지는 않지만, 코드가 읽기 쉬워지고 검색 엔진과 화면 낭독기가 표의 구조를 정확히 이해할 수 있게 됩니다. 또한 <caption> 태그를 쓰면 표 위에 제목을 붙일 수 있습니다.

<table border="1">
  <caption>10월 카페 메뉴 가격표</caption>
  <thead>
    <tr>
      <th>메뉴</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>아메리카노</td>
      <td>3,000원</td>
    </tr>
    <tr>
      <td>카페라테</td>
      <td>3,500원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>합계</td>
      <td>6,500원</td>
    </tr>
  </tfoot>
</table>

4. 셀 병합하기 ① 가로로 합치기 – colspan

표를 만들다 보면 여러 칸을 하나로 합쳐야 할 때가 있습니다. 엑셀의 “셀 병합”과 같은 기능으로, 가로 방향으로 칸을 합칠 때는 colspan 속성을 사용합니다. colspan="2"는 “이 칸이 2개 열을 차지한다”는 뜻입니다.

<table border="1">
  <tr>
    <th colspan="2">연락처</th>
  </tr>
  <tr>
    <td>전화</td>
    <td>010-1234-5678</td>
  </tr>
  <tr>
    <td>이메일</td>
    <td>hello@example.com</td>
  </tr>
</table>

주의할 점은 첫 번째 행에 칸을 하나만 작성했다는 것입니다. colspan으로 2칸을 차지했기 때문에 나머지 칸을 또 쓰면 표가 한 칸 튀어나와 모양이 깨집니다.

5. 셀 병합하기 ② 세로로 합치기 – rowspan

세로 방향으로 칸을 합칠 때는 rowspan 속성을 사용합니다. rowspan="2"는 “이 칸이 아래로 2개 행을 차지한다”는 뜻입니다. 시간표에서 2시간 연속 수업을 표시할 때 자주 쓰입니다.

<table border="1">
  <tr>
    <th>교시</th>
    <th>월요일</th>
    <th>화요일</th>
  </tr>
  <tr>
    <td>1교시</td>
    <td rowspan="2">수학</td>
    <td>국어</td>
  </tr>
  <tr>
    <td>2교시</td>
    <td>영어</td>
  </tr>
</table>

여기서도 핵심은 세 번째 행입니다. 월요일 칸은 이미 위에서 rowspan으로 내려와 차지하고 있으므로, 세 번째 행에는 2교시와 화요일 칸만 작성합니다. 셀 병합이 헷갈릴 때는 종이에 표를 먼저 그려 보고, 각 행에 실제로 새로 작성해야 하는 칸이 몇 개인지 세어보면 실수를 크게 줄일 수 있습니다.

6. CSS로 표 깔끔하게 꾸미기

border="1" 속성만 쓰면 칸마다 테두리가 이중으로 보여 다소 투박합니다. 실제 웹사이트에서는 아래처럼 CSS로 표를 꾸미는 것이 일반적입니다. CSS는 다음 시리즈에서 자세히 다룰 예정이니, 지금은 복사해서 결과만 확인해 보셔도 충분합니다.

<style>
  table {
    border-collapse: collapse;  /* 이중 테두리를 한 줄로 */
    width: 100%;
  }
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f4f4f4;
  }
  tr:nth-child(even) td {
    background-color: #fafafa;  /* 짝수 행 배경색 */
  }
</style>

가장 중요한 속성은 border-collapse: collapse입니다. 이 한 줄만 추가해도 이중으로 보이던 테두리가 한 줄로 합쳐져 훨씬 깔끔한 표가 됩니다. 여기에 칸 안쪽 여백(padding)과 제목 칸 배경색을 넣으면 실무에서 쓰는 표와 거의 비슷한 모양이 완성됩니다.

7. 표를 만들 때 자주 하는 실수

• 칸 개수가 행마다 다름 : 각 행의 칸 수(병합된 칸 포함)가 같지 않으면 표가 들쭉날쭉해집니다. colspan과 rowspan으로 차지한 칸까지 계산해서 맞춰 주세요.
• tr 없이 td를 바로 작성 : td는 반드시 tr 안에 있어야 합니다. table 바로 아래에 td를 쓰면 브라우저마다 다르게 표시될 수 있습니다.
• 레이아웃용으로 표 사용 : 예전에는 페이지 배치를 표로 만들기도 했지만, 지금은 권장하지 않습니다. 표는 데이터를 정리할 때만 사용하고, 화면 배치는 CSS로 하는 것이 올바른 방법입니다.
• 모바일에서 표가 화면 밖으로 넘침 : 열이 많은 표는 스마트폰에서 잘릴 수 있습니다. 표를 <div style="overflow-x:auto;">로 감싸면 좌우로 스크롤해서 볼 수 있습니다.

8. 실습 과제: 나만의 일주일 계획표 만들기

배운 내용을 복습하기 위해 직접 표를 만들어 보세요. 월요일부터 금요일까지 열을 만들고, 오전·오후·저녁을 행으로 구성한 뒤 계획을 채워 넣는 것입니다. 이때 연속되는 일정은 rowspan으로, 여러 요일에 걸친 일정은 colspan으로 병합해 보면 오늘 배운 모든 내용을 자연스럽게 연습할 수 있습니다. caption으로 “나의 일주일 계획표”라는 제목도 붙여 보세요.

마무리하며

오늘은 HTML 표의 기본 구조인 table, tr, th, td부터 thead·tbody·tfoot로 구역을 나누는 방법, 그리고 colspan과 rowspan을 이용한 셀 병합까지 알아보았습니다. 표는 “행을 만들고 그 안에 칸을 만든다”는 원리만 기억하면 어떤 형태든 만들 수 있습니다. 특히 셀 병합은 처음에 누구나 헷갈려하는 부분이니, 실습 과제를 통해 직접 여러 번 만들어 보는 것을 추천합니다. 다음 글에서는 사용자에게 정보를 입력받는 HTML 폼(form)과 input 태그를 활용해 로그인 화면을 만들어 보겠습니다. 궁금한 점은 언제든 댓글로 남겨 주세요!