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

摘要:
我总是编写跨越两列的HTML代码,但我不能编写跨越两行的示例。我抓住机会学习了它!示例3跨越左侧的两行:1<tableborder=“1”>2<tr˃3<tdrowspan=“2”>111</td˃4<td˃222</td˃5</td˃6<tr˃7<td˃333</td˃38</td˃09</table˃显示效果如下:111222333示例4跨越2行2列:1<tableborder=”1“>2<tr>3<tdrowspan=“2”˃111</td>4<td˃222</td>5<td˃33</td=6</tr˃7<tr>844495551011126661377714151111222333444555666777开始读取第一行和第一列,保留2行,读取第一行的2列和3列,然后读取第二行的1列和2列,然后读第三行的第一列,然后跨2列读取第二列。我不知道我的理解是否正确。如果有更好的理解方法,请给我一些建议!
一直以来总是会写跨2列的Html代码,不会写跨2行的例子,找机会研究了一下!
先说说跨2列的例子,这个很好理解


例1  跨2列:
1Html代码中table跨2行和跨2列的用法第1张<table border="1">
2Html代码中table跨2行和跨2列的用法第1张                <tr>
3Html代码中table跨2行和跨2列的用法第1张                    <td colspan="2" align="center">111</td>
4Html代码中table跨2行和跨2列的用法第1张                </tr>
5Html代码中table跨2行和跨2列的用法第1张                <tr>
6Html代码中table跨2行和跨2列的用法第1张                    <td>222</td>
7Html代码中table跨2行和跨2列的用法第1张                    <td>333</td>
8Html代码中table跨2行和跨2列的用法第1张                </tr>
9Html代码中table跨2行和跨2列的用法第1张  </table>

显示效果如下:
111
222333

Html代码总是一行一行读的,先读第1行,碰到了colspan=2 那么就预先占用2列的位置
然后第2行读时就先读第一列,再读第2列



例2  右跨2行:

1Html代码中table跨2行和跨2列的用法第1张<table border="1">
2Html代码中table跨2行和跨2列的用法第1张                <tr>
3Html代码中table跨2行和跨2列的用法第1张                    <td>111</td>
4Html代码中table跨2行和跨2列的用法第1张                    <td rowspan="2">222</td>
5Html代码中table跨2行和跨2列的用法第1张                </tr>
6Html代码中table跨2行和跨2列的用法第1张                <tr>
7Html代码中table跨2行和跨2列的用法第1张                    <td>333</td>
8Html代码中table跨2行和跨2列的用法第1张                </tr>
9Html代码中table跨2行和跨2列的用法第1张            </table>

显示效果如下:
111222
333

Html代码先读第1行第1列,然后读到第2列时遇到rowspan=2 ,那么预留2行的位置
然后再读第2行第1列。



例3  左跨2行:

1Html代码中table跨2行和跨2列的用法第1张<table border="1">
2Html代码中table跨2行和跨2列的用法第1张                <tr>
3Html代码中table跨2行和跨2列的用法第1张                    <td rowspan="2">111</td>
4Html代码中table跨2行和跨2列的用法第1张                    <td>222</td>
5Html代码中table跨2行和跨2列的用法第1张                </tr>
6Html代码中table跨2行和跨2列的用法第1张                <tr>
7Html代码中table跨2行和跨2列的用法第1张                    <td>333</td>
8Html代码中table跨2行和跨2列的用法第1张                </tr>
9Html代码中table跨2行和跨2列的用法第1张            </table>

显示效果如下:
111222
333



例4  跨2行和跨2列结合:

 1Html代码中table跨2行和跨2列的用法第1张<table border="1">
 2Html代码中table跨2行和跨2列的用法第1张                <tr>
 3Html代码中table跨2行和跨2列的用法第1张                    <td rowspan="2">111</td>
 4Html代码中table跨2行和跨2列的用法第1张                    <td>222</td>
 5Html代码中table跨2行和跨2列的用法第1张                    <td>333</td>
 6Html代码中table跨2行和跨2列的用法第1张                </tr>
 7Html代码中table跨2行和跨2列的用法第1张                <tr>
 8Html代码中table跨2行和跨2列的用法第1张                    <td>444</td>
 9Html代码中table跨2行和跨2列的用法第1张                    <td>555</td>
10Html代码中table跨2行和跨2列的用法第1张                </tr>
11Html代码中table跨2行和跨2列的用法第1张                <tr>
12Html代码中table跨2行和跨2列的用法第1张                    <td>666</td>
13Html代码中table跨2行和跨2列的用法第1张                    <td colspan="2">777</td>
14Html代码中table跨2行和跨2列的用法第1张                </tr>
15Html代码中table跨2行和跨2列的用法第1张            </table>


111222333
444555
666777

开始先读第1行第1列,预留2行,读出第1行的2,3列,
然后读第2行的1,2列,然后读第3行的第一列,后来
再读第2列横跨2列。

不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!

免责声明:文章转载自《Html代码中table跨2行和跨2列的用法》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Ext分页之php中,真分页显示在 macOS 上搭建 Flutter 开发环境下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

oracle clob与nclob的互相转换

drop table clobTets create table clobTets( col1 nclob ) select * from clobTets insert into clobTets values('11111') alter table clobTets add (col2 varchar2(4000)) update c...

4、HTML和CSS进阶知识

HTML和CSS进阶知识 一、HTML中常用的块元素(block)和行内元素(inline)   常见的块元素(block):p、h1--h6、div、ul、ol、dl、hr   常见的行内元素(inline):b、i、em、strong、small、sub、sup、a、span、br、   在css中,可以通过display属性实现block元素和inl...

vue+elementui +input输入框关键字筛选检索表格数据展示+分页功能

第一种用axios发送请求到后台,需要后台配合,才能在表格里面渲染页面;想偷懒的小伙建议去直接粘贴复制第三种 <template> <div class="tableDatas"> <div class="searchWord"> <div style="display: inline-block"> 搜索...

ExtJS初接触 —— 了解 Ext Core

ExtJS初接触 —— 了解 Ext Core Ext Core是一款和jQuery媲美的轻型JS库,基于MIT许可。对于Dom的操作,我个人还是比较喜欢用jQuery。当然如果项目中用的是ExtJS框架,也就没必要多引用一个jQuery,Ext Core是ExtJS框架的一个小子集。如果仅仅使用Ext Core的功能,则只需引入builds文件夹下的一个...

Phoenix 使用教程

引言 hbase 提供很方便的 shell 脚本,可以对数据表进行 CURD 操作,但是毕竟是有一定的学习成本的,基本上对于开发来讲,sql 语句都是看家本领,那么,有没有一种方法可以把 sql 语句转换成 hbase的原生API呢? 这样就可以通过普通平常的 sql 来对hbase 进行数据的管理,使用成本大大降低。 Apache Phoenix 组件就...

canvas在小程序中添加图片(本地图片/网络图片),在html中添加图片

添加图片网络图片: wxml文件中: <canvas canvas-id="canvas" style="border:1px solid #f00;height: 400rpx; 400rpx;"></canvas> js文件中:   onShow: function () {     wx.getImageInfo({/...