실행 가능한 HTML 문서: 셀 병합

Q: HTML에서 colspan은 무슨 일을 하나요?

colspan은 나 를 여러 열에 걸쳐 늘려요. 은 그 행에서 셀 세 개의 자리를 차지해요. 그러면 그 행은 다른 행보다 셀이 두 개 적어야 해요.

Q: HTML에서 rowspan은 무슨 일을 하나요?

rowspan은 셀을 여러 행에 걸쳐 아래로 늘려요. 는 자기 행과 그 아래 행을 채워요. 위의 셀이 이미 그 열을 차지하고 있으니, 다음 행에서는 그 열을 빼야 해요.

Q: 한 셀에 colspan과 rowspan을 함께 쓸 수 있나요?

네. 는 2열 × 2행 블록을 차지해요. 그 셀이 지나가는 모든 행은 자기 셀이 두 개씩 적어야 해요.

Q: 표에서 셀 하나가 왜 튀어나와 있나요?

병합을 계산했을 때 어떤 행의 셀이 다른 행보다 많은 거예요. 보통 rowspan 아래 행이 이미 덮인 열의 셀을 그대로 갖고 있거나, colspan이 있는 행이 원래 셀을 모두 남겨 둔 경우예요. 남는 를 지우세요.

Q: colspan의 최댓값은 얼마인가요?

브라우저는 colspan을 1000, rowspan을 65534로 제한해요. colspan에서 0이나 숫자로 시작하지 않는 값은 1로 취급돼요.

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개 열에 걸치고 표에 빈 열을 추가해요. 값은 열 개수를 나타내는 정수예요.

자주 묻는 질문

HTML에서 colspan은 무슨 일을 하나요?

colspan은 <td>나 <th>를 여러 열에 걸쳐 늘려요. <td colspan="3">은 그 행에서 셀 세 개의 자리를 차지해요. 그러면 그 행은 다른 행보다 셀이 두 개 적어야 해요.

HTML에서 rowspan은 무슨 일을 하나요?

rowspan은 셀을 여러 행에 걸쳐 아래로 늘려요. <td rowspan="2">는 자기 행과 그 아래 행을 채워요. 위의 셀이 이미 그 열을 차지하고 있으니, 다음 행에서는 그 열을 빼야 해요.

한 셀에 colspan과 rowspan을 함께 쓸 수 있나요?

네. <td colspan="2" rowspan="2">는 2열 × 2행 블록을 차지해요. 그 셀이 지나가는 모든 행은 자기 셀이 두 개씩 적어야 해요.

표에서 셀 하나가 왜 튀어나와 있나요?

병합을 계산했을 때 어떤 행의 셀이 다른 행보다 많은 거예요. 보통 rowspan 아래 행이 이미 덮인 열의 셀을 그대로 갖고 있거나, colspan이 있는 행이 원래 셀을 모두 남겨 둔 경우예요. 남는 <td>를 지우세요.

colspan의 최댓값은 얼마인가요?

브라우저는 colspan을 1000, rowspan을 65534로 제한해요. colspan에서 0이나 숫자로 시작하지 않는 값은 1로 취급돼요.

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