Html Colspan Rowspan

I work with html table, colspan and rowspan. I want to create table like this: ._______________________. | | | | |______ |_______|_______| |___|___| |___|__

Solution 1:

You need to use the colspan and rowspan attributes, examine my example to see how it's done. When you a <td> has a colspan or rowspan it is expanded and the next <td> that is meant to be in that position is skipped (see the last <tr> only has 2 <td>s).

jsFiddle

<table><tr><tdcolspan="6">&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><tdcolspan="2"rowspan="2">&nbsp;<br />&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><tdcolspan="2"rowspan="2">&nbsp;<br />&nbsp;</td><tdcolspan="2"rowspan="2">&nbsp;<br />&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

Solution 2:

Make a table with four rows, and cells in the rows with these settings:

colspan 6nonenone
colspan 2, rowspan 2nonenone

colspan 2, rowspan 2
colspan 2, rowspan 2nonenone

Solution 3:

This should do it:

<table><tr><tdcolspan=6>&nbsp;<br>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td><tdcolspan=2rowspan=2>&nbsp;<br>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><tdcolspan=2rowspan=2>&nbsp;<br>&nbsp;</td><tdcolspan=2rowspan=2>&nbsp;<br>&nbsp;</td></tr><tr><td>&nbsp;</td><td>&nbsp;</td></tr></table>

Fiddle