前端學(xué)習(xí)筆記14 HTML表格和為網(wǎng)頁(yè)添加JavaScript

2024-04-27 15:12:31

字體：大中小

供稿：網(wǎng)友

另發(fā)表于Levi.Blog和oschina

HTML表格

結(jié)構(gòu)化表格

??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個(gè)行（tr）都包含標(biāo)題單元格（th）或數(shù)據(jù)單元格（td），或者同時(shí)包含這兩種單元格。如果認(rèn)為為整個(gè)單元格添加一個(gè)標(biāo)題有助于訪問(wèn)者理解該表格，可以提供caption。scope屬性（是可選的，但推薦使用）可告訴屏幕閱讀器和其他輔助設(shè)備當(dāng)前的th是列表的標(biāo)題單元格（使用scope="col"）還是行的標(biāo)題單元格（使用scope="row"），抑或是用于其他目的的單元格。

??在默認(rèn)情況下，表格在瀏覽器中呈現(xiàn)的寬度是其中的信息在頁(yè)面可用空間里所需的最小寬度，也可以用CSS改變表格的格式。可以通過(guò)在每行開(kāi)頭添加一個(gè)th元素為每個(gè)行添加標(biāo)題單元格。列標(biāo)題應(yīng)設(shè)置scope="col"，而每個(gè)行的th（位于td之前）則應(yīng)設(shè)置scope="row"。

??在默認(rèn)情況下，th文本是以粗體顯示的，th和caption文本都是居中對(duì)齊的，表格的寬度就是內(nèi)容所需的寬度。

...<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顯示的定義了表格的不同部分。接著在每行的開(kāi)頭添加了th元素。tbody和tfoot中的th設(shè)置了scope="row"，表明它們是行標(biāo)題。

...<body><table> <caption>Quarterly Financials for 1962-1964<br /> (in Thousands)</caption> <thead>  <tr> <th scope="col">Quarter</th> <th scope="col">1962</th> <th scope="col">1963</th> <th scope="col">1964</th> </tr> </thead> <tbody>  <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>  <tr> <th scope="row">TOTAL</th> <td>$595</td> <td>$648</td> <td>$664</td> </tr> </tfoot></table></body></html>

??上面程序中的thead元素可以顯示的將一行或多行標(biāo)題標(biāo)記為表格的頭部。tbody元素用于包圍所有的數(shù)據(jù)行。tfoot元素可以顯示的將一行或多行標(biāo)記為表格的尾部。可以使用tfoot包圍對(duì)列的計(jì)算值，也可以在長(zhǎng)表格（如列車(chē)時(shí)刻表）中使用tfoot重復(fù)thead元素的內(nèi)容。以上三個(gè)元素不影響表格的布局也不必需。如果包含了thead或tfoot，則必須同時(shí)包含tbody。此外還可以對(duì)它們添加樣式。 ??如果table是嵌套在figure元素內(nèi)除figcaption以外的唯一元素，則可以省略caption，使用figcaption對(duì)表格進(jìn)行描述。 ??可以通過(guò)scope屬性指定th為一組列的標(biāo)題（使用scope="colgroup"），或者為一組行的標(biāo)題（使用scope="rowgroup"）。

讓單元格跨越多列或多行

??可以通過(guò)colspan和rowspan屬性讓th或td跨越一個(gè)以上的列或行。

讓單元格跨越兩個(gè)或兩個(gè)以上列的步驟

在需要定義跨越一個(gè)以上的列的單元格的地方，如果為標(biāo)題單元格，輸入<th后加一個(gè)空格，否則輸入<td后加一個(gè)空格。輸入colspan="n">，這里的n是單元格要跨越的列數(shù)。輸入單元格的內(nèi)容。根據(jù)前面的內(nèi)容，輸入</th>或者</td>。完成表格的其余部分。如果創(chuàng)建一個(gè)跨越兩列的單元格，在該行就應(yīng)該少定義一個(gè)單元格；如果創(chuàng)建了一個(gè)跨越三列的單元格，在該行就應(yīng)該少定義兩個(gè)單元格。...<body><table> <caption>TV Schedule</caption> <thead>  <tr> <th scope="rowgroup">Time</th> <th scope="col">Mon</th> <th scope="col">Tue</th> <th scope="col">Wed</th> </tr> </thead> <tbody>  <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;}

讓單元格跨越兩個(gè)或兩個(gè)以上行的步驟

在需要定義跨越一個(gè)以上的行的單元格的地方，如果為標(biāo)題單元格，輸入<th后加一個(gè)空格，否則輸入<td后加一個(gè)空格。輸入rowspan="n">，這里的n是單元格要跨越的行數(shù)。輸入單元格的內(nèi)容。根據(jù)前面的內(nèi)容，輸入</th>或者</td>。完成表格的其余部分。如果創(chuàng)建一個(gè)rowspan等于2的單元格，就不需要定義下一行中該單元格對(duì)應(yīng)的單元格了；如果創(chuàng)建了一個(gè)rowspan等于3的單元格，就不需要定義下面兩行中該單元格對(duì)應(yīng)的單元格了，以此類(lèi)推。

??表格中的每一行都應(yīng)該具有相同的單元格數(shù)量。跨越多列的單元格應(yīng)該算作多個(gè)單元格，它的colspan屬性值為多少就算做多少個(gè)單元格。表格中的每一列都應(yīng)該具有相同的單元格數(shù)量。跨越多行的單元格應(yīng)該算作多個(gè)單元格，它的rowspan屬性值為多少就算做多少個(gè)單元格。

為網(wǎng)頁(yè)添加javaScript

加載腳本

??腳本主要分為外部腳本和嵌入在頁(yè)面中的腳本。

加載外部腳本的方法

??輸入<script src="script.js"></script>，這里的script.js是外部腳本在服務(wù)器上的位置及文件名。應(yīng)盡量將腳本元素放在</body>結(jié)束標(biāo)簽之前，而不放在文檔的head元素里（因?yàn)檫@樣會(huì)影響頁(yè)面顯示的速率）。大多數(shù)情況下，最好在頁(yè)面的最末尾加載腳本，即</body>結(jié)束標(biāo)簽的前面。

壓縮Javascript腳本的工具

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

UglifyJS 供下載的版本及文檔在線版本

YUI ComPRessor 供下載的版本及文檔非官方的在線版本

添加嵌入腳本

??嵌入腳本位于HTML文檔內(nèi)，同嵌入樣式表很類(lèi)似。

<!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>  <script> /* Your JavaScript code goes here */ </script></body></html>

HTML and CSS 讀書(shū)筆記

本文為本人原創(chuàng)，采用知識(shí)共享 “署名-非商業(yè)性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協(xié)議進(jìn)行許可。本作品可自由復(fù)制、傳播及基于本作品進(jìn)行演繹創(chuàng)作。如有以上需要，請(qǐng)通過(guò)E-mail等方式告知，并在文章開(kāi)頭明顯位置加上署名 [ 丁學(xué)文.Blog ] 、原文鏈接及許可協(xié)議信息，并明確指出修改（如有），不得用于商業(yè)用途。謝謝合作。詳情請(qǐng)點(diǎn)擊查看許可協(xié)議及版權(quán)聲明具體內(nèi)容。

博主聯(lián)系方式： E-mail： xuewending1995@Gmail.com [ 請(qǐng)注明來(lái)意 ] GitHub： Levi.GitHub

上一篇：flex布局

下一篇：sass