How to merge table cells

html table in a merged cell within the scope of html and css style, table label can be combined by row or column rowspan and colspan.
Form design:
design when you can first draw a sketch, and then write code according to the sketch, with paper and pen sketches relatively fast and simple, with PS and other drawing software can, but not as convenient paper strokes.
1. The number of rows can be calculated according to the sketch, the number of cells in each row.
2. If you do not calculate the like, may be replicated a sufficient number of the first row is not combined merging table column, then one by one according to the sketch combined deleted. For example, the first line of the first cell needs to merge three rows, rowspan 3, in the current line plus rowspan = 3, then remove the first cell td second and third rows below. To merge three, three deleted directly behind the current td cell line.

Modify the form:
modify the table when the first observation of the overall table maximum rows and maximum columns, then merging of cells. And calculating the number of cells observed after subtraction of each row, delete, and increased cell.

Short Q
How merged cells:
Baidu the html and related css style, rowspan and colspan table may be combined table rows or columns.

Test code:

< Body > 
<-! Combined line, how many rows were combined, a little below the line number TD -> 
<-! Combined line 2, a next row is removed td, if it is combined line 3, the two rows to remove a td, and so on ... -> 
< Table border =. 1 style = "border-Collapse: Collapse;" > 
< TR > 
    < TD rowspan = "2" width = "50" height = "50" bgcolor = "Yellow" > </ TD > <-! merged actual height 100 -> 
    < TD width = "50" height = "50" > </td>
    <td width = "50" height = "50" > </ TD > 
</ TR > 
< TR > <-! on the combined line 2, this line deleting a td, the cell is incorporated in the row above -> 
    < TD width = "50" height = "50" > </ TD > 
    < TD width = "50" height = "50" > </ TD > 
</ TR > 
</ Table > 
< P > ------ - dividing line ------- </ P >
<-! Merged column, how many columns merger, the number of the current line less td ->
< Table border =. 1 style = "border-Collapse: Collapse;" > 
< TR > <-! Current row 2 columns were combined, deleting a current row td, how many columns were combined, omitted much td -> 
    < td colspan = "2" width = "100" height = "50" bgcolor = "Yellow" > </ TD > 
    < TD width = "50" height = "50" > </ TD > 
</ TR > 
< TR > 
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
    <td width="50" height="50"></td>
</tr>
</table>
<p>-------分隔线-------</p>
<table border=1 style="border-collapse:collapse;"><!--四行三列表格-->
<tr><!- <->the first row, three combined, a total of three, the two are combined, so a total cell
    TD colspan =. 3 width = "50" height = "50" align = left = "Center" > Tr1: the td1 </ TD > 
</ TR > 
< TR > ! <- merging line, the first cell in row 2 were combined, The combined third cell row 2, columns are not consolidated to the maximum three -> 
    < TD rowspan = 2 width = "50" height = "50" align = left = "Center" bgcolor = "Yellow" > Tr2 is: the td1 < / TD > 
    < TD width = "50" height="50" align= "Center" bgcolor = "Yellow" > Tr2 is: TD2 </ TD > 
    < TD rowspan = 2 width = "50" height = "50" align = left = "Center" bgcolor = "Yellow" > Tr2 is: TD3 </ TD > 
</ TR > 
< TR > <-! first cell is a cell in a row on the first merge, the third column is the third row cells merge, only the middle column -> 
    < TD width = "50" height = "50" align = left = "Center" >tr3:td1</td>
</TR > 
< TR > <-! second cell in the third column merged cell, the second and third columns are combined into a total of two -> 
    < TD width = "50" height = "50 " align = left =" Center " > Tr4: the td1 </ TD > 
    < TD colspan = 2 width =" 50 " height =" 50 " align = left =" Center " > Tr4: TD2 </ TD > 
</ TR > 
</ Table > 
</ body >

Icon:

PS: merge the merged row columns, cells will change the width and height, the combined recommended new width and height. Of course, it does not change when parsing will become the merger, but it is recommended to sketch, to merge the ranks of the true width and height settings specific value. If the content is not a fixed-contained, removable height, the height will be adaptive, only the restriction width.