如何在纯JavaScript中创建表格，如图像中的表格

Question

如上所示，我需要创建一个colspan为4的<th>，但是在该表头内部，我需要再创建四个<th>来标识该列。

在我的jsp中创建了全局<th>，但是数据是通过javascript代码呈现的，因此我的javascript代码创建了td元素，但是我需要创建另外四个子<th>。

如何在javascript中做到这一点？

我的Js

function createRowForACRList(row, j, rowData) {
    var k = 0;
    // First column for SrNo
    var tdSrNo = row.insertCell(k++);
    tdSrNo.setAttribute("align", "center");
    tdSrNo.innerHTML = j;

    // Second column for Employee Code  
    var tdTotalEmployees = row.insertCell(k++);
    tdTotalEmployees.innerHTML = rowData.totEmployees !== null ? rowData.totEmployees : ' ------ ';



    // fourth column for Net Salary
    var tdNetSalary = row.insertCell(k++);
    tdNetSalary.innerHTML = rowData.amount !== null ? '<b style="color:green"> Rs. ' + rowData.amount + '</b>' : ' ------ ';

    // Fifth column for Gross Earning
    var tdPickedByName = row.insertCell(k++);
    tdPickedByName.innerHTML = rowData.pickedByName !== null ?  rowData.pickedByName  : ' ------ ';

     // Fifth column for Gross Earning
    var tdPickedMonth = row.insertCell(k++);
    tdPickedMonth.innerHTML = rowData.yyyymm !== null ?  rowData.yyyymm  : ' ------ ';

    // Fifth column for Gross Earning
    var tdPickedByDate = row.insertCell(k++);
    tdPickedByDate.innerHTML = rowData.pickedDate !== null ?  rowData.pickedDate  : ' ------ ';

我的JSP页面的片段

 <div class="panel-body">
                    <%@include file="../common/pagging_panel_header.jsp" %>
                    <table class="table table-striped table-bordered dataTable no-footer tableWidth"  role="grid" name="employeeList" id="employeeList">
                        <thead>
                            <tr>
                                <th width="5%">S. No.</th>
                                <th width="10%">Total Employees</th>
                                <th width="10%">Net Salary</th>
<!--                                <th width="10%">Gross Earning</th>
                                <th width="10%">Gross Deduction</th>-->
                                <th colspan="4">Migration Detail</th>

<!--                                <th width="10%">Migration Status</th>
                                <th width="10%">Last Migration</th>-->
                            </tr>
                        </thead>
                        <tbody id="acrListData">
                        </tbody>
                    </table>
                    <%@include file="../common/pagging_panel_footer.jsp" %>
                </div>