资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/前端学习笔记14 HTML表格和为网页添加JavaScript

前端学习笔记14 HTML表格和为网页添加JavaScript

CastlePeaK / 1519人阅读

摘要：表格结构化表格从基本层面看，元素是由行组成的，行又是由单元格组成的。如果认为为整个单元格添加一个标题有助于访问者理解该表格，可以提供。输入单元格的内容。表格中的每一列都应该具有相同的单元格数量。

HTML表格 结构化表格

  从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。如果认为为整个单元格添加一个标题有助于访问者理解该表格，可以提供caption。scope属性（是可选的，但推荐使用）可告诉屏幕阅读器和其他辅助设备当前的th是列表的标题单元格（使用scope="col"）还是行的标题单元格（使用scope="row"），抑或是用于其他目的的单元格。

  在默认情况下，表格在浏览器中呈现的宽度是其中的信息在页面可用空间里所需的最小宽度，也可以用CSS改变表格的格式。可以通过在每行开头添加一个th元素为每个行添加标题单元格。列标题应设置scope="col"，而每个行的th（位于td之前）则应设置scope="row"。


  在默认情况下，th文本是以粗体显示的，th和caption文本都是居中对齐的，表格的宽度就是内容所需的宽度。

...



    Quarterly Financials for 1962-1964 (in Thousands)
    

        1962
        1963
        1964
    

    

        $145
        $167
        $161
    

    

        $140
        $159
        $164
    

    

        $153
        $162
        $168
    

    

        $157
        $160
        $171


  下面这段程序中，thead、tbody和tfoot显示的定义了表格的不同部分。接着在每行的开头添加了th元素。tbody和tfoot中的th设置了scope="row"，表明它们是行标题。

...



    Quarterly Financials for 1962-1964
 (in Thousands)
     
        

            Quarter
            1962
            1963
            1964
        

    
     
        

            Q1
            $145
            $167
            $161
        

        

            Q2
            $140
            $159
            $164
        

        

            Q3
            $153
            $162
            $168
        

        

            Q4
            $157
            $160
            $171
        
                        
    
     
        

            TOTAL
            $595
            $648
            $664

  上面程序中的thead元素可以显示的将一行或多行标题标记为表格的头部。tbody元素用于包围所有的数据行。tfoot元素可以显示的将一行或多行标记为表格的尾部。可以使用tfoot包围对列的计算值，也可以在长表格（如列车时刻表）中使用tfoot重复thead元素的内容。以上三个元素不影响表格的布局也不必需。如果包含了thead或tfoot，则必须同时包含tbody。此外还可以对它们添加样式。
  如果table是嵌套在figure元素内除figcaption以外的唯一元素，则可以省略caption，使用figcaption对表格进行描述。
  可以通过scope属性指定th为一组列的标题（使用scope="colgroup"），或者为一组行的标题（使用scope="rowgroup"）。


让单元格跨越多列或多行

  可以通过colspan和rowspan属性让th或td跨越一个以上的列或行。

让单元格跨越两个或两个以上列的步骤

在需要定义跨越一个以上的列的单元格的地方，如果为标题单元格，输入后加一个空格，否则输入后加一个空格。

输入colspan="n">，这里的n是单元格要跨越的列数。

输入单元格的内容。

根据前面的内容，输入或者。

完成表格的其余部分。如果创建一个跨越两列的单元格，在该行就应该少定义一个单元格；如果创建了一个跨越三列的单元格，在该行就应该少定义两个单元格。

...



    TV Schedule
     
        

            Time
            Mon
            Tue
            Wed
        

    
     
        

            8 pm
            Staring Contest
            Celebrity Hoedown
        

        

            9 pm
            Hardy, Har, Har
            What"s for Lunch?
            Screamfest Movie of the Weak
        

        

            10 pm
            Healers, Wheelers & Dealers
            It"s a Crime
        

        




body {
    font: 100% sans-serif; /* This results in Arial on Windows and Helvetica on OS X. */
}
table {
    /* The default setting is border-collapse: separate;. By changing separate to collapse as shown below, the space between each table cell is removed. */
    border-collapse: collapse;

    -webkit-box-shadow: 3px 3px 7px #055584;
    -moz-box-shadow: 3px 3px 7px #055584;
    box-shadow: 3px 3px 7px #055584;
}
caption {
    color: #055584;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0 0 .5em;
    text-shadow: 1px 1px 1px #c0e0f2;
}
td,
th {
    font-size: .8125em;
    border: 1px solid #000;
    padding: .75em;    
}
th {
    background: #055584;
    color: #c0e0f2;
}
td {
    background: #d2ebf9;
    width: 9em;
}
thead th:first-child {
    background: #1a628c;
}
thead th {
    border-bottom: 3px solid #000;
    text-transform: uppercase;
}


