zoukankan      html  css  js  c++  java
  • 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列。

    不知道我这样的理解是否正确,有更好的理解方法的请不吝赐教!谢谢!
  • 相关阅读:
    细节回顾 p标签的嵌套问题
    面向对象编程
    深浅拷贝
    数据交互 jsonp插件
    数据交互 跨域问题
    数据交互 axios
    数据交互 jQuery ajax
    数据交互 后端代码
    数据交互 http请求 xhr
    Windows安装Node.js报错:2503、2502的解决方法
  • 原文地址:https://www.cnblogs.com/goody9807/p/527165.html
Copyright © 2011-2022 走看看