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

2024年5月13日 88次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