<!DOCTYPE HTML> <HTML> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Head> <title>Table merging (horizontal and vertical)</title> </Head> <BaseTarget= "_self"> <Body> <!--Initial Table - <TableAlign= "Center"Border= "1"cellpadding= "2"cellspacing= "2"width= "300px"Height= "100px"> <TR> <TD>Beijing</TD> <TD>Shanghai</TD> <TD>Guangzhou</TD> </TR> <TR> <TD>Shenzhen</TD> <TD>Hebei</TD> <TD>Xiong Ann</TD> </TR> </Table> <!--merging in the horizontal direction - <BR><BR><BR><BR><BR> <TableAlign= "Center"Border= "1"cellpadding= "2"cellspacing= "2"width= "300px"Height= "100px"> <TR> <TDcolspan= "2">Beijing</TD> <!--The first cell is merged with the second cell, colspan= "2" means that the length of the first cell is changed to two cell length, that is, the length of the first cell is twice times longer, and the second cell is <td></td> deleted. - <TD>Guangzhou</TD> </TR> <TR> <TD>Shenzhen</TD> <TD>Hebei</TD> <TD>Xiong Ann</TD> </TR> </Table> <BR><BR><BR><BR><BR> <TableAlign= "Center"Border= "1"cellpadding= "2"cellspacing= "2"width= "300px"Height= "100px"> <TR> <TD>Beijing</TD> <TD>Shanghai</TD> <TD>Guangzhou</TD> </TR> <TR> <TD>Shenzhen</TD> <TDcolspan= "2">Hebei</TD> </TR> </Table> <BR><BR><BR><BR><BR> <!--vertically-oriented cell merging - <TableAlign= "Center"Border= "1"cellpadding= "2"cellspacing= "2"width= "300px"Height= "100px"> <TR> <TDrowspan= "2">Beijing</TD><!--The first cell is merged vertically, changing the length of the first cell in the vertical direction to twice times the original, but the height and length of the table are unchanged, so to delete the cell where Shenzhen is located (rowspan= "2" means that the first cell is now the length of the original two cells) - <TD>Shanghai</TD> <TD>Guangzhou</TD> </TR> <TR> <TD>Guangzhou</TD> <TD>Xiong Ann</TD> </TR> </Table> <BR><BR><BR><BR><BR> <TableAlign= "Center"Border= "1"cellpadding= "2"cellspacing= "2"width= "300px"Height= "100px"> <TR> <TD>Beijing</TD> <TD>Shanghai</TD> <TDrowspan= "2">Guangzhou</TD> </TR> <TR> <TD>Shenzhen</TD> <TD>Hebei</TD> </TR> </Table> </Body> </HTML>
Reference: http://blog.csdn.net/ameir_yang/article/details/60782259
Merged cells in HTML (horizontal and vertical)