HTML) 테이블 행, 열 colspan, rowspan으로 병합하기 + 예제

HTML) 테이블 행, 열 colspan, rowspan으로 병합하기 + 예제

 

 

 

오늘은 Javascript에서 테이블 내 td, th를 병합하는 방법을 정리해보겠습니다. 

 

 

---

 

 

1. 세로(행) 병합하기 (rowspan)

 

예를 들어, 지원자 데이터를 테이블로 그린다고 가정하여 아래 테이블을 만들어보았습니다.

 

<table>
    <thead>
      <tr>
        <th>지역</th>
        <th>이름</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>서울</td>
          <td>김OO</td>
        </tr>
        <tr>
          <td>서울</td>
          <td>박OO</td>
        </tr>
        <tr>
          <td>경기</td>
          <td>유OO</td>
        </tr>
        <tr>
          <td>부산</td>
          <td>장O</td>
        </tr>
        <tr>
          <td>부산</td>
          <td>김OO</td>
        </tr>
    </tbody>
  </table>

 

 

위의 코드에서 [지역] 란의 같은 값을 병합하여 아래와 같이 출력하고자 합니다.

 

 

 

이 경우 rowspan 을 사용하여 병합을 해줍니다.

 

 <table>
    <thead>
      <tr>
        <th>지역</th>
        <th>이름</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td rowspan="2">서울</td>
          <td>김OO</td>
        </tr>
        <tr>
          <!-- <td>서울</td> 삭제 -->
          <td>박OO</td>
        </tr>
        <tr>
          <td>경기</td>
          <td>유OO</td>
        </tr>
        <tr>
          <td rowspan="2">부산</td>
          <td>장O</td>
        </tr>
        <tr>
           <!-- <td>부산</td> 삭제 -->
          <td>김OO</td>
        </tr>
    </tbody>
  </table>

 

 

같은 값 반복이 시작되는 첫 행의 td에서,

몇 번 아래로 반복할 것인지의 횟수를 <td rowspan="2"> 이런식으로 작성하고, 

 

반복되는 아래 행들에서는 td를 삭제해주시면 됩니다. 

 

 

 

---

 

 

 

2. 가로(열) 병합하기 (colspan)

 

 

colspan의 사용법도 rowspan과 동일합니다.

 

 

위와 같은 표를 만들기 위해서 아래와 같이 코드를 작성하면 됩니다.

 

  <table>
    <thead>
      <tr>
        <th colspan="3">보고서 제출여부</th>
        <!-- th 삭제 -->
        <!-- th 삭제 -->
      </tr>
      <tr>
        <th>1차</th>
        <th>2차</th>
        <th>3차</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Y</td>
        <td>Y</td>
        <td>N</td>        
      </tr>
    </tbody>
  </table>

 

병합할 열의 갯수만큼 colspan="n"을 작성해주시면 됩니다.

 

 

---

 

3. 예제

 

 

colspan, rowspan을 모두 사용하는 예제를 한 개 작성해보겠습니다.

 

 

 

<table>
    <thead>
      <tr>
        <th rowspan="2">이름</th>
        <th colspan="3">출석여부</th>
        <th rowspan="2">점수</th>
      </tr>
      <tr>
        <th>1일차</th>
        <th>2일차</th>
        <th>3일차</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>김OO</td>
        <td>출석</td>
        <td>결석</td>
        <td>출석</td>   
        <td>70점</td>
      </tr>
      <tr>
        <td>박OO</td>
        <td colspan="2" style="background-color:lightblue;">병가</td>
        <td>출석</td>  
        <td>30점</td>
      </tr>
      <tr>
        <td>장OO</td>
        <td>출석</td>
        <td>출석</td>
        <td>출석</td>        
        <td>90점</td>
      </tr>
    </tbody>
  </table>

 

---

 

 

다음 번엔 테이블 내 데이터를 동적으로 가져올 때 병합하는 방법을 작성해보도록 하겠습니다!

 

 

도움이 되셨길 바래요 :)