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列。

不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值