HTML rowspan 속성 – 표 셀을 여러 행으로 병합하는 방법

HTML의 rowspan 속성은 표(table)에서 하나의 셀이 세로 방향으로 몇 개의 행에 걸쳐 표시될지를 지정하는 속성입니다. 이 속성은 오직 <td>(데이터 셀) 또는 <th>(헤더 셀) 요소에만 적용할 수 있으며, 복잡한 표 구조를 만들 때 매우 유용하게 활용됩니다.

문법(Syntax)

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

<tagname rowspan="number"></tagname>

여기서 number 값은 해당 셀이 차지할 행의 개수를 나타내며, 반드시 양의 정수여야 합니다. 예를 들어 rowspan="2"로 설정하면 그 셀은 두 개의 행에 걸쳐 세로로 확장되어 표시됩니다.

예제(Example)

아래 예제는 rowspan 속성을 사용하여 'Elon' 셀을 두 개의 행에 걸쳐 표시하는 방법을 보여줍니다. 두 번째 행에는 이름 셀이 없이 언어 셀만 작성된 점에 주목하세요. 이미 위 행에서 공간을 차지했기 때문입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    table {
        margin: 2rem auto;
        width: 400px;
    }
</style>
<body>
<h1>HTML rowspan Attribute 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 rowspan="2">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</tbody>
</table>
</body>
</html>

실행 결과(Output)

위 코드를 브라우저에서 실행하면 'Elon'이라는 이름이 두 행(Germany, French)에 걸쳐 하나의 셀로 병합되어 표시되는 것을 확인할 수 있습니다.

HTML rowspan 속성 – 표 셀을 여러 행으로 병합하는 방법

참고 사항

rowspan 속성을 사용할 때는 병합된 행만큼 다음 행에서 해당 열의 셀을 생략해야 합니다. 그렇지 않으면 표의 열 개수가 어긋나 레이아웃이 깨질 수 있습니다. 또한 가로 방향으로 셀을 병합하고 싶다면 colspan 속성을 함께 활용하면 됩니다.