HTML5+CSS3網(wǎng)頁設(shè)計實例教程-第4章-表格與列表

1、第4章 表格與列表本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容第2頁本章概述表格以行和列顯示信息，它們被普遍用于顯示所有適合網(wǎng)格結(jié)構(gòu)的數(shù)據(jù)，如列車時刻表、電視節(jié)目表、財務(wù)報告以及體育賽事結(jié)果。列表可以有序地編排一些信息資源，使其結(jié)構(gòu)化和條理化，以方便瀏覽者更加快捷地獲取信息。本章將主要介紹何時使用表格以及創(chuàng)建它們所需要的標(biāo)記。本章還介紹如何在HTML中創(chuàng)建3種類型的列表。第3頁本章的學(xué)習(xí)目標(biāo)了解表格的概念及在HTML中使用的方法掌握基本表格元素與特性了解創(chuàng)建易訪問表格的方法掌握各種形式列表的實現(xiàn)第4頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表

2、格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第5頁4.1 表格介紹想要使用表格，需要以“網(wǎng)格”(grid)模式去思考。表格由行和列所組成第6頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第7頁4.2 基本表格元素與特性前面已經(jīng)介紹了基本表格是如何工作的，本節(jié)將對這些元素稍微加以描述，并將介紹它們可包含的特性。其中一些特性可用于創(chuàng)建更加復(fù)雜的表格布局。第8頁元素創(chuàng)建表格元素是所有表格的包含元素。它可以包含以下特性：所有通用特性面向腳本的

3、基本事件特性dir特性元素包含表格行與元素表示表格單元colspan特性headers特性rowspan特性scope特性第9頁創(chuàng)建基本表格我們已經(jīng)了解了表格的基礎(chǔ)元素與特性，現(xiàn)在可以創(chuàng)建一個顯示關(guān)于Example Caf經(jīng)營時間信息的表格。展示營業(yè)時間的表格第10頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第11頁4.3 為表格添加標(biāo)題無論表格是用于顯示某特定試驗的結(jié)果還是某一特定市場的股票指數(shù)，抑或今晚的電視節(jié)目？每一個表格都應(yīng)該擁有一個標(biāo)題，這樣網(wǎng)站訪問

4、者才能知道表格的用途。即使周圍的文本描述了表格的內(nèi)容，使用元素賦予表格一個正式的標(biāo)題仍然是一項良好的習(xí)慣。默認(rèn)情況下，多數(shù)瀏覽器在表格之上的中央位置顯示該元素的內(nèi)容。第12頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)4.4 表格區(qū)域分組使用rowspan及colspan特性使單元跨越多個行或列。將表格分割為三個區(qū)域：表頭、表體以及表尾。使用元素對列分組。使用元素在不相關(guān)列之間共享特性。第13頁使用colspan特性跨越列對于及元素，二者都可以包含一個叫做col

5、span的特性，該特性使表格單元可以跨越多于一個列。第14頁有三個列的表格使用rowspan特性跨域行rowspan特性的作用于colspan特性很類似，只是它在相反的方向上工作：rowspan使單元可以縱向跨越單元行。第15頁rowspan特性的效果將表格分解為表頭、表體及表尾某些情況下，可能需要將表體（裝載大部分表格數(shù)據(jù)的地方）與表頭或者甚至表尾區(qū)分出來。第16頁本例在FireFox瀏覽器中的效果使用元素進(jìn)行列分組如果兩個或更多列是相互關(guān)聯(lián)的，則可以使用元素解釋這些列應(yīng)該被歸到同一組中。第17頁使用元素進(jìn)行列分組使用元素在列間共享樣式元素為中的列指定特性(如列內(nèi)單元的寬度與對齊方式)。與元

6、素不同，元素不隱含任何解構(gòu)性分組，因此被更多地用于呈現(xiàn)目的。第18頁使用元素在列間共享樣式第19頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第20頁4.5 嵌套表格可以在表格單元中包含標(biāo)記，只要該元素全部包含于單元內(nèi)即可。將另一個表格整體放置于一個表格單元內(nèi)，從而創(chuàng)建了一個所謂的“嵌套表格”(nested table)。一個周末活動計劃的表格第21頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.

