CSS table 셀 병합은 가로의 경우 colspan 속성을 td, th 등에 삽입하면 됩니다. 세로 셀 병합은 rowspan 속성을 td, th 태그에 삽입하면 됩니다.
CSS 셀 병합 가로 병합 colspan
가로 병합은 colspan 속성 삽입으로 해결합니다. 아래 예시에 나온 표에서 맨 윗 줄의 원소 기호라는 글자가 적힌 칸과 그 옆의 칸을 가로로 병합하려면 어떻게 해야 할까요?.
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td>원소 기호</td>
<td></td>
</tr>
<tr>
<td>수소</td>
<td>질소</td>
</tr>
<tr>
<td>H</td>
<td>N</td>
</tr>
</table>
</body>
</html>먼저 병합을 해서 글자를 통합할 <td> 태그 뒤에 colspan 속성을 입력합니다.
<td colspan>원소 기호</td>그리고 병합할 셀의 개수를 속성값에 입력합니다. 총 합해질 셀의 개수가 두 개이므로 2를 입력합니다.
<td colspan="2">원소 기호</td>주의점은 병합되서 없어지는 <td></td> 빈 태그는 삭제해야 된다는 점입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">원소 기호</td>
</tr>
<tr>
<td>수소</td>
<td>질소</td>
</tr>
<tr>
<td>H</td>
<td>N</td>
</tr>
</table>
</body>
</html>세로 병합(줄 병합 rowspan)
아래 예제의 표에서 맨 왼쪽 상단의 과일 문자가 적힌 칸과 그 바로 아래칸의 공백 칸을 세로로 병합하려고 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td>과일</td>
<td>빨강</td>
<td>사과</td>
</tr>
<tr>
<td></td>
<td>노랑</td>
<td>참외</td>
</tr>
</table>
</body>
</html>병합될 셀의 글자를 적을 셀 태그 뒤에 rowspan 속성을 입력합니다.
<td rowspan>과일</td>rowspan 속성명 뒤에 병합될 셀의 개수를 속성값으로 입력합니다. 여기서는 총 두 개의 셀이 합쳐지므로 숫자 2를 적습니다.
<td rowspan="2">과일</td>마지막으로 합쳐져서 없어질 빈 태그인 <td></td> 셀은 삭제를 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
table, tr, td{
border:1px solid black;
border-collapse:collapse;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">과일</td>
<td>빨강</td>
<td>사과</td>
</tr>
<tr>
<td>노랑</td>
<td>참외</td>
</tr>
</table>
</body>
</html>익숙해지면, 처음부터 빈 태그를 생략하고 작성할 수 있습니다.