国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

CastlePeaK / 1624人閱讀

摘要：表格結構化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認為為整個單元格添加一個標題有助于訪問者理解該表格，可以提供。輸入單元格的內容。表格中的每一列都應該具有相同的單元格數量。

HTML表格 結構化表格

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

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


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

...



    Quarterly Financials for 1962-1964 (in Thousands)
    

        1962
        1963
        1964
    

    

        $145
        $167
        $161
    

    

        $140
        $159
        $164
    

    

        $153
        $162
        $168
    

    

        $157
        $160
        $171


??下面這段程序中，thead、tbody和tfoot顯示的定義了表格的不同部分。接著在每行的開頭添加了th元素。tbody和tfoot中的th設置了scope="row"，表明它們是行標題。

...



    Quarterly Financials for 1962-1964
 (in Thousands)
     
        

            Quarter
            1962
            1963
            1964
        

    
     
        

            Q1
            $145
            $167
            $161
        

        

            Q2
            $140
            $159
            $164
        

        

            Q3
            $153
            $162
            $168
        

        

            Q4
            $157
            $160
            $171
        
                        
    
     
        

            TOTAL
            $595
            $648
            $664

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


讓單元格跨越多列或多行

??可以通過colspan和rowspan屬性讓th或td跨越一個以上的列或行。

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

在需要定義跨越一個以上的列的單元格的地方，如果為標題單元格，輸入后加一個空格，否則輸入后加一個空格。

輸入colspan="n">，這里的n是單元格要跨越的列數。

輸入單元格的內容。

根據前面的內容，輸入或者。

完成表格的其余部分。如果創建一個跨越兩列的單元格，在該行就應該少定義一個單元格；如果創建了一個跨越三列的單元格，在該行就應該少定義兩個單元格。

...



    TV Schedule
     
        

            Time
            Mon
            Tue
            Wed
        

    
     
        

            8 pm
            Staring Contest
            Celebrity Hoedown
        

        

            9 pm
            Hardy, Har, Har
            What"s for Lunch?
            Screamfest Movie of the Weak
        

        

            10 pm
            Healers, Wheelers & Dealers
            It"s a Crime
        

        




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


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

在需要定義跨越一個以上的行的單元格的地方，如果為標題單元格，輸入后加一個空格，否則輸入后加一個空格。

輸入rowspan="n">，這里的n是單元格要跨越的行數。

輸入單元格的內容。

根據前面的內容，輸入或者。

完成表格的其余部分。如果創建一個rowspan等于2的單元格，就不需要定義下一行中該單元格對應的單元格了；如果創建了一個rowspan等于3的單元格，就不需要定義下面兩行中該單元格對應的單元格了，以此類推。

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


為網頁添加JavaScript 加載腳本

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


加載外部腳本的方法

??輸入，這里的script.js是外部腳本在服務器上的位置及文件名。應盡量將腳本元素放在結束標簽之前，而不放在文檔的head元素里（因為這樣會影響頁面顯示的速率）。大多數情況下，最好在頁面的最末尾加載腳本，即結束標簽的前面。


壓縮JavaScript腳本的工具

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

UglifyJS
供下載的版本及文檔

在線版本

YUI Compressor
供下載的版本及文檔

非官方的在線版本


添加嵌入腳本

??嵌入腳本位于HTML文檔內，同嵌入樣式表很類似。




    
    Adding an Embedded Script
    


    
... All of your HTML content is here ...

    
See the HTML code regarding how to embed JavaScript directly before the  end tag.


HTML and CSS 讀書筆記

歡迎來我的博客，在那會有更多更新：Levi.Blog


本文為本人原創，采用 知識共享 “署名-非商業性使用-相同方式共享” 4.0 (CC BY-NC-SA 4.0)”許可協議 進行許可。
本作品可自由復制、傳播及基于本作品進行演繹創作。如有以上需要，請通過E-mail等方式告知，并在文章開頭明顯位置加上署名  [丁學文 ] 、原文鏈接及許可協議信息，并明確指出修改（如有），不得用于商業用途。謝謝合作。詳情請點擊查看許可協議及版權聲明具體內容。

聯系方式：
E-mail： xuewending1995@gmail.com [ 請注明來意 ]
GitHub： Levi.GitHub

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111779.html

相關文章

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

    摘要：表格結構化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認為為整個單元格添加一個標題有助于訪問者理解該表格，可以提供。輸入單元格的內容。表格中的每一列都應該具有相同的單元格數量。 HTML表格 結構化表格 ??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標題單元格（th）或數據單元格（td），或者同時包含這兩種單元格。如果認為為整...

    Ververica 評論0 收藏0

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

    摘要：表格結構化表格從基本層面看，元素是由行組成的，行又是由單元格組成的。如果認為為整個單元格添加一個標題有助于訪問者理解該表格，可以提供。輸入單元格的內容。表格中的每一列都應該具有相同的單元格數量。 HTML表格 結構化表格 ??從基本層面看，table元素是由行組成的，行又是由單元格組成的。每個行（tr）都包含標題單元格（th）或數據單元格（td），或者同時包含這兩種單元格。如果認為為整...

    MarvinZhang 評論0 收藏0

  • 重學前端學習筆記（三）--前端知識框架圖

    摘要：筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄，每天分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入的專欄學習原文有的語音，如有侵權請聯系我，郵箱。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以...

    xingqiba 評論0 收藏0

  • 重學前端學習筆記（三）--前端知識框架圖

    摘要：筆記說明重學前端是程劭非前手機淘寶前端負責人在極客時間開的一個專欄，每天分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入的專欄學習原文有的語音，如有侵權請聯系我，郵箱。 筆記說明 重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以...

    bbbbbb 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<