HTML Academy · 강의

셀 병합을 위한 colspan과 rowspan

열과 행에 걸쳐 셀을 병합합니다.

셀 병합을 위한 colspan과 rowspan은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

셀 병합이란 무엇인가요

기본적으로 각 표 셀은 한 행과 한 열을 차지합니다. 셀 병합을 사용하면 셀이 여러 열이나 행에 걸쳐 확장될 수 있습니다:

colspan — 여러 열에 걸쳐 확장
rowspan — 여러 행에 걸쳐 확장

열 병합

colspan 속성을 사용하면 셀이 여러 열에 걸쳐 확장됩니다:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

행 병합

rowspan 속성을 사용하면 셀이 여러 행에 걸쳐 확장됩니다:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

열 병합과 행 병합 함께 사용하기

하나의 셀에 두 속성을 함께 사용할 수 있습니다:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

병합된 셀 고려하기

셀을 여러 열에 걸쳐 확장할 때는 해당 열을 병합된 행에서 생략합니다:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

일반적인 셀 병합 패턴

실제 표에서 사용하는 셀 병합 예시:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

병합된 행 머리글에 행 병합 사용

행 병합을 사용하여 여러 행을 묶는 레이블을 만듭니다:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

열 병합 값 0 — 전체 너비 셀

colspan을 0으로 지정하면 열 그룹에 남아 있는 모든 열에 걸쳐 확장됩니다(거의 사용하지 않음):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

셀 병합과 접근성

복잡하게 병합된 표에는 화면 낭독기를 위해 scope 및 headers 속성이 필요합니다:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

셀 병합 문제 디버깅

셀 병합에서 흔히 발생하는 실수:

병합 후 한 행에 셀이 너무 많거나 적음
행 병합이 행 수를 초과함
병합 영역이 겹침(두 셀이 같은 위치를 차지한다고 지정함)

문제가 있어 보이면 브라우저 DevTools로 표 구조를 검사합니다.

병합된 셀의 CSS

여러 열이나 행에 걸쳐 확장된 셀의 스타일을 지정합니다:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

인쇄와 셀 병합

병합된 셀은 최신 브라우저에서 올바르게 인쇄됩니다. 그러나 다음 사항에 유의합니다:

표 머리글 행이 여러 열에 걸쳐 있으면 인쇄되는 각 페이지에 올바르게 반복됩니다
tbody 안의 행 병합은 페이지가 나뉘어도 반복되지 않습니다
복잡한 표는 배포하기 전에 인쇄 미리 보기에서 확인합니다

빠른 확인

3개 열을 차지해야 하는 표 셀이 있습니다. 어떤 속성을 사용해야 하나요?

복습: 열 병합과 행 병합

셀 병합의 핵심:

colspan — 셀이 여러 열에 걸쳐 확장됨
rowspan — 셀이 여러 행에 걸쳐 확장됨
병합된 셀을 고려합니다. 병합 영역이 차지하는 셀은 생략합니다
병합된 머리글의 접근성을 위해 scope="colgroup"을 추가합니다
레이아웃 문제를 디버깅할 때 DevTools를 사용합니다

자주 묻는 질문

“셀 병합을 위한 colspan과 rowspan” 강의는 무료인가요?

네 — “셀 병합을 위한 colspan과 rowspan” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“셀 병합을 위한 colspan과 rowspan”에서 뭘 배우나요?

열과 행에 걸쳐 셀을 병합합니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“셀 병합을 위한 colspan과 rowspan” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기