HTML 기초 - rowspan과 colspan

교재 출처 - Do It! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석

저자 : 고경희

이지스 퍼블리싱

 

 

처음 HTML로 테이블을 만들 때 rowspan과 colspan이 많이 헷갈렸다. 

표는 <tr>태그와 <th>태그, <td>태그를 이용해서 여러 셀로 구성되어 있다. 이때 여러 셀을 합치거나 나누어서 다양한 형태로 바꿀 수 있다. 행이나 열을 합치는 것은 실제로는 셀을 합치는 것이므로 <td>태그나 <th>태그에서 이루어진다.

행을 합치려면, 쉽게 이야기하자면 위아래로 붙어있는 셀을 합치기 위해서는 rowspan 속성을 사용하고 반대여 열을 합치려면 colspan 속성을 사용한다. 

 

<td rowspan="합칠 셀의 개수">셀의 내용</td>
<td colspan="합칠 셀의 개수">셀의 내용</td>

rowspan과 colspan 속성은 위와 같은 형태로 사용한다. 

 

출처 - https://forum.nwoods.com/t/creating-like-below-table-layout-is-possible-with-colspan-or-rowspan-property/7610

위의 그림을 통해 colspan과 rowspan을 쉽게 이해할 수 있다.