본문 바로가기
정보/# 태그 소스 자료실***

[스크랩] 테이블에서 칸합치기 (rowspan, colspan)

by Danpung ! 2010. 5. 6.

이력서 양식 같은 데서 많이 봤겠지만 몇개 셀을 합쳐서
하나의 셀로 사용하고자 하는 경우 가로 또는 세로로 합치는 걸 알아야 한다.


■ rowspan : 가로로 합치기


서울 홍삿갓
서울 김길동
<table width="100" border="1">
<tr>
<td width="41">서울</td>
<td width="43">홍삿갓</td>
</tr>
<tr>
<td>서울</td>
<td>김길동</td>
</tr>
</table>


* 위 테이블에서 서울이 중복되는 경우이므로 한 칸으로 합쳐서 표현할 수 있다!!

■ 결과


서울 홍삿갓
김길동
<table width="100" border="1">
<tr>
<td rowspan="2">서울</td>
<td width="43">홍삿갓</td>
</tr>
<tr>
<!-- 여기 칸이 위로 가서 합쳐졌음-->
<td>김길동</td>
</tr>
</table>
rowspan은 다른 row(줄)에 있는 칸을 합치는 걸 말한다.
먼저 나오는 td에 합쳤음을 표현하고 몇개를 합친건지를 숫자로 적어준다.



■ colspan : 세로로 합치기


임원단 인원단
홍삿갓 김길동
<table width="100" border="1">
<tr>
<td width="41">임원단</td>
<td width="43">인원단</td>
</tr>
<tr>
<td>홍삿갓</td>
<td>김길동</td>
</tr>
</table>


* 위 테이블에서 인원단이 중복되는 경우이므로 한 칸으로 합쳐서 표현할 수 있다!!

■ 결과


임원단
홍삿갓 김길동
<table width="100" border="1">
<tr>
<td colspan=2>임원단</td>
<!-- 여기 칸이 위로 가서 합쳐졌음-->
</tr>
<tr>
<td>홍삿갓</td>
<td>김길동</td>
</tr>
</table>
colspan은 같은 column(열)에 있는 칸을 합치는 걸 말한다.
먼저 나오는 td에 합쳤음을 표현하고 몇개를 합친건지를 숫자로 적어준다.


* 한개 문서 전체의 내용을 테이블 하나로 표현하고자(자랑이 아님!) 무리한 rowspan, colspan 을 사용해서는 안된다. 최대한 테이블 단위로 내용물을 분리하고 꼭 필요한 경우에만 사용하도록 !!! (만들 때 , 수정할 때 시간이 걸리지 않도록...)

출처 : 나물먹고 물마시고
글쓴이 : 나물먹고 물마시고 카페운영자 원글보기
메모 :