Html代码中table跨2行和跨2列的用法
来源:互联网 发布:哪个驱动软件好用知乎 编辑:程序博客网 时间:2024/06/05 23:01
转自:http://www.cnblogs.com/goody9807/archive/2006/10/12/527165.html
一直以来总是会写跨2列的Html代码,不会写跨2行的例子,找机会研究了一下!
先说说跨2列的例子,这个很好理解
例1 跨2列:
1<tableborder="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>
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<tableborder="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>
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<tableborder="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>
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<tableborder="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>
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>
开始先读第1行第1列,预留2行,读出第1行的2,3列,
然后读第2行的1,2列,然后读第3行的第一列,后来
再读第2列横跨2列。
不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!
0 0
- Html代码中table跨2行和跨2列的用法
- Html代码中table跨2行和跨2列的用法
- html的table中rowspan colspan实现跨行或者跨列
- html中表格table冻结行和列
- 一些自学的html代码(html中table基本用法)
- 网页中table的行隐藏和列隐藏
- 网页中table的行隐藏和列隐藏
- 网页中table的行隐藏和列隐藏
- TABLE中列与行的显示和隐藏
- 我教女朋友学编程html系列(5) html中table的用法和例子
- html中隐藏table指定标签的列
- HTML中table动态添加行或列
- Table 中2个列(TD)的交换
- Table 中2个列(TD)的交换
- html中 table 和 form的位置
- javascript 导excle table表中有跨行和跨列的
- js添加table的行和列
- JavaScript遍历table的行和列
- HDU 4847 陕西邀请赛A(水)
- 设计模式之单例模式 c++实现以及详解
- 人工智能的存储
- android一键分享功能不使用任何第三方sdk
- 外包之殇
- Html代码中table跨2行和跨2列的用法
- FOS调度算法
- 算法导论 概率 投球问题 5.4-6
- Android实现推送方式解决方案
- javascript中的一些坑
- nfs启动linux系统出现如下错误
- 数学分析教程 第十五章学习感受
- 使用GDI在windows中绘图(一)——windows GDI原理
- [学习笔记]批次需求计划-净需求与毛需求