Html代码中table跨2行和跨2列的用法

转自:http://www.cnblogs.com/goody9807/archive/2006/10/12/527165.html

 

一直以来总是会写跨2列的Html代码，不会写跨2行的例子，找机会研究了一下！
先说说跨2列的例子，这个很好理解


例1  跨2列:

1 < table border ="1" >
2                 < tr >
3                     < td colspan ="2" align ="center" > 111 </ td >
4                 </ tr >
5                 < tr >
6                     < td > 222 </ td >
7                     < td > 333 </ td >
8                 </ tr >
9   </ table >

显示效果如下：

111
222	333

Html代码总是一行一行读的，先读第1行，碰到了colspan＝2 那么就预先占用2列的位置
然后第2行读时就先读第一列，再读第2列



例2  右跨2行:

1 < table border ="1" >
2                 < tr >
3                     < td > 111 </ td >
4                     < td rowspan ="2" > 222 </ td >
5                 </ tr >
6                 < tr >
7                     < td > 333 </ td >
8                 </ tr >
9             </ table >

显示效果如下：

111	222
333

Html代码先读第1行第1列，然后读到第2列时遇到rowspan＝2 ，那么预留2行的位置
然后再读第2行第1列。



例3  左跨2行:

1 < table border ="1" >
2                 < tr >
3                     < td rowspan ="2" > 111 </ td >
4                     < td > 222 </ td >
5                 </ tr >
6                 < tr >
7                     < td > 333 </ td >
8                 </ tr >
9             </ table >

显示效果如下：

111	222
	333

例4  跨2行和跨2列结合:

1 < table border ="1" >
2                 < tr >
3                     < td rowspan ="2" > 111 </ td >
4                     < td > 222 </ td >
5                     < td > 333 </ td >
6                 </ tr >
7                 < tr >
8                     < td > 444 </ td >
9                     < td > 555 </ td >
10                 </ tr >
11                 < tr >
12                     < td > 666 </ td >
13                     < td colspan ="2" > 777 </ td >
14                 </ tr >
15             </ table >

 

111	222	333
	444	555
666	777

开始先读第1行第1列，预留2行，读出第1行的2，3列，
然后读第2行的1，2列，然后读第3行的第一列，后来
再读第2列横跨2列。

不知道我这样的理解是否正确，有更好的理解方法的请不吝赐教！谢谢！