zoukankan      html  css  js  c++  java
  • HTML基础 table rowspan colspan 跨行与跨列的单元格

                 OS : Windows 10
            browser : Chrome 83.0.4103.116
             editor : Visual Studio Code 1.46.1       
        typesetting : Markdown
    

    html

    <!DOCTYPE html>
    <html lang="zh-CN">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!-- start:demo -->
        <table border="1">
            <tr>
                <td>00</td>
                <td>01</td>
                <td>02</td>
                <td>03</td>
            </tr>
            <tr>
                <td>10</td>
                <!-- 这个单元格占了两列 -->
                <!-- 本该由4个td的tr,现在有3个td就可以了 -->
                <td colspan="2">11,12</td>
                <td>13</td>
            </tr>
        </table>
    
        <table border="1">
            <tr>
                <!--有增就有减-->
                <!--每行的单元格的数量必须相等-->
                <td rowspan="2">00,10</td>
    
                <td>01</td>
                <td>02</td>
                <td>03</td>
            </tr>
            <tr>
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>
        </table>
    
    
        <!--       table
                align       表格table的对齐方式
                width       宽度  ?%  或者 ?
                height      高度
                border      边框粗细
                bordercolor 边框颜色
                bgcolor     背景颜色
                background  背景图片
                cellpadding 单元格边线到内容间的距离(填充距离)
                cellspacing 单元格与单元格之间的距离(间距)
                rules       合并单元格边框线;有可能在IE下不兼容
                -->
    
        <!--
                       tr
                bgcolor     行的背景色
                align       行中的文本水平居中
                height      行的高度
                valign      垂直居中 :top  middle  bottom
        -->
        <!-- end:demo -->
    </body>
    
    </html>
    

    result

    resource

    • [ 教程 ] www.w3school.com.cn/html/index.asp
    • [ 手册 ] www.w3cschool.cn/html5_reference.html
    • [ 规范 ] www.runoob.com/html/html5-syntax.html
    • [ 平台 ] www.cnblogs.com
    • [ 规范-参考 ] www.w3cschool.cn/wematy
    • [ 统计-参考 ] tongji.baidu.com/research/site#browser


    感恩曾经帮助过 客名利 的人。
    html,xhtml和html5的发展历史及其特性,建议学习。
    代码的书写是有规范的,适当地遵守规范,助人助己。
    Chromium和Firefox是开源浏览器,新功能众多,建议关注。
    Blink,EdgeHTML,Gecko,KHTML,Trident,WebCore,WebKit等,空闲时可以了解一下。
    不同的浏览器解析代码是有差别的,要多关注兼容性问题。

    初学指路:善于发现他人的优点和身边的美丽,以此来塑造匠心。
    学习总纲:人法地,地法天,天法道,道法自然。
  • 相关阅读:
    vmware ubuntu 异常关机无法连接到网络
    Speed up GCC link
    常用的一些解压命令
    Log4j 漏洞复现
    Test Case Design method Boundary value analysis and Equivalence partitioning
    CCA (Citrix Certified Administrator) exam of “Implementing Citrix XenDesktop 4”
    What is Key Word driven Testing?
    SAP AGS面试小结
    腾讯2013终端实习生一面
    指针的引用
  • 原文地址:https://www.cnblogs.com/kemingli/p/13257748.html
Copyright © 2011-2022 走看看