前端进修笔记14 HTML表格和为网页增加JavaScript

2024年2月29日 98次阅读 来源: LeviDing

HTML表格

结构化表格

  从基础层面看，table元素是由行构成的，行又是由单元格构成的。每一个行（tr）都包括题目单元格（th）或数据单元格（td），或许同时包括这两种单元格。假如以为为全部单元格增加一个题目有助于访问者明白该表格，能够供应caption。scope属性（是可选的，但引荐运用）可通知屏幕阅读器和其他辅佐装备当前的th是列表的题目单元格（运用scope="col"）照样行的题目单元格（运用scope="row"），抑或是用于其他目标的单元格。

  在默许情况下，表格在浏览器中显现的宽度是个中的信息在页面可用空间里所需的最小宽度，也能够用CSS转变表格的花样。能够经由过程在每行开首增加一个th元素为每一个行增加题目单元格。列题目应设置scope="col"，而每一个行的th（位于td之前）则应设置scope="row"。

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

...
<body>
<table>
    <caption>Quarterly Financials for 1962-1964 (in Thousands)</caption>
    <tr>
        <th scope="col">1962</th>
        <th scope="col">1963</th>
        <th scope="col">1964</th>
    </tr>
    <tr>
        <td>$145</td>
        <td>$167</td>
        <td>$161</td>
    </tr>
    <tr>
        <td>$140</td>
        <td>$159</td>
        <td>$164</td>
    </tr>
    <tr>
        <td>$153</td>
        <td>$162</td>
        <td>$168</td>
    </tr>
    <tr>
        <td>$157</td>
        <td>$160</td>
        <td>$171</td>
    </tr>                        
</table>

</body>
</html>

  下面这段顺序中，thead、tbody和tfoot显现的定义了表格的差别部份。接着在每行的开首增加了th元素。tbody和tfoot中的th设置了scope="row"，表明它们是行题目。

...
<body>
<table>
    <caption>Quarterly Financials for 1962-1964<br /> (in Thousands)</caption>
    <thead> <!-- table head -->
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">1962</th>
            <th scope="col">1963</th>
            <th scope="col">1964</th>
        </tr>
    </thead>
    <tbody> <!-- table body -->
        <tr>
            <th scope="row">Q1</th>
            <td>$145</td>
            <td>$167</td>
            <td>$161</td>
        </tr>
        <tr>
            <th scope="row">Q2</th>
            <td>$140</td>
            <td>$159</td>
            <td>$164</td>
        </tr>
        <tr>
            <th scope="row">Q3</th>
            <td>$153</td>
            <td>$162</td>
            <td>$168</td>
        </tr>
        <tr>
            <th scope="row">Q4</th>
            <td>$157</td>
            <td>$160</td>
            <td>$171</td>
        </tr>                        
    </tbody>
    <tfoot> <!-- table foot -->
        <tr>
            <th scope="row">TOTAL</th>
            <td>$595</td>
            <td>$648</td>
            <td>$664</td>
        </tr>    
    </tfoot>
</table>
</body>
</html>

  上面顺序中的thead元素能够显现的将一行或多行题目标记为表格的头部。tbody元素用于围困一切的数据行。tfoot元素能够显现的将一行或多行标记为表格的尾部。能够运用tfoot围困对列的盘算值，也能够在长表格（如列车时刻表）中运用tfoot反复thead元素的内容。以上三个元素不影响表格的规划也不必需。假如包括了thead或tfoot，则必需同时包括tbody。另外还能够对它们增加款式。
  假如table是嵌套在figure元素内除figcaption之外的唯一元素，则能够省略caption，运用figcaption对表格举行形貌。
  能够经由过程scope属性指定th为一组列的题目（运用scope="colgroup"），或许为一组行的题目（运用scope="rowgroup"）。

