html dom dynamic table in Internet Explorer

Hi i'm currently practicing HTML DOM and i've written this function to create a dynamic table.

function initScheduleTable() {
    var days = new Array("MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN");
    var table = document.getElementB开发者_如何学运维yId("schedule");
    var hourPerDay = 24;
    var row, cell;
    var i, j;

    // Time headers
    row = table.insertRow(-1);
    cell = row.insertCell(-1);

    for(i = 0; i < hourPerDay; ++i) {
        cell = row.insertCell(-1);
        if(i < 10)
            cell.innerHTML = "0" + i;
        else
            cell.innerHTML = i;
    }

    for(i = 0; i < days.length; ++i) {
        row = table.insertRow(-1);
        cell = document.createElement("th");
        cell.innerHTML = days[i];
        row.appendChild(cell);

        for(j = 0; j < hourPerDay; ++j) {
            cell = row.insertCell(-1);
            cell.innerHTML = "&nbsp;";
        }
    }
}

This works fine for Chrome and Firefox but not IE9. With IE the days are displayed on the rightmost column. I checked the source using IE developer's tool and it shows that <th> is listed at the end of a list of <td>.

Is there anything to be paid attention for IE in this case?

For some absurd reason, IE thinks that TH cells must be at the end of a row. Change the TH on each row to a TD and use CSS make its text bold so it looks like a TH.