HTML&CSS Basic Learning Note 15-merging cells

Merge cells

In the previous article, we have been able to create a simple table, if we need to put a horizontal two adjacent cells <td> or a longitudinal two adjacent cells <td> merge, what should we do? The knowledge points we want to know are as follows:

1. Label <td> [colspan] Properties Specifies the number of columns that a cell can span, that is, the number of horizontal merged cells;

2. The [rowspan] property of the label <td> specifies the number of rows that the cell can span, that is, the number of vertically merged cells;

3. These 2 tags can also be used Simultaneously.

Examples of styles:

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/87/48/wKiom1fZ_RnBYlpGAAB7pz-BJ0E812.jpg-wh_500x0-wm_3 -wmp_4-s_443671614.jpg "title=" 3.jpg "alt=" wkiom1fz_rnbylpgaab7pz-bj0e812.jpg-wh_50 "/>

Try merging the cells Now:

2. <! DOCTYPE HTML>

4. < HTML lang="en">

6. < Head >

8.     < charset = "UTF-8" >     

10. < title > Create a multi-row, multi-column table </title>

12. </ Head >

14. < Body >

16. < H1 > Create a multi-row, multi-column table </H1>

20. < Table Border="1">

21. <TR><TD colspan="2">First cell</TD><TD>Second cell</TD><TD>A third cell</TD></TR>

22. <TR><TDrowspan=' 2 '>Fourth cell</TD><TD>Fifth cell</TD><TD>Sixth cell</TD></TR>

23. <TR><TD>Seventh cell</TD><TD>Eighth cell</TD><TD>Nineth cell</TD></TR>

25. </ Table >

27. </ Body >

29. </ HTML >

The result is this: for more information, please go to http://www.mayacoder.com/lesson/index

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/87/45/wKioL1fZ_SSwLMhDAAAvXCLamEo927.png-wh_500x0-wm_3 -wmp_4-s_1272447014.png "title=" 6.png "width=" "height=" "border=" 0 "hspace=" 0 "vspace=" 0 "style=" width:400px; height:240px; "alt=" wkiol1fz_sswlmhdaaavxclameo927.png-wh_50 "/>

HTML&CSS Basic Learning Note 15-merging cells