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

posted @ 2020-07-06 21:47  客名利  阅读(563)  评论(0)  编辑  收藏  举报