前端學習筆記14 HTML表格和爲網頁添加JavaScript

時間 2019-12-04

標籤前端學習筆記 html 表格網頁添加 javascript 欄目 HTML 简体版

原文原文鏈接

HTML表格

結構化表格

從基本層面看，table元素是由行組成的，行又是由單元格組成的。每一個行（tr）都包含標題單元格（th）或數據單元格（td），或者同時包含這兩種單元格。若是認爲爲整個單元格添加一個標題有助於訪問者理解該表格，能夠提供caption。scope屬性（是可選的，但推薦使用）可告訴屏幕閱讀器和其餘輔助設備當前的th是列表的標題單元格（使用scope="col"）仍是行的標題單元格（使用scope="row"），抑或是用於其餘目的的單元格。css

在默認狀況下，表格在瀏覽器中呈現的寬度是其中的信息在頁面可用空間裏所需的最小寬度，也能夠用CSS改變表格的格式。能夠經過在每行開頭添加一個th元素爲每一個行添加標題單元格。列標題應設置scope="col"，而每一個行的th（位於td以前）則應設置scope="row"。html

在默認狀況下，th文本是以粗體顯示的，th和caption文本都是居中對齊的，表格的寬度就是內容所需的寬度。git

...
<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"，代表它們是行標題。github

...
<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"）。web

讓單元格跨越多列或多行

能夠經過colspan和rowspan屬性讓th或td跨越一個以上的列或行。瀏覽器

讓單元格跨越兩個或兩個以上列的步驟服務器

在須要定義跨越一個以上的列的單元格的地方，若是爲標題單元格，輸入<th後加一個空格，不然輸入<td後加一個空格。工具
輸入colspan="n">，這裏的n是單元格要跨越的列數。佈局
輸入單元格的內容。ui
根據前面的內容，輸入</th>或者</td>。
完成表格的其他部分。若是建立一個跨越兩列的單元格，在該行就應該少定義一個單元格；若是建立了一個跨越三列的單元格，在該行就應該少定義兩個單元格。

...
<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;
}

讓單元格跨越兩個或兩個以上行的步驟

在須要定義跨越一個以上的行的單元格的地方，若是爲標題單元格，輸入<th後加一個空格，不然輸入<td後加一個空格。
輸入rowspan="n">，這裏的n是單元格要跨越的行數。
輸入單元格的內容。
根據前面的內容，輸入</th>或者</td>。
完成表格的其他部分。若是建立一個rowspan等於2的單元格，就不須要定義下一行中該單元格對應的單元格了；若是建立了一個rowspan等於3的單元格，就不須要定義下面兩行中該單元格對應的單元格了，以此類推。

表格中的每一行都應該具備相同的單元格數量。跨越多列的單元格應該算做多個單元格，它的colspan屬性值爲多少就算作多少個單元格。表格中的每一列都應該具備相同的單元格數量。跨越多行的單元格應該算做多個單元格，它的rowspan屬性值爲多少就算作多少個單元格。

爲網頁添加JavaScript

加載腳本

腳本主要分爲外部腳本和嵌入在頁面中的腳本。

加載外部腳本的方法

輸入<script src="script.js"></script>，這裏的script.js是外部腳本在服務器上的位置及文件名。應儘可能將腳本元素放在</body>結束標籤以前，而不放在文檔的head元素裏（由於這樣會影響頁面顯示的速率）。大多數狀況下，最好在頁面的最末尾加載腳本，即</body>結束標籤的前面。

壓縮JavaScript腳本的工具

Google Closure Compiler
供下載的版本及文檔
UglifyJS
供下載的版本及文檔

在線版本

YUI Compressor
供下載的版本及文檔

非官方的在線版本

添加嵌入腳本

嵌入腳本位於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