java程序設(shè)計從入門到精通cssdiv網(wǎng)頁布局實戰(zhàn)手冊

1、第 9 章用CSS 美化表格表格在過去一大顯著功能是實現(xiàn)網(wǎng)頁布局，不少門戶過去都是這樣用的，后來被 CSS 逐漸取代?，F(xiàn)在，表格主要用來裝載和羅列數(shù)據(jù)，使信息表達的直觀性更強。表格在數(shù)據(jù)展現(xiàn)上，比列表的表現(xiàn)效果更加好。表格是社會重要的信息表達工具。本章來學(xué)習(xí)表格，知識點如下：一個表格的基本元素如何用 CSS 控制表格樣式表格的邊線和背景9.1表格的基本頁面元素在以前的時代，不少網(wǎng)頁設(shè)計大師都會用表格來為頁面布局，通過使用 table、tr 和 td 幾個但是表格作為數(shù)據(jù)載體使用，它包含的元素不僅僅這幾個。示例 9.1 中使用了一個語義明確的表格?！臼纠?9.1】本例子為一個簡單的公司的員工出勤

2、表，使用表格來列出所有數(shù)據(jù)，代碼如下所示：。-文件名：成績表.html-01 06成績表07 0809學(xué)生成績表131415161718語文212223 24數(shù)學(xué)27【代碼】在示例 9.1 的代碼 12 行，表格中使用了 caption 標(biāo)記，該標(biāo)記用于嵌入表格的標(biāo)題。使用 caption 嵌入的標(biāo)題“員工出勤表”會出現(xiàn)在表格的頂部。代碼第 14 行、代碼第 20 行和代碼第 26行使用了 th，其區(qū)別于 td 是內(nèi)的文字會加粗。運行結(jié)果如圖 9.1 所示。圖 9.1 使用表格實現(xiàn)員工出勤表技巧：使用caption 屬性對于搜索引擎來說是友好的。在 table中使用了 summary 屬性來嵌

3、入關(guān)于該表格的說明。Summary 中的語句不會出現(xiàn)在頁面的任何地方，但是同樣對于搜索引擎來說是友好的。在 table中也使用了 border=1來設(shè)置表格每個單的邊框。若沒有在 table中設(shè)置其border 屬性，整個 table 都不會帶邊框。若用 CSS 設(shè)置 table 的 border 屬性為 1 像素實線，則表格外框會出現(xiàn)邊框，而每個單不會出現(xiàn)邊框。在示例 9.1 中使用了多個 th。該用于表示行或列的名稱。例如，“語文”代表表格中第二行所有數(shù)據(jù)的名稱；“”代表第三列所有數(shù)據(jù)的名稱。在 XHTML 文檔中，table中還能thead、tbody 和 tfoot 三個。這三個用于區(qū)

4、分表格的不同部分。thead 代表表格的頭部，tbody 代表表格的主要數(shù)據(jù)內(nèi)容，tfoot 代表表格的底部。通常 thead用于放置表格頂部的列名稱，tbody 用于放置表格數(shù)據(jù)，tfoot 用于放置表格的說明等。【示例 9.2】是一個糖果價目表，示范如何使用以上三個劃分表格的區(qū)域?！臼纠?9.2】本例子使用 thead、tbody 和 tfoot 來劃分糖果價目表的內(nèi)容區(qū)域。thead 用于放置表格的列名稱，tbody 用于放置表格的主要數(shù)據(jù)，tfoot 用于放置整個價目表的總價，代碼如下所示：文件名：雜貨價目表.html01 06糖果價目表thead background:#e0e4ff

5、;/*設(shè)置 thead 的背景色*/ 09tbody background:#feffce;/*設(shè)置 tbody 的背景色*/tfoot background:#ffeace;/*設(shè)置 tfoot 的背景色*/2829 30【代碼】在示例 9.2 中，代碼第 17 至 23 行通過thead，設(shè)置了“商品”、“價格” 和“數(shù)量”三個字段。代碼第 24 至 45 行是表格的主體部分，使用 tbody，呈現(xiàn)了雜貨具體的數(shù)據(jù)內(nèi)容。代碼第 46 至 49 行為表格的底部，是雜貨數(shù)據(jù)的總價。thead、tbody 和 tfoot 分別設(shè)置了不同的背景顏色來區(qū)分。使用這三個區(qū)分表格的區(qū)域能令表格語義更明確

6、。運行結(jié)果如圖 9.2 所示。12 13日用品價目表商品價格數(shù)量 22電池 275 元28229水果刀3210 元33134開瓶器371 元38239指甲鉗423 元43244總價:28 元48圖 9.2 使用thead、tbody 和tfoot劃分表格區(qū)域注意：代碼第 47 行colspan 是列合并設(shè)置屬性。9.2使用 CSS 控制表格元素上一章節(jié)，了解了表格創(chuàng)建，現(xiàn)在一起學(xué)習(xí)如何通過 CSS 修飾表格，設(shè)置出需要的表格樣式。一般的表格在呈現(xiàn)數(shù)據(jù)時，顯得枯燥，好的設(shè)計可以提高閱覽性。9.2.1設(shè)置表格的大小以前在沒有 CSS 的時候，設(shè)置表格寬度時，需要為 table添加屬性和屬性值，代碼

