JS创建表格时如何设置colspan属性？This is a question！

首先用HTML创建一个表格，

<table border="1" width="300">
        <caption>人员信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小大哥</td>
                <td>男</td>
                <td>24</td>
            </tr>
            <tr>
                <td>小大姐</td>
                <td>女</td>
                <td>20</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">合计：2人</td>
            </tr>
        </tfoot>
    </table>

效果如下，

下面用JavaScript创建一个相同的表格，而不是对已有表格进行操作。JavaScript创建表格过程很繁琐，一般也不会有人这样用，大多是重复性的代码，但我还是耐着性子写下去，可写到最后就发现了问题，

window.onload=function(){
    var table=document.createElement("table");
    table.border=1;
    table.width=300;

        var caption=document.createElement("caption");
        table.appendChild(caption);
        var captionText=document.createTextNode("人员信息表");
        caption.appendChild(captionText);

        var thead=document.createElement("thead");
        table.appendChild(thead);

            var tr=document.createElement("tr");
            thead.appendChild(tr);

                var th1=document.createElement("th");
                tr.appendChild(th1);
                var thText=document.createTextNode("姓名");
                th1.appendChild(thText);

                var th2=document.createElement("th");
                tr.appendChild(th2);
                var thText=document.createTextNode("性别");
                th2.appendChild(thText);

                var th3=document.createElement("th");
                tr.appendChild(th3);
                var thText=document.createTextNode("年龄");
                th3.appendChild(thText);

        var tbody=document.createElement("tbody");
        table.appendChild(tbody);

            var tr=document.createElement("tr");
            tbody.appendChild(tr);

                var td1=document.createElement("td");
                tr.appendChild(td1);
                var tdText=document.createTextNode("小大哥");
                td1.appendChild(tdText);

                var td2=document.createElement("td");
                tr.appendChild(td2);
                var tdText=document.createTextNode("男");
                td2.appendChild(tdText);

                var td3=document.createElement("td");
                tr.appendChild(td3);
                var tdText=document.createTextNode("24");
                td3.appendChild(tdText);

            var tr=document.createElement("tr");
            tbody.appendChild(tr);

                var td1=document.createElement("td");
                tr.appendChild(td1);
                var tdText=document.createTextNode("小大姐");
                td1.appendChild(tdText);

                var td2=document.createElement("td");
                tr.appendChild(td2);
                var tdText=document.createTextNode("女");
                td2.appendChild(tdText);

                var td3=document.createElement("td");
                tr.appendChild(td3);
                var tdText=document.createTextNode("20");
                td3.appendChild(tdText);

        var tfoot=document.createElement("tfoot");
        table.appendChild(tfoot);

            var tr=document.createElement("tr");
            tfoot.appendChild(tr);

                var td=document.createElement("td");
                tr.appendChild(td);




                var tdText=document.createTextNode("合计：2人");
                td.appendChild(tdText);

    document.body.appendChild(table);
}

在控制台中显示出和预期的结构一样，

效果图如下，

 但就是最后设置colspan属性时，发现不会在JS中设置，记录一下，找到解决方法再来修改。