JSTL table colspan merge - html-table

Question

By clicking the above link, I will generate a screen to request.
<div class="sub_contents_wrap">
<div class="btn_div" style="width:100%;">
<div class="left_div controll_btn p0">
<div>* 상세현황</div>
</div>
</div>
<div id="gridD" class="data_grid k-grid k-widget" data-role="grid" style="height: 500px;">
<div class="k-grid-header" style="padding-right: 17px;">
<div class="k-grid-header-wrap" data-role="resizable">
<table role="grid" style="width:100%;">
<thead role="rowgroup">
<tr align="center" style="font-size: 15px;">
<th scope="col" bgcolor="CDCDCD" rowspan="2">NO</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">부서</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">이름</th>
<th scope="col" bgcolor="CDCDCD" rowspan="2">직급</th>
<th scope="col" bgcolor="CDCDCD"rowspan="2">시간단가</th>
<th scope="col" bgcolor="CDCDCD" colspan="6">연차수당</th>
<th scope="col" bgcolor="CDCDCD" colspan="5">보상수당</th>
<th scope="col" bgcolor="CDCDCD" colspan="5">유급수당</th>
</tr>
<tr role="row">
<th scope="col" bgcolor="E6E6E6">기본</th>
<th scope="col" bgcolor="E6E6E6">조정</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">사용조정</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">연차수당</th>
<th scope="col" bgcolor="E6E6E6">생성</th>
<th scope="col" bgcolor="E6E6E6">이월</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">보상수당</th>
<th scope="col" bgcolor="E6E6E6">생성</th>
<th scope="col" bgcolor="E6E6E6">이월</th>
<th scope="col" bgcolor="E6E6E6">사용</th>
<th scope="col" bgcolor="E6E6E6">잔여</th>
<th scope="col" bgcolor="E6E6E6">유급수당</th>
</tr>
</thead>
<tbody>
<c:set var="pass_cnt" value="0"/>
<c:set var="spanCnt" value="0"/>
<c:forEach var='item' items="${list}" varStatus ="status">
<td>${status.index+1}</td>
<td>${item.dept_name}</td>
<td>${item.emp_name}</td>
<td>${item.position_name}</td>
<td></td>
<td>${item.annv_basic_day}</td>
<td>${item.annv_abjust_day}</td>
<td>${item.annv_used_day}</td>
<td>${item.annv_used_abjust_day}</td>
<td>${item.annv_remain}</td>
<td></td>
<td>${item.exp_vacate_day}</td>
<td></td>
<td>${item.exp_vacate_used_day}</td>
<td>${item.exp_vacate_remain}</td>
<td></td>
<td>${item.paid_vacate_day}</td>
<td>${item.paid_vacation_carried}</td>
<td>${item.paid_vacate_used_day}</td>
<td>${item.paid_vacate_remain}</td>
<td></td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
==============================================================================
Using jstl TAG I want to progress colspan Merge as shown on the screen above.
Please help me.
The above code is to read the data of Grid and read it into Excel file when clicking Button on the Grid screen. Therefore, it can not be created with JavaScript. Help me.