另發表于Levi.Blog和oschina
??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標題單元格（th）或數據單元格（td），或者同時包含這兩種單元格。如果認為為整個單元格添加一個標題有助于訪問者理解該表格，可以提供caption。scope屬性（是可選的，但推薦使用）可告訴屏幕閱讀器和其他輔助設備當前的th是列表的標題單元格（使用scope="col"）還是行的標題單元格（使用scope="row"），抑或是用于其他目的的單元格。
??在默認情況下，表格在瀏覽器中呈現的寬度是其中的信息在頁面可用空間里所需的最小寬度，也可以用CSS改變表格的格式?？梢酝ㄟ^在每行開頭添加一個th元素為每個行添加標題單元格。列標題應設置scope="col"，而每個行的th（位于td之前）則應設置scope="row"。
??在默認情況下，th文本是以粗體顯示的，th和caption文本都是居中對齊的，表格的寬度就是內容所需的寬度。
??下面這段程序中，thead、tbody和tfoot顯示的定義了表格的不同部分。接著在每行的開頭添加了th元素。tbody和tfoot中的th設置了scope="row"，表明它們是行標題。
??上面程序中的thead元素可以顯示的將一行或多行標題標記為表格的頭部。tbody元素用于包圍所有的數據行。tfoot元素可以顯示的將一行或多行標記為表格的尾部。可以使用tfoot包圍對列的計算值，也可以在長表格（如列車時刻表）中使用tfoot重復thead元素的內容。以上三個元素不影響表格的布局也不必需。如果包含了thead或tfoot，則必須同時包含tbody。此外還可以對它們添加樣式。 ??如果table是嵌套在figure元素內除figcaption以外的唯一元素，則可以省略caption，使用figcaption對表格進行描述。 ??可以通過scope屬性指定th為一組列的標題（使用scope="colgroup"），或者為一組行的標題（使用scope="rowgroup"）。
??可以通過colspan和rowspan屬性讓th或td跨越一個以上的列或行。
讓單元格跨越兩個或兩個以上列的步驟
在需要定義跨越一個以上的列的單元格的地方，如果為標題單元格，輸入<th后加一個空格，否則輸入<td后加一個空格。輸入colspan="n">，這里的n是單元格要跨越的列數。輸入單元格的內容。根據前面的內容，輸入</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屬性值為多少就算做多少個單元格。
??腳本主要分為外部腳本和嵌入在頁面中的腳本。
??輸入<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 讀書筆記
本文為本人原創，采用 知識共享 “署名-非商業性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協議 進行許可。 本作品可自由復制、傳播及基于本作品進行演繹創作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名 [ 丁學文.Blog ] 、原文鏈接及許可協議信息，并明確指出修改（如有），不得用于商業用途。謝謝合作。 詳情請點擊查看許可協議及版權聲明具體內容。
博主聯系方式： E-mail： xuewending1995@Gmail.com [ 請注明來意 ] GitHub： Levi.GitHub
新聞熱點
疑難解答
