1、11 設(shè)計(jì)表格樣式,表格描述了數(shù)據(jù)間的關(guān)系，從本質(zhì)上來分析，表格是數(shù)據(jù)存儲(chǔ)的一種最優(yōu)化模型（即關(guān)系模型），而不是布局的工具。本章將詳細(xì)講解數(shù)據(jù)表格的樣式設(shè)計(jì)。主要包括： 表格基本樣式。 表格布局模型。 表格高級(jí)樣式設(shè)計(jì)。 表格樣式實(shí)戰(zhàn)。,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.1 使用表格屬性設(shè)計(jì)樣式（示例：11-1.html）,下面這些屬性在標(biāo)準(zhǔn)布局中依然被支持。,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.2 使用CSS設(shè)計(jì)表格邊框,CSS的border屬性，可以為table和td元

2、素定義任意邊上的邊框樣式。（11-2.html） border-collapse：邊框合并為單一邊框線。該屬性取值包括separate（單元格邊框相互獨(dú)立）和collapse（單元格邊框相互合并）。 table /* 合并單元格邊框 */ border-collapse:collapse; （11-3.html）,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.3 單元格分離和補(bǔ)白樣式,為了兼容傳布布局中cellspacing屬性，CSS定義了border-spacing屬性，該屬性能夠分離單元格間距。取值包含1個(gè)或2個(gè)值。當(dāng)定義一個(gè)值時(shí)，則定義

3、單元格行間距和列間距都為該值。例如： table /* 分隔單元格邊框 */ border-spacing:20px; 如果分別定義行間距和列間距，就需要定義兩個(gè)值，例如： table /* 分隔單元格邊框 */ border-spacing:10px 30px; 11-5.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.3 單元格分離和補(bǔ)白樣式,使用該屬性分離單元格時(shí)，讀者應(yīng)注意三個(gè)問題： 第一，IE瀏覽器不支持該屬性，要定義相同效果的樣式，這就需要同時(shí)結(jié)合傳統(tǒng)的cell-spacing屬性來設(shè)置。 第二，當(dāng)使用cell-spacin

4、g屬性時(shí)，應(yīng)確保數(shù)據(jù)單元格之間的相互獨(dú)立性，不能夠使用border-collapse:來定義合并單元格邊框。 第三，cell-spacing屬性不能夠使用CSS的margin屬性來代替。對(duì)于td元素來說，不支持margin屬性。,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.3 單元格分離和補(bǔ)白樣式,但是我們可以為單元格定義補(bǔ)白，此時(shí)padding屬性與單元格的cellpadding屬性是功能相同。例如，下面樣式為表格單元格定義20像素補(bǔ)白空間。 th, td /* 為單元格定義補(bǔ)白 */ border:solid 1px #000; padd

5、ing:20px; 11-6.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.4 空單元格顯示處理,如果表格單元格的邊框處于分離狀態(tài)（即單元格邊框處于非合并狀態(tài)下），我們可以使用CSS提供的empty-cells屬性來控制空單元格是否顯示。empty-cells屬性取值包括show和hide。 11-7.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.4 空單元格顯示處理,在使用empty-cells屬性時(shí)，讀者應(yīng)注意三個(gè)問題： 第一，empty-cells屬性控制了沒有可視內(nèi)容

6、的單元格周圍邊框的顯示。所謂沒有可視內(nèi)容，就是單元格內(nèi)包含內(nèi)容不可見，或者單元格不包含任何內(nèi)容，如果單元格的visibility屬性定義為hidden，則都被認(rèn)為是沒有可視內(nèi)容?？梢晝?nèi)容包括“”，以及其它空白。但是不包括ASCII字符中的回車符（“0D”）、換行符（“0A”）、Tab鍵（“09”）和空格鍵（“20”）。 第二，如果表格數(shù)據(jù)行中所有單元格的empty-cells屬性取值都為hide，而且都沒有任何可視內(nèi)容，那么整行就等于設(shè)置了display: none。 第三，標(biāo)準(zhǔn)瀏覽器默認(rèn)顯示空單元格的邊框。但是IE瀏覽器不支持該標(biāo)準(zhǔn)屬性，且始終不會(huì)顯示空單元格的邊框。,樣吧視頻教室（）,網(wǎng)頁

7、制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.1 表格基本樣式設(shè)計(jì),11.1.5 單元格數(shù)據(jù)水平和垂直對(duì)齊,數(shù)據(jù)對(duì)齊方式一直是布局的重中之重，要控制表格中數(shù)據(jù)的顯示位置，可以使用CSS提供的text-align和vertical-align屬性，其中text-align屬性控制數(shù)據(jù)在單元格中水平對(duì)齊方式，而vertical-align屬性控制數(shù)據(jù)在單元格中垂直對(duì)齊方式。 11-8.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.1 表格布局模型,表格布局模型是建立在數(shù)據(jù)表格的結(jié)構(gòu)模型基礎(chǔ)之上的呈現(xiàn)模型。我們知道一個(gè)完整的表格結(jié)構(gòu)包

