[HTML 태그들] #7 table 병합 방법(colspan, rowspan)

2021. 5. 11. 22:24HTML/HTML 태그들

지난 번에는 기본적인 표를 그리는 방법에 대해 알아보았습니다.

이번에는 표(table)에서 2개 이상의 칸을 병합할 수 있는 colspan과 rowspan에 대해 알아보겠습니다.

 

1. rowspan

"row"는 열,줄 "span"은 폭, 넓이를 의미합니다.

rowspan은 뜻 그대로 2개 이상의 세로줄에 있는 칸을 병합하는 것입니다.

한마디로 아래방향으로 표를 병합하는 것입니다.

 

<table border="1">
	<th>1</th>
	<th>2</th>
	<tr>
	    <td rowspan="2">첫번째 칸</td> <!--현재칸과 아래있는 칸 병합-->
	    <td>두번째 칸</td>
	</tr>
	<tr>
	    <td>세번째 칸</td>
	</tr>
</table>

table rowspan

2. colspan

colspan은 뜻 그대로 2개 이상의 가로줄에 있는 칸을 병합하는 것입니다.

한마디로 오른쪽 방향으로 표를 병합하는 것입니다.

 

<table border="1">
	<th>1</th>
	<th>2</th>
	<tr>
	    <td colspan="2">첫번째 칸</td> <!--현재칸과 오른쪽에 있는 칸 병합-->
	</tr>
	<tr>
	    <td>두번째 칸</td>
	    <td>세번째 칸</td>
	</tr>
</table>

table colspan