How to find a table's column count using the DOM?

Question

For row count using DOM, we have tablename.rows.length to get number of rows, but we don't have 'cols.length' for column count.

How can we find the number of columns (only using the DOM)?

Answer 1

I think you can use cells to calculate the column, assuming that the number of column of first row will be same for all

tablename.rows[0].cells.length;

Answer 2

I would use the table's rows property and the first row's cells property and total the colSpan property of each cell in the row. This will work in all major browsers back to IE 4 and should be pretty fast.

Demo: http://jsfiddle.net/Gtdru/

Code:

function getTableColumnCount(table) {
    var columnCount = 0;
    var rows = table.rows;
    if (rows.length > 0) {
        var cells = rows[0].cells;
        for (var i = 0, len = cells.length; i < len; ++i) {
            columnCount += cells[i].colSpan;
        }
    }
    return columnCount;
}