一直以來總是會寫跨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>
顯示效果如下:
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>
顯示效果如下:
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>
顯示效果如下:
例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列。
不知道我這樣的理解是否正確,有更好的理解方法的請不吝賜教!謝謝!