8、含一個(gè)可選的標(biāo)題以及任意行的單元格。當(dāng)多行單元格被構(gòu)建，則根據(jù)表格結(jié)構(gòu)模型，會(huì)自動(dòng)派生出列，每行中第1個(gè)單元格屬于第1列，第2個(gè)屬于第2列，依此類推。行和列可以在結(jié)構(gòu)上被分組，并利用這個(gè)分組我們可以使用CSS控制多行或多列的顯示樣式。簡(jiǎn)單說，表格結(jié)構(gòu)模型包含了表格、標(biāo)題、行、行組、列、列組和單元格。,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.1 表格布局模型,CSS使用display屬性定義了各種對(duì)應(yīng)的顯示模型（即顯示類型）： table：定義一個(gè)塊狀表格，表現(xiàn)為一個(gè)長(zhǎng)方形的塊，并參與塊格式化內(nèi)容。 inline-table：定義

9、一個(gè)行內(nèi)表格，表現(xiàn)為一個(gè)長(zhǎng)方形的塊，并參與行內(nèi)格式化內(nèi)容。 table-row：定義一個(gè)元素為單元格組成的行。 table-row-group：定義一個(gè)元素將一行或多行分組。 table-header-group：與table-row-group功能類似，但是該行組總在所有其它行、其它行組前顯示，但在任何頂置標(biāo)題之后顯示。 table-footer-group：與table-row-group功能類似，但是該行組總在所有其它行、其它行組之后顯示，但在任何底置標(biāo)題之前顯示。 table-column：定義一個(gè)元素描述了單元格列。 table-column-group：定義一個(gè)元素將一列或多列分組

10、。 table-cell：定義一個(gè)元素代表了一個(gè)單元格。 table-caption：定義了表格的標(biāo)題。,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.1 表格布局模型,HTML 4.0版本開始默認(rèn)規(guī)定了每一種表格元素的對(duì)應(yīng)顯示模型： TABLE display: table TR display: table-row THEAD display: table-header-group TBODY display: table-row-group TFOOT display: table-footer-group COL displa

11、y: table-column COLGROUP display: table-column-group TD, TH display: table-cell CAPTION display: table-caption 示例：11-9.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.2 數(shù)據(jù)列和行的樣式,根據(jù)表格布局模型，單元格應(yīng)該從屬于行，而不是列，或者說單元格是行的子對(duì)象，但絕對(duì)不是列的子對(duì)象，不過根據(jù)表格布局模型，多個(gè)同列的單元格可以組合為一個(gè)列，我們可以形象的把它比作列集合。 列和列組元素所支持的標(biāo)準(zhǔn)屬性包括如下。

12、border：定義指定列或列組的邊框。只有當(dāng)table被定義了border-collapse:collapse聲明時(shí)，border屬性才有效。 background：定義指定列或列組中單元格的背景，但是只有單元格和行設(shè)置了透明背景時(shí)適用。 width：定義指定列或列組的最小寬度。 visibility：如果當(dāng)設(shè)置一個(gè)列的visibility為collapse，那么該列中所有的單元格都不會(huì)被渲染，而延伸到其它列的單元格將被剪裁。另外，表格的寬度也會(huì)相應(yīng)減少該列本應(yīng)占據(jù)的寬度。 IE不支持列的邊框樣式，而非IE瀏覽器不支持上面所列之外的任何屬性。 示例：11-10.html,樣吧視頻教室（）,網(wǎng)頁

13、制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.2 數(shù)據(jù)列和行的樣式,對(duì)于表格行的控制，操作相對(duì)要簡(jiǎn)單許多。要控制單行樣式，這時(shí)需要控制tr元素即可；要控制多行樣式，這時(shí)需要使用tbody、tfoot、thead元素對(duì)數(shù)據(jù)行進(jìn)行分組，然后通過這些行組元素來控制多行數(shù)據(jù)的樣式。 示例： 11-11.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.3 表格標(biāo)題的樣式,表格是一種特殊的布局模型，不管表格是否包含一個(gè)有形的外框，它的所有元素都將被裝在一個(gè)匿名框中，table元素產(chǎn)生的匿名框可以包含表

