1、上次課內容回顧：圖片邊框圖片邊框 邊框邊框粗細粗細border-width 邊框顏色邊框顏色border-color 邊框樣式邊框樣式border-style 邊框屬性邊框屬性border圖片縮放圖片縮放 圖片寬度圖片寬度width 圖片高度圖片高度height2022-4-8CSS基礎（四）1圖文混排圖文混排 文字環繞文字環繞float 圖片與文字的邊距圖片與文字的邊距外邊距：外邊距：margin 內邊距：內邊距：padding圖片與文字對齊方式圖片與文字對齊方式 橫向對齊方式：借助父元素的對齊方式橫向對齊方式：借助父元素的對齊方式 縱向對齊方式縱向對齊方式top/middle/bottom

2、/baseline/text-bottom/text-top/middle/sub/super/像素值像素值2022-4-8CSS基礎（四）2上次課內容回顧：上次課內容回顧：背景顏色背景顏色background-color背景圖像背景圖像background-image背景圖像平鋪背景圖像平鋪background-repeat背景圖像位置背景圖像位置background-position背景圖片位置固定背景圖片位置固定background-attachment2022-4-8CSS基礎（四）312.7 使用滑動門技術的標題對于這樣標題寬度不固定，需要變化寬度，而同時要對于這樣標題寬度不固定，需

3、要變化寬度，而同時要保證花紋在左右兩端，需要使用保證花紋在左右兩端，需要使用“滑動門技術滑動門技術”。所謂所謂“滑動門滑動門”，就是兩個嵌套的元素，各自使用一，就是兩個嵌套的元素，各自使用一個背景圖像，二者中間部分重疊，兩端不重疊，這樣個背景圖像，二者中間部分重疊，兩端不重疊，這樣左右兩端的花紋就可以都被顯示出來，中間部分的寬左右兩端的花紋就可以都被顯示出來，中間部分的寬度可以自動適應，因此寬度變化時依然可以保證左右度可以自動適應，因此寬度變化時依然可以保證左右兩端的圖案不變。兩端的圖案不變。2022-4-8CSS基礎（四）4知識要點知識要點u用用CSSCSS設置表格樣式設置表格樣式u控制表格

4、控制表格u美化表格美化表格u制作案例制作案例2022-4-86CSS基礎（四）知識回顧HTML表格標記表格標記 2022-4-8CSS基礎（四）7知識回顧其他表格標記和屬性其他表格標記和屬性cellspacing cellpadding2022-4-8CSS基礎（四）8第15章 用CSS設置表格【學習目標學習目標】表格是網頁制作中使用最多的工具之一，通過表格配合表格是網頁制作中使用最多的工具之一，通過表格配合文字和精美的圖片，才能完成優秀的網頁，常用于統計文字和精美的圖片，才能完成優秀的網頁，常用于統計數據、制作調查表、無邊框表格排版等，可通過數據、制作調查表、無邊框表格排版等，可通過CSS設

5、設置表格的顏色、標題、邊框、背景等。置表格的顏色、標題、邊框、背景等。本章主要內容包括：本章主要內容包括：表格標簽表格標簽用用CSS設置表格結構設置表格結構用用CSS設置表格樣式設置表格樣式用用CSS設置表格的斑馬紋效果設置表格的斑馬紋效果92022-4-8CSS基礎（四）第15章 用CSS設置表格2022-4-810CSS基礎（四）21網頁中的表格11淘寶網商品搜索頁面淘寶網商品搜索頁面2022-4-8CSS基礎（四）網頁中的表格12得意生活網社區頁面得意生活網社區頁面2022-4-8CSS基礎（四）網頁中的表格13天涯社區網發帖頁面天涯社區網發帖頁面2022-4-8CSS基礎（四）15.1

6、 控制表格1、 表格中的標記表格中的標記表格由行、列和單元格表格由行、列和單元格3部分組成，常用標記參見部分組成，常用標記參見HTML部分。下表為表格常用元素標簽及說明部分。下表為表格常用元素標簽及說明例第例第15章章01begin.htmHTML中表格常用屬性：中表格常用屬性： border bgcolor width height cellspacing cellpadding142022-4-8CSS基礎（四）2、 設置表格的邊框設置表格的邊框邊框作為表格的分界在顯示時往往必不可少。根據不同的邊框作為表格的分界在顯示時往往必不可少。根據不同的需求，可以對表格和單元格應用不同的邊框。可以定

7、義整需求，可以對表格和單元格應用不同的邊框。可以定義整個表格的邊框也可以對單獨的單元格分別進行定義。個表格的邊框也可以對單獨的單元格分別進行定義。CSS的邊框屬性是美化表格的一個關鍵元素，利用的邊框屬性是美化表格的一個關鍵元素，利用CSS可以定可以定義各種邊框樣式。義各種邊框樣式。語法語法：樣式名：樣式名border: 屬性值；屬性值；要點要點：先設置：先設置樣式，再分別對該樣式的樣式，再分別對該樣式的和和進行設置進行設置例第例第15章章01record.htm在在table標簽中添加屬性標簽中添加屬性cellspacing=0例第例第15章章01record-2px.htm152022-4-