7、顯得非常臃腫，可讀性差?，F(xiàn)在使用 CSS 的width 屬性就能設(shè)置表格元素的寬度。通常使用像素值和百分比來設(shè)置表格元素的寬度。對【示例 9.2】中的整個表格設(shè)置寬度為 500 像素，CSS 代碼如下所示：所得的表格如圖 9.3 所示。圖 9.3 設(shè)置表格寬度為 400 像素對【示例 9.2】中的整個表格設(shè)置寬度為 80%，CSS 代碼如下所示：所得的表格如圖 9.4 所示。tablewidth:80%;/*表格寬度設(shè)置為 80%*/tablewidth:400px;/*表格設(shè)置寬度為 500 像素*/圖 9.4 設(shè)置表格寬度為 80%用百分比設(shè)置表格的寬度，表格的寬度會根據(jù)其父元素的寬度來設(shè)

8、置寬度。在【示例 9.2】中，表格的父元素是 body，使用百分比設(shè)置表格寬度后，表格的寬度就會自適應(yīng)瀏覽器的寬度。所以當(dāng)放大瀏覽器時，表格也會隨之放大到網(wǎng)頁的寬度的 80%。技巧：對于表格其他元素也可以使用像素值和百分比來設(shè)置寬度。9.2.2表格邊框的分開與合并很多時候，為了讓表格看上去精美，而去掉單的邊框。例如希望得到如 excel 中的單線表格，就要使用 CSS 的 border-collapse 屬性，其通用語法如下：border-collapse 有兩個值可選，默認值為 separate。設(shè)置為 collapse 后，單一起?！臼纠?9.3】將【示例 9.2】中的表格的 border

9、-collapse 設(shè)置為collapse。設(shè)置屬性后就能去除表格單邊框間的空隙，其中 CSS 代碼如下所示： table border-collapse:collapse; width:80%;/*表格的邊框合并，寬度設(shè)置為 80%*/運行結(jié)果如圖 9.5 所示。中的邊框就會在圖 9.5 設(shè)置表格的border-collapse 值為collapse9.2.3表格內(nèi)的文字位置設(shè)計網(wǎng)頁的時候，常常遇到瀏覽器不兼容，例如使用 div 等典型的塊元素，當(dāng)內(nèi)容超出border-collapse:separate/collapse;/*表格的邊框設(shè)置為分離或合并*/元素定義的高度時，在 Firefox

10、17.0 瀏覽器中，元素并不能自動增加高度來適應(yīng)內(nèi)容。但是在表格中，卻可以實現(xiàn)這種自動適應(yīng)內(nèi)容的效果?！臼纠?9.4】是一個表格中的內(nèi)容高度大于表格定義的高度的示例，其代碼如下所示。【代碼】代碼第 7 至 12 行設(shè)置了表格樣式，其中第 11 行屬性 border-collapse 設(shè)置為 collapse值，合并邊框。代碼第 13 至 14 行設(shè)置了列邊框，為了突顯兩個表格的差異。示例效果如圖 9.6 所示。圖 9.6 單自動適應(yīng)內(nèi)容的示例此時在 IE 瀏覽器和 Firefox17.0 瀏覽器中，都顯示和圖 9.6 相同的效果。這也解釋了，為什么使用表格不會出現(xiàn)兼容。文件名：表格內(nèi)的文字位置

11、.html01表格內(nèi)的文字位置tablefloeft;/*左浮動*/ 09width:100px;height:50px;border-collapse:collapse;/*合并單的邊框*/background:#eeeeee;tdborder:1px solid #333333;/*邊框?qū)嵕€，1 像素寬度，淺黑色*/網(wǎng)頁設(shè)計21網(wǎng)頁設(shè)計中關(guān)于表格中的內(nèi)容和表格大小之間的關(guān)系。 269.3控制表格的邊線和背景很多時候為了讓表格數(shù)據(jù)看上去柔和，常常會為表格設(shè)置適當(dāng)?shù)谋尘吧?。表格如何設(shè)置背景色是這一節(jié)的主要內(nèi)容。至于邊線知識，前面章節(jié)已有介紹，這里不再重復(fù)。首先看表格的【示例 9.5】，其代碼如

12、下所示?！敬a】這是一個兩行兩列的表格，總共有四個單。根據(jù)嵌套元素的背景顯示規(guī)律，如果要給所有的單定義一種背景色，可以通過控制 table 的屬性來實現(xiàn)。因為 tr 和 td 都是 table 的子元素，只要子元素中，沒有背景顏色，則默認為透明。同樣的道理，如果要控制某一行的顏色，就可以在 tr 中定義背景顏色。如果要控制某一個單的顏色，則只能在該單中，定義獨立的樣式了。【示例 9.6】是一個關(guān)于表格邊線和背景修飾的示例，其代碼如下所示。文件名：控制表格的邊線和背景.html01控制表格的邊線和背景tablewidth:400px;height:100px;border-collapse:collapse;/*合并單的邊框*/background:#eeeeee;tdborder:1px solid #333333;/*設(shè)置單的邊框為 1 像素的灰色實線*/.line1background:#cccccc;22 25 26文件名：控制表格的邊線和背景.html04 07 08【代碼】在該樣式中，首先在代碼第 10 行使用 border-collapse 屬性，合并所有單的邊線。然后在代碼第 12 至 13 行，為 td 中定義邊框，制作出一個像素寬的邊線。接著代碼第 11 行在 table 中