14、格框本身（數(shù)據(jù)框）、標(biāo)題框（如果定義）。這些表格匿名框內(nèi)的包含框是相互獨(dú)立的，它們都獨(dú)自包含自身的內(nèi)容，擁有獨(dú)自的補(bǔ)白、邊界和邊框區(qū)域。匿名框的大小以包含兩者的最小尺寸為準(zhǔn)，垂直邊距在表格框和標(biāo)題框相交處重合。移動(dòng)表格也將自動(dòng)移動(dòng)標(biāo)題框。 表格標(biāo)題樣式：caption-side，定義標(biāo)題的顯示位置，該屬性取值包括top（位于表格框的上面）、bottom（位于表格框的下面）、left（位于表格框的左側(cè)）、right（位于表格框的右側(cè)）。如果要水平對(duì)齊標(biāo)題則可以使用text-align屬性。對(duì)于左右兩側(cè)的標(biāo)題，可以使用vertical-align屬性進(jìn)行垂直對(duì)齊，取值包括top、middle和bo

15、ttom，其它取值無效，默認(rèn)為top。 示例： 11-12.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.4 合并單元格,合并單元格是一種特殊的樣式操作，CSS暫時(shí)還沒有支持該功能，不過由于單元格合并在表格樣式設(shè)計(jì)中很重要，所以我們簡(jiǎn)單介紹一下如何利用表格單元格td元素的自身屬性來實(shí)現(xiàn)合并顯示。 如果要合并多列單元格，可以使用colspan屬性 如果要合并多行單元格，可以使用rowspan屬性 示例： 11-14.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.

16、2.5 數(shù)據(jù)表格內(nèi)元素層疊優(yōu)先級(jí),由于用戶可以同時(shí)為table、tr和td等元素定義背景色、邊框、字體屬性等樣式，這時(shí)就很容易發(fā)生相同樣式重疊沖突問題。為此我們需要了解表格布局模型中元素間的層疊覆蓋順序。 示例： 11-15.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.2 表格布局模型和高級(jí)樣式設(shè)計(jì),11.2.5 數(shù)據(jù)表格內(nèi)元素層疊優(yōu)先級(jí),邊框覆蓋的規(guī)則和順序： 如果定義了border-style:hidden;，那么它的優(yōu)先級(jí)高于任何其它相沖突的邊框。任何邊框只要有該取值，將覆蓋該位置的所有邊框。通俗說如果邊框被定義為隱藏顯示，這其他任何重疊聲明都是無效的。 如

17、果定義了border-style:none;，那么它的優(yōu)先級(jí)是最低的。只有在該邊匯集的所有元素的邊框?qū)傩远际莕one，該邊框才會(huì)被省略，元素的邊框默認(rèn)值為none。 更寬的邊框?qū)⒏采w相對(duì)較窄的邊框。如果若干邊框的border-width屬性值相同，那么樣式的優(yōu)先順序?qū)⒏鶕?jù)邊框樣式類型排序（排在前面的優(yōu)先級(jí)最高）： double、solid、dashed、dotted、ridge、outset、groove和inset 4. 如果邊框樣式只有顏色上的區(qū)別，那么樣式的優(yōu)先順序?qū)⒏鶕?jù)元素類型進(jìn)行排序（排在前面的優(yōu)先級(jí)最高）： td、tr、thead（或tbody、tfoot）、col、colgrou

18、p和table 示例： 11-16、17.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.3 表格樣式設(shè)計(jì)實(shí)戰(zhàn),11.3.1 清新悅目的數(shù)據(jù)表樣式,本示例數(shù)據(jù)表格樣式比較清秀，特別適合顯示大批量數(shù)據(jù)，該樣式的設(shè)計(jì)考慮到閱讀大批量數(shù)據(jù)所特有的樣式風(fēng)格，即以柔和的色調(diào)設(shè)計(jì)風(fēng)格，避免長(zhǎng)期集中注意力易引起的視覺疲倦。 整個(gè)表格樣式設(shè)計(jì)有三個(gè)技巧： 技巧一，表格色調(diào)以清淡為住，不刺激眼睛，但是又能夠準(zhǔn)確區(qū)分?jǐn)?shù)據(jù)行和列。邊框線以淡藍(lán)色為主色調(diào)，并配以12像素的灰色字體，營造一種精巧設(shè)計(jì)效果。其設(shè)計(jì)重點(diǎn)在于色調(diào)搭配上。 技巧二，以隔行變色的技巧來分行顯示數(shù)據(jù)，這也是目前數(shù)據(jù)表的主流樣式，它符合視線的換行顯示，避免錯(cuò)行閱讀數(shù)據(jù)。 技巧三，通過輕微的漸變背景圖像來設(shè)計(jì)表格列標(biāo)題，使表格看起來更大方，富有立體感。 示例： 11-18.html,樣吧視頻教室（）,網(wǎng)頁制作與網(wǎng)站開發(fā)從入門到精通配套視頻,11.3 表格樣式設(shè)計(jì)實(shí)戰(zhàn),11.