HTML DOM TableData rowSpan 속성 – 테이블 셀 행 병합하기

개요

HTML DOM의 TableData rowSpan 속성은 HTML 문서 내 테이블 셀(<td> 요소)의 rowspan 속성 값을 반환하거나 수정할 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 특정 셀이 여러 행에 걸쳐 표시되도록 동적으로 변경할 수 있습니다.

rowspan은 세로 방향으로 셀을 병합하는 속성입니다. 예를 들어 rowspan 값을 "2"로 설정하면 해당 셀이 아래 행까지 확장되어 하나의 큰 셀처럼 보이게 됩니다.

문법(Syntax)

rowSpan 속성의 기본 문법은 다음과 같습니다.

1. rowSpan 값 가져오기

object.rowSpan

2. rowSpan 값 설정하기

object.rowSpan = "숫자";

설정하는 숫자는 해당 셀이 차지할 행의 개수를 의미합니다.

예제(Example)

다음은 rowSpan 속성을 실제로 사용하는 예제입니다. 버튼을 클릭하면 "Elon" 셀이 두 개의 행에 걸쳐 병합됩니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
<body>
<h1>DOM TableData rowSpan Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td id="elon">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Span Elon</button>
<script>
    function get() {
        document.querySelector('#elon').rowSpan = "2";
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.

HTML DOM TableData rowSpan 속성 – 테이블 셀 행 병합하기

여기서 "Span Elon" 버튼을 클릭해 보세요. Elon 이름의 셀이 두 행에 걸쳐 확장되어 표시되는 것을 확인할 수 있습니다.

HTML DOM TableData rowSpan 속성 – 테이블 셀 행 병합하기

동작 원리 정리

예제의 핵심 로직은 다음 한 줄입니다.

document.querySelector('#elon').rowSpan = "2";

querySelector('#elon'): id가 'elon'인 <td> 요소를 선택합니다.
rowSpan = "2": 해당 셀이 현재 행과 다음 행, 총 2개의 행에 걸치도록 설정합니다.

셀이 두 행을 차지하게 되면 다음 행에서는 해당 열의 셀이 하나 줄어든 상태로 배치됩니다. 따라서 rowspan을 적용할 때는 각 행의 셀 개수가 맞도록 주의해서 구조를 설계해야 합니다.