HTML 테이블 셀 합치기: colspan과 rowspan 완벽 정리

HTML 테이블 colspan과 rowspan 정리

HTML에서 표(<table>)를 만들 때, 셀(<td> 또는 <th>)을 가로·세로 방향으로 합칠 수 있는 속성이 바로 colspan과 rowspan입니다.

1. colspan (열 합치기)

• 의미: 가로(열) 방향으로 셀을 합침
• 사용법: <td colspan="합칠 칸 수">내용</td>

예시

 

<table>
  <tr>
    <th>이름</th>
    <th colspan="2">연락처</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>010-1234-5678</td>
    <td>hong@example.com</td>
  </tr>
</table>

결과

이름                            연락처 (2칸 합침)

홍길동	010-1234-5678 / hong@example.com

2. rowspan (행 합치기)

• 의미: 세로(행) 방향으로 셀을 합침
• 사용법: <td rowspan="합칠 칸 수">내용</td>

예시

<table>
  <tr>
    <th rowspan="2">이름</th>
    <th>전화번호</th>
  </tr>
  <tr>
    <th>이메일</th>
  </tr>
  <tr>
    <td>김철수</td>
    <td>010-9876-5432</td>
    <td>kim@example.com</td>
  </tr>
</table>

결과

이름                           전화번호                                                           이메일

김철수

010-9876-5432

kim@example.com

3. colspan과 rowspan 함께 사용하기

<table>
  <tr>
    <th rowspan="2">번호</th>
    <th colspan="2">학생 정보</th>
  </tr>
  <tr>
    <th>이름</th>
    <th>학번</th>
  </tr>
  <tr>
    <td>1</td>
    <td>이영희</td>
    <td>20230101</td>
  </tr>
</table>

결과

번호                       이름                                                             학번

1

이영희

20230101

4. 정리

• colspan: 가로 열을 합칠 때 사용
• rowspan: 세로 행을 합칠 때 사용
• 두 속성을 조합해 복잡한 표 레이아웃도 구성 가능