Html代码中table跨2行和跨2列的用法
一直以来总是会写跨2列的Html代码,不会写跨2行的例子,找机会研究了一下!
先说说跨2列的例子,这个很好理解
例1 跨2列:
显示效果如下:
Html代码总是一行一行读的,先读第1行,碰到了colspan=2 那么就预先占用2列的位置
然后第2行读时就先读第一列,再读第2列
例2 右跨2行:
显示效果如下:
Html代码先读第1行第1列,然后读到第2列时遇到rowspan=2 ,那么预留2行的位置
然后再读第2行第1列。
例3 左跨2行:
显示效果如下:
例4 跨2行和跨2列结合:
开始先读第1行第1列,预留2行,读出第1行的2,3列,
然后读第2行的1,2列,然后读第3行的第一列,后来
再读第2列横跨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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
显示效果如下:
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
显示效果如下:
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
显示效果如下:
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>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
111 | 222 | 333 |
444 | 555 | |
666 | 777 |
开始先读第1行第1列,预留2行,读出第1行的2,3列,
然后读第2行的1,2列,然后读第3行的第一列,后来
再读第2列横跨2列。
不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!