How to merge/combine HTML table cell without colspan

Question

I need to merge the center cells in an HTML table, but not work as expected. The below image shows what happens when I use colspan and rowspan - it messes up the table.

enter image description here

How should I merge 9 cells like the above image without using colspan. I really want to combine table cells so they don't expand. Can I do it using HTML or do I need to use a jQuery solution?

Ian McLaird · Accepted Answer

colspan is the right thing to do. The problem you're having is that you added more columns than you intended. Every time you use a colspan of more than 1, you need to knock a corresponding number of tags off that row. Also, remember that using rowspan effectively adds a to every row that the span covers. So when you do a colspan="3" rowspan="3" then you need to knock 2 cells off the row that contains the spanned cell, and three off the next two rows.

In the case of your 10x10 table with the 3x3 hole in it, you need this

EDIT

I'm feeling generous and bored, so here's some PHP. You can tweak the spansize and cellMax values and everything should continue working. Rough edges though. I haven't tested every possible way to break it.

 0) {
            $cell = $span_cols;
        } else {
            $cell = 0;
        }
        echo "";
        for (; $cell < $cols; $cell++) {
            $cell_code = " ";

            if ($row === $span_start_row && $cell === $span_start_col) {
                $cell_code = ' ';
                $cell += ($span_cols - 1);
                $spanning = $span_rows;
            }

            echo $cell_code;
        }
        echo "";
    }
}
?>

How to merge/combine HTML table cell without colspan

Answers (1)

Related Questions