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

一直以来总是会写跨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列。

不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!
原文地址:https://www.cnblogs.com/goody9807/p/527165.html