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

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

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

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

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

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

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

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

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

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

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