[참고] HTML 셀 병합 방법 완벽 정리 (rowspan, colspan)

데이지 자료 제작할 때, 병합 표가 많으면 약간 집중해야 할 필요가 있습니다.

이 글에서는 HTML 테이블에서 셀을 병합하는 방법과 실제 사용 예시에 대해 정리했습니다.

참고로 데이지 제작에서 xml 셀 병합과 이 글의 html 셀 병합의 원리는 같습니다.

목차

1. 셀 병합의 기본 개념
2. colspan 속성 - 열 병합하기
3. rowspan 속성 - 행 병합하기
4. 복합 병합 사용하기
5. 셀 병합 시 주의사항
6. 실전 예제
7. 마치며

셀 병합의 기본 개념

HTML 테이블에서 셀 병합은 두 가지 방식으로 이루어집니다:

• 가로 방향 병합(colspan): 열을 병합하여 가로로 넓은 셀 생성
• 세로 방향 병합(rowspan): 행을 병합하여 세로로 긴 셀 생성

이 두 속성은 <td> 또는 <th> 태그에 추가하여 사용합니다.

colspan 속성 - 열 병합하기

colspan 속성은 셀이 가로로 몇 개의 열을 차지할지 지정합니다.

기본 문법

<td colspan="숫자">내용</td>

여기서 "숫자"는 병합할 열의 수를 의미합니다.

예시 코드

<table border="1">
  <tr>
    <td colspan="3">3개 열을 병합한 셀</td>
  </tr>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
    <td>셀 3</td>
  </tr>
</table>

 

위 코드는 첫 번째 행에서 3개의 열을 하나로 병합한 테이블을 생성합니다.

 

 

rowspan 속성 - 행 병합하기

rowspan 속성은 셀이 세로로 몇 개의 행을 차지할지 지정합니다.

기본 문법

<td rowspan="숫자">내용</td>

여기서 "숫자"는 병합할 행의 수를 의미합니다.

예시 코드

<table border="1">
  <tr>
    <td rowspan="3">3개 행을 병합한 셀</td>
    <td>행 1의 셀</td>
  </tr>
  <tr>
    <td>행 2의 셀</td>
  </tr>
  <tr>
    <td>행 3의 셀</td>
  </tr>
</table>

 

위 코드는 첫 번째 열에서 3개의 행을 하나로 병합한 테이블을 생성합니다.

 

 

복합 병합 사용하기

실제 테이블에서는 colspan과 rowspan을 함께 사용하여 복잡한 레이아웃을 구성할 수 있습니다.

예시 코드

<table border="1">
  <tr>
    <td colspan="2" rowspan="2">2x2 병합 셀</td>
    <td>셀 A</td>
  </tr>
  <tr>
    <td>셀 B</td>
  </tr>
  <tr>
    <td>셀 C</td>
    <td>셀 D</td>
    <td>셀 E</td>
  </tr>
</table>

 

이 예시는 좌상단 코너의 셀이 가로 2개, 세로 2개의 셀을 차지하도록 병합한 테이블입니다.

 

 

셀 병합 시 주의사항

1. 테이블 구조 유지: 병합 후에도 각 행의 전체 열 수는 동일해야 합니다.
2. 중복 셀 제거: 병합된 영역에 해당하는 셀은 HTML에서 제거해야 합니다.
3. 논리적 순서: 셀은 좌에서 우로, 위에서 아래로 읽히는 순서로 코딩해야 합니다.
4. 접근성 고려: 복잡한 병합은 스크린 리더 사용자에게 혼란을 줄 수 있으므로 <caption>과 <th>를 적절히 사용해야 합니다.

실전 예제

시간표 만들기

<table border="1">
  <caption>주간 시간표</caption>
  <tr>
    <th></th>
    <th>월요일</th>
    <th>화요일</th>
    <th>수요일</th>
    <th>목요일</th>
    <th>금요일</th>
  </tr>
  <tr>
    <th>1교시</th>
    <td rowspan="2">국어</td>
    <td>수학</td>
    <td>영어</td>
    <td>과학</td>
    <td>역사</td>
  </tr>
  <tr>
    <th>2교시</th>
    <td>영어</td>
    <td rowspan="2">체육</td>
    <td>국어</td>
    <td>수학</td>
  </tr>
  <tr>
    <th>3교시</th>
    <td colspan="2">미술(2시간)</td>
    <td>음악</td>
    <td>과학</td>
  </tr>
</table>

 

위 코드는 학교 시간표를 표현한 테이블로, 다양한 병합 기법을 활용했습니다.

 

 

영수증 레이아웃

<table border="1" style="width: 300px;">
  <tr>
    <th colspan="3">영수증</th>
  </tr>
  <tr>
    <td colspan="2">상품명</td>
    <td>가격</td>
  </tr>
  <tr>
    <td colspan="2">커피</td>
    <td>4,500원</td>
  </tr>
  <tr>
    <td colspan="2">샌드위치</td>
    <td>6,500원</td>
  </tr>
  <tr>
    <td colspan="2" style="text-align: right;">합계:</td>
    <td>11,000원</td>
  </tr>
</table>

 

 

이 예제는 간단한 영수증 형태의 테이블을 보여줍니다.

 

 

마치며

HTML 테이블의 셀 병합은 복잡한 데이터를 효과적으로 표현할 수 있는 강력한 도구입니다. colspan과 rowspan 속성을 적절히 활용하면 보기 좋고 정보 전달력이 뛰어난 테이블을 만들 수 있습니다. 다만, 너무 복잡한 병합은 코드 유지보수와 접근성 측면에서 문제가 될 수 있으므로 적절히 사용하는 것이 중요합니다.

테이블 셀 병합 기술을 마스터하면 웹 페이지에서 데이터를 더욱 효과적으로 표현할 수 있으며, 사용자 경험을 한층 향상시킬 수 있습니다.