让单元格逾越多列或多行

  能够经由过程colspan和rowspan属性让th或td逾越一个以上的列或行。

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

  1. 在须要定义逾越一个以上的列的单元格的处所，假如为题目单元格，输入<th后加一个空格，不然输入<td后加一个空格。

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

  3. 输入单元格的内容。

  4. 依据前面的内容，输入</th>或许</td>。

  5. 完成表格的其余部份。假如建立一个逾越两列的单元格，在该行就应当少定义一个单元格；假如建立了一个逾越三列的单元格，在该行就应当少定义两个单元格。

...
<body>
<table>
    <caption>TV Schedule</caption>
    <thead> <!-- table head -->
        <tr>
            <th scope="rowgroup">Time</th>
            <th scope="col">Mon</th>
            <th scope="col">Tue</th>
            <th scope="col">Wed</th>
        </tr>
    </thead>
    <tbody> <!-- table body -->
        <tr>
            <th scope="row">8 pm</th>
            <td>Staring Contest</td>
            <td colspan="2">Celebrity Hoedown</td>
        </tr>
        <tr>
            <th scope="row">9 pm</th>
            <td>Hardy, Har, Har</td>
            <td>What's for Lunch?</td>
            <td rowspan="2">Screamfest Movie of the Weak</td>
        </tr>
        <tr>
            <th scope="row">10 pm</th>
            <td>Healers, Wheelers & Dealers</td>
            <td>It's a Crime</td>
        </tr>
    </tbody>    
</table>
</body>
</html>
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;
}

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

  1. 在须要定义逾越一个以上的行的单元格的处所，假如为题目单元格，输入<th后加一个空格，不然输入<td后加一个空格。

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

  3. 输入单元格的内容。

  4. 依据前面的内容，输入</th>或许</td>。

  5. 完成表格的其余部份。假如建立一个rowspan即是2的单元格，就不须要定义下一行中该单元格对应的单元格了；假如建立了一个rowspan即是3的单元格，就不须要定义下面两行中该单元格对应的单元格了，以此类推。

  表格中的每一行都应当具有雷同的单元格数目。逾越多列的单元格应当算作多个单元格，它的colspan属性值为若干就算做若干个单元格。表格中的每一列都应当具有雷同的单元格数目。逾越多行的单元格应当算作多个单元格，它的rowspan属性值为若干就算做若干个单元格。

为网页增加JavaScript

加载剧本

  剧本重要分为外部剧本和嵌入在页面中的剧本。

加载外部剧本的要领

  输入<script src="script.js"></script>，这里的script.js是外部剧本在服务器上的位置及文件名。应只管将剧本元素放在</body>完毕标签之前，而不放在文档的head元素里（由于如许会影响页面显现的速度）。大多数情况下，最幸亏页面的最末端加载剧本，即</body>完毕标签的前面。

紧缩JavaScript剧本的东西

在线版本

非官方的在线版本

增加嵌入剧本

  嵌入剧本位于HTML文档内，同嵌入款式表很相似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Adding an Embedded Script</title>
    <link rel="stylesheet" href="css/global.css" />
</head>
<body>
    <p>... All of your HTML content is here ...</p>
    <p>See the HTML code regarding how to embed JavaScript directly before the <code></body></code> end tag.</p>
    <!-- See related comments in load-before-body-end-tag.html and load-in-head.html. -->
    <script>
    /*
    Your JavaScript code goes here
    */
    </script>
</body>
</html>

HTML and CSS 读书笔记

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

本文为本人原创，采纳 学问同享 “签名-非商业性运用-雷同体式格局同享” 4.0 (CC BY-NC-SA 4.0)”允许协定 举行允许。
本作品可自在复制、流传及基于本作品举行归纳创作。若有以上须要，请经由过程E-mail等体式格局示知，并在文章开首显著位置加上签名 [丁学文 ] 、原文链接及允许协定信息，并明确指出修正（若有），不得用于商业用途。谢谢合作。详情请点击检察允许协定及版权声明具体内容。

联系体式格局：
E-mail： xuewending1995@gmail.com [ 请说明来意 ]
GitHub： Levi.GitHub

    原文作者：LeviDing
    原文地址: https://segmentfault.com/a/1190000008663316
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