让单元格跨越两个或两个以上行的步骤

在需要定义跨越一个以上的行的单元格的地方，如果为标题单元格，输入后加一个空格，否则输入后加一个空格。

输入rowspan="n">，这里的n是单元格要跨越的行数。

输入单元格的内容。

根据前面的内容，输入或者。

完成表格的其余部分。如果创建一个rowspan等于2的单元格，就不需要定义下一行中该单元格对应的单元格了；如果创建了一个rowspan等于3的单元格，就不需要定义下面两行中该单元格对应的单元格了，以此类推。

  表格中的每一行都应该具有相同的单元格数量。跨越多列的单元格应该算作多个单元格，它的colspan属性值为多少就算做多少个单元格。表格中的每一列都应该具有相同的单元格数量。跨越多行的单元格应该算作多个单元格，它的rowspan属性值为多少就算做多少个单元格。


为网页添加JavaScript 加载脚本

  脚本主要分为外部脚本和嵌入在页面中的脚本。


加载外部脚本的方法

  输入，这里的script.js是外部脚本在服务器上的位置及文件名。应尽量将脚本元素放在结束标签之前，而不放在文档的head元素里（因为这样会影响页面显示的速率）。大多数情况下，最好在页面的最末尾加载脚本，即结束标签的前面。


压缩JavaScript脚本的工具

Google Closure Compiler
供下载的版本及文档

UglifyJS
供下载的版本及文档

在线版本

YUI Compressor
供下载的版本及文档

非官方的在线版本


添加嵌入脚本

  嵌入脚本位于HTML文档内，同嵌入样式表很类似。




    
    Adding an Embedded Script
    


    
... All of your HTML content is here ...

    
See the HTML code regarding how to embed JavaScript directly before the  end tag.


HTML and CSS 读书笔记

欢迎来我的博客，在那会有更多更新：Levi.Blog


本文为本人原创，采用 知识共享 “署名-非商业性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”许可协议 进行许可。
本作品可自由复制、传播及基于本作品进行演绎创作。如有以上需要，请通过E-mail等方式告知，并在文章开头明显位置加上署名  [丁学文 ] 、原文链接及许可协议信息，并明确指出修改（如有），不得用于商业用途。谢谢合作。详情请点击查看许可协议及版权声明具体内容。

联系方式：
E-mail： xuewending1995@gmail.com [ 请注明来意 ]
GitHub： Levi.GitHub

云服务器 混合云 javascript学习笔记 网页javascript学习 javascript添加html 学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111779.html

相关文章

  • 前端学习笔记14 HTML表格和为网页添加JavaScript

    摘要：表格结构化表格从基本层面看，元素是由行组成的，行又是由单元格组成的。如果认为为整个单元格添加一个标题有助于访问者理解该表格，可以提供。输入单元格的内容。表格中的每一列都应该具有相同的单元格数量。 HTML表格 结构化表格   从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。如果认为为整...

    Ververica 评论0 收藏0

  • 前端学习笔记14 HTML表格和为网页添加JavaScript

    摘要：表格结构化表格从基本层面看，元素是由行组成的，行又是由单元格组成的。如果认为为整个单元格添加一个标题有助于访问者理解该表格，可以提供。输入单元格的内容。表格中的每一列都应该具有相同的单元格数量。 HTML表格 结构化表格   从基本层面看，table元素是由行组成的，行又是由单元格组成的。每个行（tr）都包含标题单元格（th）或数据单元格（td），或者同时包含这两种单元格。如果认为为整...

    MarvinZhang 评论0 收藏0

  • 重学前端学习笔记（三）--前端知识框架图

    摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

    xingqiba 评论0 收藏0

  • 重学前端学习笔记（三）--前端知识框架图

    摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

    bbbbbb 评论0 收藏0

  • 重学前端学习笔记（三）--前端知识框架图

    摘要：笔记说明重学前端是程劭非前手机淘宝前端负责人在极客时间开的一个专栏，每天分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入的专栏学习原文有的语音，如有侵权请联系我，邮箱。 笔记说明 重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以...

    maochunguang 评论0 收藏0

发表评论

登陆后可评论

0条评论

CastlePeaK

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<