[HTML] table 속성 colspan, rowspan 정리

요즘 table 태그를 게시판 목록 부분이나 관리자 페이지가 아니면 사용하지 않아서 까먹는 부분이 있다.

 

td태그끼리 가로, 세로로 합칠때 쓰이는 colspan과 rowspan에 대해서 정리 할 것이다.

 

1. 가로, 세로 합친 부분을 보이기 위해 HTML 코드를 임의로 작성한다.

<table>
	<colgroup>
	<col width="20%">
	<col width="30%">
	<col width="50%">
	</colgroup>
	<thead>
		<tr>
			<th scope="col">제목1</th>
			<th scope="col">제목2</th>
			<th scope="col">제목3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="2" class="col-color">가로 2칸 합침 == colspan="2"</td>
			<td>내용</td>
		</tr>
		<tr>
			<td rowspan="2" class="row-color">세로 2칸 합침 == rowspan="2"</td>
			<td>내용2</td>
			<td>내용2</td>
		</tr>
		<tr>
			<td>내용3</td>
			<td>내용3</td>
		</tr>
	</tbody>
</table>

 

2. CSS 코드를 작성한다.

table th, td {
	padding: 10px;
	border: 1px solid #ddd;
	text-align: center;
}
table thead th {
	background-color: bisque;
	font-size: 14px;
}
table tbody td {
	font-size: 13px;
}
.col-color {
	background-color: cadetblue;
	color: #fff;
}
.row-color {
	background-color: indianred;
	color: #fff;
}

 

3. 미리보기

가로 합침은 colspan, 세로 합침은 rowspan