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等,空闲时可以了解一下。
    不同的浏览器解析代码是有差别的,要多关注兼容性问题。

    初学指路:善于发现他人的优点和身边的美丽,以此来塑造匠心。
    学习总纲:人法地,地法天,天法道,道法自然。
  • 相关阅读:
    C#计算两个日期之间相差的天数
    js字符串转时间
    mysql find_in_set 函数
    css控制网页所有图片当图片大于指定宽度图片等于指定宽度
    网页自动适应手机屏幕宽度的方法
    c# 生成指定范围的数字和字母组合随机数
    SqlServer 查看被锁的表和解除被锁的表
    C#隐情信息(银行账户,身份证号码,名字)中间部分特殊字符替换(*)
    c#检查SQL语法是否正确,不执行SQL语句
    sqlserver中的表值函数和标量值函数
  • 原文地址:https://www.cnblogs.com/kemingli/p/13257748.html
Copyright © 2011-2022 走看看