HTML基础 table caption thead tbody tfoot 使表格的结构变得清晰 

             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>
    <style type="text/css">
        thead {
            color: aqua;
        }
        
        tbody {
            color: brown;
        }
        
        tfoot {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <!-- 当table的结构划分为 thead tbody tfoot后，再加样式就方便一些了 -->
    <table>
        <caption>书籍统计表</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>书籍</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>本草纲目</td>
                <td>李时珍</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>
</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 00:04  客名利  阅读(433)  评论(0)  编辑  收藏  举报