colspan 속성

속성 colspan는 HTML 표의 열 병합을 제어합니다. th 태그와 td 태그에 적용됩니다.

허용되는 값: 1부터 시작하는 정수.

사용법: 아무 셀 td 또는 th에 이 속성을 추가합니다. 예를 들어, colspan 값을 2로 설정하면, 이 속성이 지정된 셀이 표의 두 열을 차지합니다. 이때 오른쪽에 인접한 셀들은 사라지지 않고, 우리가 확장한 셀이 그들을 밀어내어 표가 깨질 것입니다. 이를 방지하려면 오른쪽 셀 중 하나를 삭제해야 합니다. 더 나은 이해를 위해 예제를 살펴보세요.

예제 . 병합 없는 표

앞으로 작업할, 병합이 없는 표를 살펴봅시다:

<table>
	<tr>
		<td>cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

예제 . 셀을 두 열로 확장

셀 1의 colspan 속성을 2로 설정하여 두 열로 확장해 봅시다. 이렇게 하면 오른쪽 셀들을 밀어내고 표가 깨질 것입니다:

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
		<td>cell3</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

예제 . 표를 깨지 않으면서 셀 확장

이전 예제에서 표 깨짐 문제를 수정해 봅시다. 확장한 셀(셀 1) 오른쪽에 있는 셀 중 하나를 삭제합니다(셀 2 또는 셀 3 - 상관없습니다):

<table>
	<tr>
		<td colspan="2">cell1</td>
		<td>cell2</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

예제 . 셀을 세 열로 확장

셀 1의 colspan 속성을 3로 설정하여 세 열로 확장해 봅시다. 이렇게 하면 표가 깨지지 않도록 오른쪽에 있는 셀 하나를 더 삭제해야 합니다:

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td>cell4</td>
		<td>cell5</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell7</td>
		<td>cell8</td>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

예제 . colspan과 rowspan 동시 사용

속성 colspan와 rowspan를 사용하여 셀 4, 5, 7 및 8를 병합해 봅시다 (이전 병합은 표에서 제거합니다):

<table>
	<tr>
		<td colspan="3">cell1</td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">cell4</td>
		<td>cell6</td>
	</tr>
	<tr>
		<td>cell9</td>
	</tr>
</table>

table, td, th {
	border: 1px solid black;
}

같이 보기

표의 행을 병합하는 속성 rowspan