Table 태그를 쓰다보면 만나는 레이아웃이 하나 있는데
이렇게 뭔가 엑셀에서 사용되는 병합셀이다.
도대체 이걸 어떻게 만들지 "html table 셀 병합"이라고 검색을 해보면 colspan 이나 rowspan을 사용하라고 하는데
뭔소린지 잘 모르겠다면 아래를 참고해주길 바란다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
.tbl {
width: 100%;
}
.tbl th {
font-size: 12px;
background-color: #CCC;
border: 1px solid #666;
text-align: center;
vertical-align: middle;
padding: 5px;
}
</style>
</head>
<body>
<table class="tbl">
<thead>
<tr>
<th rowspan="2"><input type="checkbox"></th>
<th rowspan="2">발급번호</th>
<th rowspan="2">쿠폰명</th>
<th colspan="2">유효기간</th>
<th rowspan="2">쿠폰종류</th>
<th rowspan="2">쿠폰타입</th>
<th rowspan="2">중복발급</th>
<th rowspan="2">발급개수</th>
<th rowspan="2">상태</th>
<th rowspan="2">등록일</th>
</tr>
<tr>
<th>시작일</th>
<th>종료일</th>
</tr>
</thead>
</table>
</body>
</html>
일단 완성된 코드를 보자.
우리의 참고 디자인은 thead 부분의 레이아웃이라 thead에서 샘플을 제작했다.
th코드에 rowspan="2" 또는 colspan="2"라고 쓴 것을 확인할 수 있다.
이 속성이 어떤 역할을 하느냐 이해하기 전에 row와 column의 차이를 이해해야하는데
row는 우리 말로 "줄"을 의미한다.
column은 "칸"을 의미한다.
이렇게 rowspan="2"를 적용시키면
2개의 tr을 이용해서 두줄로 만든 테이블이지만 rowspan="2" 덕택에 위아래 "줄"이 사라지고
병합되어있는걸 확인할 수 있다.
그렇다면 숫자는 무슨 의미냐 하면
"자신을 포함한" 병합할 셀의 갯수를 의미한다.
그리고 colspan="2"을 적용시키면
이렇게 두개의 "칸"을 병합시킨다.
colspan의 col은 column의 앞 세글자를 따온 것이다.
그래서 colspan="2"에서 2의 의미는
"자신을 포함한" 병합될 셀의 갯수를 의미한다.
그리고 다음 tr엔 이렇게 유효기간 아래 들어갈 시작일과 종료일을 입력한다.
그러면 이렇게 시작일과 종료일이 쏙 들어가게된다.
아주 간단 샘플을 예로 colspan과 rowspan을 설명했는데 정리하자면 아래와 같다.