7、6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第22頁4.6 易訪問表格表格本身可以包含大量數(shù)據(jù)，并能對這些信息提供一種很有幫助的視覺呈現(xiàn)形式。在查看一張表格時，很容易就可以通過上下左右掃描，在行與列之間找到一個特定的值，或者比較一定范圍的值。如何線性化表格在一個屏幕閱讀器被用于閱讀表格時，它通常會對其進(jìn)行線性化，意思是說閱讀器會從第一行起，自左向右朗讀行中的單元，一個接一個，直到移動到下一行之前，然后繼續(xù)這樣讀，直到閱讀器讀完了表格中的每一行。第23頁使用id、scope及headers特性在創(chuàng)建單元表頭時，在元素中添加scope特性有助于指定該表頭應(yīng)用于哪些單元。如果將

8、其賦值為row，就指定了該元素是所在行的表頭；而當(dāng)值為column時，就表明它是所在列的表頭。headers特性所扮演的角色與scope特性正相反。因為它在元素中用于指定哪些表頭對應(yīng)于該單元。該特性的值是一個由空格分隔的表頭單元id特性值列表。第24頁創(chuàng)建易訪問表格為Example Caf網(wǎng)站創(chuàng)建一個新頁面，提供一個周末烹飪課程的時間表。一共2天上午和下午的課程。第25頁一個周末烹飪課程的時間表第26頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)4.7 使用列表

9、無序列表：比如項目列表有序列表：使用有序數(shù)字或字母而非圓點(diǎn)定義列表：使你可以指定術(shù)語及其定義第27頁使用元素創(chuàng)建無序列表如果想要創(chuàng)建一個項目列表，應(yīng)該將其寫在元素中。需要寫下的每一項或每一行都應(yīng)該位于開標(biāo)簽和閉標(biāo)簽之間。第28頁列表的顯示效果有序列表在有序列表中，不是在每項前放置圓點(diǎn)，而是可以使用數(shù)字(1、2、3)、字母(A、B、C)或羅馬數(shù)字(i、ii、iii)來前置標(biāo)識它們。有序列表項位于元素中。之后每一個列表項都應(yīng)嵌套于元素內(nèi)，并且包含在開標(biāo)簽和閉標(biāo)簽之間。使用start特性修改有序列表的起始數(shù)字使用reversed特性實現(xiàn)列表順序倒數(shù)使用type特性指定序列標(biāo)記第29頁定義列表定義列表

10、是一種特殊類型的列表，它的列表項由術(shù)語和隨后的簡短文字定義或描述組成。定義列表包含在元素內(nèi)。之后在元素內(nèi)部包含了交替出現(xiàn)的和元素。第30頁定義列表列表嵌套可以在一個列表中嵌套另一列表。例如，將一個帶有獨(dú)立序列的編號列表放入一個對應(yīng)列表項中。除非使用start特性另行指定起始序列號，每一個嵌套列表都將獨(dú)立排序。每一個新列表都置于一個元素內(nèi)。第31頁列表嵌套第32頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)4.8 表格應(yīng)用實例在本例的表格上顯示了當(dāng)天的主要市場上蔬菜的市場價格信息。在設(shè)計時，主要用到了分組、表頭以及單元格合并，放入單元格文字和圖片信息等。第33頁本例在Google Chrome中瀏覽效果第34頁主要內(nèi)容4.1 表格介紹4.2 基本表格元素與特性4.3 為表格添加標(biāo)題4.4 表格區(qū)域分組4.5 嵌套表格4.6 易訪問表格4.7 使用列表4.8 表格應(yīng)用實例4.9 本章小結(jié)第35頁4.9 本章小結(jié)在本章中，介紹了表格在創(chuàng)建頁面時可以成為怎樣的強(qiáng)大工