[HTML] rowspan 테이블 가로로 나누기 / 테이블 셀 나누기 / 테이블 칸 나누기 예제

 

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 클릭과

게시글의 광고를 클릭 해 주세요:)

 

테이블 초간단 예제

 

보통의 테이블은 아래와 같이 만드는게 일반적입니다.

 

 

See the Pen tableExample by Ella (@Ella_develop_floor) on CodePen.

 

 

 

 

---

 

하지만 제가 구현하고자 하는 테이블은 아래 그림과 같습니다.

 

 

 

 

이럴 때 코드

 

 

See the Pen table by Ella (@Ella_develop_floor) on CodePen.

 

 

 

 

이렇게 하면 원하는대로 구현 할 수 있다.

 

 

rowspan = "2" 를 이용하여 나머지 칸들을 합치는것이다.

html을 가지고 한 칸을 절반으로 나누는 코드는 구현이 불가능하므로 역으로 이를 이용해, 2개의 칸을 합쳐 1개의 칸으로 만들면 되는것이다.

 

rowspan 속성은 세로로 위 아래 칸을 합칠 때 사용하는것이다.

 

반대로, colspan을 사용하면 가로로 셀끼리 병합 가능하다.

 

 

<div> 
<table class="table align-middle" border="1">
        <thead class="table-dark text-center align-middle">
        <tr>
            <th scope="col" rowspan="2">선택</th>
            <th scope="col" rowspan="2">이름</th>
            <th scope="col" rowspan="2">주소</th>
            <th scope="col" rowspan="2">성별</th>
            <th scope="col" rowspan="2">나이</th>
            <th scope="col" >최종 등록 일자</th>
            <th scope="col" >상태</th>
        </tr>
        <tr>
            <th scope="col">최종 수정 일자</th>
            <th scope="col">승인 일자</th>
        </tr>
        </thead>
  
        <tbody>
        <tr>
            <td class="text-center" rowspan="2"><input type="radio"></td>
            <td class="text-center" rowspan="2">홍길동</td>
            <td class="text-center" rowspan="2">지구상</td>
            <td class="text-center" rowspan="2">남</td>
            <td class="text-center" rowspan="2">15</td>
            <td class="text-center" >01.01.01</td>
            <td class="text-center" >승인</td>
        </tr>
        <tr>
            <td class="text-center">01.01.02</th>
            <td class="text-center">00.01.03</th>
        </tr>
        </tbody>
    </table>
</div>

 

 

 

---

 

 

게시글이 도움이 되었다면

[로그인]이 필요 없는 ❤ 눌러주세요:)