[문돌이의IT] colspan, rowspan CSS속성으로 표의 셀병합 기능 표현하기

 문서의 셀병합 기능을 CSS속성을 활용해서 표현하자. 지난 포스팅에서 만든 표를 활용해서 진행을 하면 좋을 것 같다.  

 

이전글보기

[문돌이의IT] 자주 사용하는 CSS속성으로 HTML 표꾸미기

 셀병합 효과를 주는 방법은 가로와 세로 두 가지이다. 그림을 기준으로 가로를 병합하려면 colspan을 세로를 병합하려면 rowspan을 사용하면 된다.

 

 3개로 나뉜 주인집을 합치려면 가로 병합인 colspan을 사용하자. 합쳐야 할 호수가 3개이니 colspan 값은 3이다. <td colspan="3"> 기존에 <td>로 표현한 다른 2개의 주인집은 삭제하자.

 

<table border="1px solid black">

             <tr>

                           <td>201호</td>

                           <td>202호</td>

                           <td>203호</td>

             </tr>

 

             <tr>

                           <td colspan="3">주인집</td>

             </tr>

</table>

 

 

만약 201호에 사는 세입자가 주인집 한 층을 터서 복층으로 사용하고 싶다면 어떻게 할까?

기본 상태에서 201호에 rowspan을 적용하고 <td>주인집1</td>을 삭제하면 된다.

 

<table border="1px solid black">

             <tr>

                           <td rowspan="2">201호</td>

                           <td>202호</td>

                           <td>203호</td>

             </tr>

 

             <tr>

                           <td>주인집2</td>

                           <td>주인집3</td>

             </tr>

</table>

 

 

마지막 종합 예제이다. 201호 세입자는 복층을 사용하고 1층의 나머지 집을 집주인이 하나로 합쳐보자.

 

<table border="1px solid black">

             <tr>

                           <td rowspan="2">201호</td>

                           <td>202호</td>

                           <td>203호</td>

             </tr>

 

             <tr>

                           <td colspan="2">주인집2</td>

             </tr>

</table>

 201호 세입자에는 rowspan값을 2로 주고 주인집 역시 나머지 두 칸을 합치기 위해 colspan 값을 2로 주면 간단하다.