HTML 표 셀 병합: colspan과 rowspan 사용법

colspan: 여러 열에 걸친 셀 하나

colspan="n"은 셀을 n개 열만큼 넓게 만들어요. 그러면 그 셀이 있는 행은 셀이 n - 1개 적어져요. 여기서는 합계가 앞의 두 열에 걸쳐 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>colspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <tr><th>Item</th><th>Qty</th><th>Price</th></tr>
    <tr><td>Pens</td><td>2</td><td>4.00</td></tr>
    <tr><td>Paper</td><td>1</td><td>6.50</td></tr>
    <tr><td class="span" colspan="2">Total</td><td>10.50</td></tr>
  </table>
</body>
</html>

마지막 행에는 셀이 두 개 있지만 첫 번째 셀이 두 개로 계산돼서, 그 행도 다른 행처럼 세 열이 돼요.

rowspan: 여러 행에 걸친 셀 하나

rowspan="n"은 셀을 n개 행만큼 높게 만들어요. 아래 행들은 그 열을 빼요. 높은 셀이 이미 채우고 있으니까요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>rowspan</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
  </style>
</head>
<body>
  <table>
    <tr><th>Team</th><th>Member</th></tr>
    <tr><td class="span" rowspan="3">Design</td><td>Ana</td></tr>
    <tr><td>Bob</td></tr>
    <tr><td>Cy</td></tr>
    <tr><td>Web</td><td>Dee</td></tr>
  </table>
</body>
</html>

Bob과 Cy의 행에는 <td>가 하나뿐이에요. Team 열은 이미 "Design"이 차지했어요. HTML에는 그걸 표시하는 게 없으니, rowspan이 있는 표는 위에서 아래로 읽으면서 어느 열이 아직 덮여 있는지 세어 가세요.

colspan과 rowspan 함께 쓰기: 시간표

셀 하나가 양쪽으로 걸칠 수 있어요. 대표적인 예가 시간표로, 두 교시 동안 이어지는 수업도 있고 이틀에 걸친 수업도 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Timetable</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; text-align: center; }
    th, td { border: 1px solid #6b7280; padding: 8px 14px; }
    thead th { background: #e5e7eb; }
    .html { background: #fde68a; }
    .css { background: #bfdbfe; }
    .lab { background: #bbf7d0; }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr><th scope="col">Time</th><th scope="col">Mon</th><th scope="col">Tue</th><th scope="col">Wed</th></tr>
    </thead>
    <tbody>
      <tr><th scope="row">9:00</th><td class="html" rowspan="2">HTML</td><td class="css">CSS</td><td>Free</td></tr>
      <tr><th scope="row">10:00</th><td class="lab" colspan="2" rowspan="2">Lab</td></tr>
      <tr><th scope="row">11:00</th><td>Free</td></tr>
    </tbody>
  </table>
</body>
</html>

10:00 행을 세어 보세요. 시간 제목, 그다음 Mon은 위 행의 HTML이 덮고 있고, Lab이 Tue와 Wed를 채워요. 11:00에는 Mon이 다시 비고 Lab은 여전히 Tue와 Wed를 덮고 있으니, 그 행에는 데이터 셀이 하나예요.

표가 반듯하도록 셀 개수 세기

모든 행은 각 셀의 colspan과 위쪽 rowspan 셀이 덮은 열을 합쳐서 같은 열 수가 되어야 해요. 어떤 행에 셀이 하나 많으면 브라우저가 그 셀을 위해 새 열을 추가해서 표 가장자리가 들쭉날쭉해져요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Wrong count</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; }
    .span { background: #dcfce7; }
    .extra { background: #fee2e2; }
  </style>
</head>
<body>
  <table>
    <caption>Wrong</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td><td class="extra">D</td></tr>
  </table>
  <table>
    <caption>Right</caption>
    <tr><td class="span" rowspan="2">A</td><td>B</td></tr>
    <tr><td>C</td></tr>
  </table>
</body>
</html>

잘못된 표에서는 두 번째 행이 A가 첫 번째 열을 덮는다는 걸 잊어서, D가 다른 어떤 행에도 없는 세 번째 열로 가요. 셀 하나를 지우면 해결돼요. colspan에서 같은 실수는 넓은 셀이 있는 행에 원래 셀을 모두 남겨 두는 거예요.

셀이 하나 모자라면 반대 문제가 생겨요. 행이 일찍 끝나서 끝에 구멍이 남아요.

colspan으로 묶음 제목 만들기

제목 하나가 더 구체적인 제목 행 위에서 자기가 가리키는 열들에 걸칠 수 있어요. 스크린 리더가 그 아래 모든 열에 적용하도록 scope="colgroup"으로 표시하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grouped headers</title>
  <style>
    table { border-collapse: collapse; font-family: system-ui, sans-serif; }
    th, td { border: 1px solid #6b7280; padding: 6px 12px; text-align: center; }
    thead th { background: #e5e7eb; }
  </style>
</head>
<body>
  <table>
    <colgroup><col></colgroup>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    <thead>
      <tr>
        <th rowspan="2" scope="col">City</th>
        <th colspan="2" scope="colgroup">January</th>
        <th colspan="2" scope="colgroup">July</th>
      </tr>
      <tr>
        <th scope="col">Low</th><th scope="col">High</th>
        <th scope="col">Low</th><th scope="col">High</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">Oslo</th><td>-7</td><td>-1</td><td>13</td><td>22</td></tr>
      <tr><th scope="row">Rome</th><td>3</td><td>12</td><td>19</td><td>31</td></tr>
    </tbody>
  </table>
</body>
</html>

"City"는 rowspan="2"로 두 제목 행에 걸치고, 각 월은 colspan="2"로 두 열에 걸쳐요. <colgroup> 요소는 scope="colgroup"이 가리키는 열 묶음을 정의해요. 그러면 스크린 리더가 Rome의 31 셀에서 "Rome, July, High, 31"이라고 말해 줄 수 있어요. 표의 나머지 구조는 HTML table을 보세요.

병합은 진짜 구조에만 쓰세요

병합은 표를 스크린 리더로 읽기 어렵게 하고, 정렬, 필터링, 스프레드시트로 복사하기도 어렵게 해요. 데이터가 정말로 묶여 있는 곳(합계, 하위 열 위의 제목, 두 시간짜리 수업)에만 쓰세요. 병합이 많이 필요한 표라면 더 단순한 표 두 개가 더 명확할 때가 많아요.

자주 하는 실수

• 덮인 셀을 그대로 둠. colspan="2" 셀은 셀 두 개를 대신해요. 원래 셀 중 하나를 지우세요.
• rowspan 아래 행들을 잊음. 그 행마다 셀이 하나씩 적어야 해요.
• <tr>에 colspan을 씀. <td>와 <th>에서만 동작해요.
• 시각적 레이아웃에 병합을 씀. 레이아웃용 표에서 페이지 전체를 가로지르는 배너 행 같은 경우예요. 레이아웃에는 CSS grid를 쓰세요.
• "전체 너비"라는 뜻으로 colspan="100%"를 씀. 브라우저는 앞쪽 숫자만 읽어서 이 셀은 100개 열에 걸치고 표에 빈 열을 추가해요. 값은 열 개수를 나타내는 정수예요.