Table colspan, rowspan

Table 태그를 쓰다보면 만나는 레이아웃이 하나 있는데
다운로드.png

이렇게 뭔가 엑셀에서 사용되는 병합셀이다.

도대체 이걸 어떻게 만들지 "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은 "칸"을 의미한다.

다운로드.jpg

이렇게 rowspan="2"를 적용시키면

다운로드 (1).png

2개의 tr을 이용해서 두줄로 만든 테이블이지만 rowspan="2" 덕택에 위아래 "줄"이 사라지고

병합되어있는걸 확인할 수 있다.

그렇다면 숫자는 무슨 의미냐 하면

"자신을 포함한" 병합할 셀의 갯수를 의미한다.

다운로드 (2).png

그리고 colspan="2"을 적용시키면

다운로드 (3).png

이렇게 두개의 "칸"을 병합시킨다.

colspan의 col은 column의 앞 세글자를 따온 것이다.

그래서 colspan="2"에서 2의 의미는

"자신을 포함한" 병합될 셀의 갯수를 의미한다.

다운로드 (4).png

그리고 다음 tr엔 이렇게 유효기간 아래 들어갈 시작일과 종료일을 입력한다.

다운로드 (5).png

그러면 이렇게 시작일과 종료일이 쏙 들어가게된다.

아주 간단 샘플을 예로 colspan과 rowspan을 설명했는데 정리하자면 아래와 같다.

rowspan은 "줄"을 병합한다.
colspan은 "칸"을 병합한다.
적용하는 수치값은 "자신을 포함한" 병합할 셀의 갯수를 의미한다.
병합하는 셀의 기준은 "자신"을 중심으로 오른쪽으로, 아래로 병합된다.
이렇게 병합하면 본래 해당 위치에 들어가야할 셀의 위치가 "밀려"서 다음 셀이 위치해야할 곳으로 이동해버린다.
colspan과 rowspan을 이용하면 전체 셀의 갯수를 셈할 때 햇깔리기 쉬운데 이것을 방지하는려면
전체 줄의 갯수와 칸의 갯수를 셈한 뒤 칸의 갯수는 colspan 속성이 없는 것은 셀의 갯수를, colspan속성이 있으면 속성값을 더해 비교하면 정신건강에 도움이 된다.
rowspan의 경우엔 tr의 갯수와 rowspan의 속성값을 비교하면 정신건강에 도움이 된다.(예를 들어 샘플의 전체 칸의 갯수는 11개고 줄의 갯수는 2개다)
처음 하면 꽤나 햇깔리기 좋기때문에 연습을 하면서 감을 익히는게 최선이다.(머리가 좋으면 금방 원리를 이해할 수 있다. 머리가 좋지않다면 연습만이 살길이다. 참고로 나는 능숙하게 쓰기까지 한 3개월쯤 걸린것 같다......)