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

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

■ 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 을 사용해서는 안된다. 최대한 테이블 단위로 내용물을 분리하고 꼭 필요한 경우에만 사용하도록 !!! (만들 때 , 수정할 때 시간이 걸리지 않도록...)

출처 : 나물먹고 물마시고

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

메모 :