8、8CSS基礎（四）15.1 控制表格2、 設置表格的邊框設置表格的邊框(1) 設置單元格邊框設置單元格邊框語法：樣式名border-collapse:屬性值；說明：該樣式表示相鄰的邊框線是否合并，屬性值可為separate(默認值)或collapse(重疊)，該樣式可設置邊框為1px的細線表格例第例第15章章01record- collapse.htm(2) 相鄰邊框的合并規則相鄰邊框的合并規則見見P220CSS2規范規范下的合并規則下的合并規則例P221(3) 邊框的間距邊框的間距(單元格外邊距）單元格外邊距）語法：樣式名border-spacing:屬性值；例第例第15章章01record

9、- separate.htm補充：單元格內邊距使用padding162022-4-8CSS基礎（四）15.1 控制表格2、 設置表格的邊框設置表格的邊框172022-4-8CSS基礎（四）15.1 控制表格邊框：邊框：1 1像素，實線，像素，實線，#0058a3#0058a3；字體：字體：ArialArial；文字大小：文字大小：14px14px；注意邊框重疊的處理方式注意邊框重疊的處理方式對齊對齊方式？是否方式？是否加加粗？粗？底色底色#4bacff#4bacff、文字顏色、文字對齊方、文字顏色、文字對齊方式、加粗、內部間距式、加粗、內部間距文字大小、對齊方式、文字顏色、內文字大小、對齊方式

10、、文字顏色、內部間距部間距背景顏色：背景顏色：#eaf5ff#eaf5ff背景顏色：背景顏色：#c7e5ff#c7e5ff3、確定表格的寬度、確定表格的寬度CSS表格寬度分為表格寬度分為“自動方式自動方式”和和“固定方式固定方式”兩種兩種語法語法：樣式名：樣式名table-layout:屬性值；屬性值；width:值；值；說明說明：屬性值可為：屬性值可為auto(自動自動)或或fixed(固定固定)例第例第15章章03中的日歷采用了固定方式中的日歷采用了固定方式182022-4-8CSS基礎（四）15.1 控制表格4、其他與表格相關的標記、其他與表格相關的標記(1) 劃分結構表格劃分結構表格標

11、簽標簽、和和基本語法：基本語法： 說明說明：在：在CSS樣式表中可分別對樣式表中可分別對、和和中的中的設置不同的樣式，設置不同的樣式， 如：如：tbody th屬性名：屬性值；屬性名：屬性值；192022-4-8CSS基礎（四）15.1 控制表格4、其他與表格相關的標記、其他與表格相關的標記(2) 劃分劃分列列結構結構標簽標簽在在CSS樣式表中可單獨對某些列設置不同的樣式樣式表中可單獨對某些列設置不同的樣式IE瀏覽器下：瀏覽器下：如：如： 注意注意：firefox瀏覽器不支持瀏覽器不支持202022-4-8CSS基礎（四）15.1 控制表格2022-4-8CSS基礎（四）2115.2 美化表格

12、2022-4-8CSS基礎（四）2215.2 美化表格capitontheadtbodytfoot15.2 美化表格15.2.1搭建搭建HTML結構結構15.2.2 整體設置整體設置 設置設置table和和table caption的樣式的樣式15.2.3 設置單元格樣式設置單元格樣式 設置設置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的樣式的樣式15.2.4 斑馬紋效果斑馬紋效果 設置設置tbody tr.even樣式并對所有偶數行應用該樣式樣式并對所有偶數行應用該樣式例第例第15章章02table-0.htm15.2.5 設置列樣式設置列樣式 在在標簽后

13、添加六個標簽后添加六個標記，并設置標記，并設置col.center和和col.right兩種樣式，且應用在不同列標簽兩種樣式，且應用在不同列標簽中中例第例第15章章02table-1-ie.htm232022-4-8CSS基礎（四）15.3 案例-日歷例第例第15章章03 calendar.htm例例CSS表格范例表格范例242022-4-8CSS基礎（四）2022-4-8CSS基礎（四）2515.3 案例-日歷15.3.1搭建搭建HTML結構結構15.3.2 設置整體樣式和表頭樣式設置整體樣式和表頭樣式 設置設置table和和table caption的樣式的樣式15.3.3 設置日歷單元格樣式設置日歷單元格樣式 設置設置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的樣式的樣式例第例第15章章03table-1-ie.htm2022-4-8CSS基礎（四）2615.3 案例-日歷說明：說明：padding的順序的順序 padding: 10px 5px 15px 20px; 上、右、下、左上、右、下、左 padding: 10px 5px 15px; 上、上