第12講使用CSS設置表格樣式_第1頁
第12講使用CSS設置表格樣式_第2頁
第12講使用CSS設置表格樣式_第3頁
第12講使用CSS設置表格樣式_第4頁
第12講使用CSS設置表格樣式_第5頁
已閱讀5頁，還剩9頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第十二講使用CSS美化表格1復習回顧在HTML中，每個元素都可以看成？盒子模型擁有哪些屬性？這些屬性默認情況下值是多少？如何對盒子進行控制？有那兩種方法？2掌握表格的常用屬性了解表格的額外屬性表格邊框合并、分離案例一：隔行變色案例二：鼠標經過時變色的表格案例三：日歷本講目標3新課引入前面部分，我們了解到了CSS對文字、圖片、背景顏色與圖像的控制。表格在網頁中也起到非常重要的作用。表格常用于顯示數據，有時也用來排版。

提示：雖然我們一直強調網頁的布局形式應該是DIV+CSS，但并不是所有的布局都應該如此，在某些時候表格布局更為便利?。。?表格回顧行<tr></tr>列單元格<td></td>5表格標記表格三個常用的標記有：tabletdtr我們來了解新的用于表格的標記：

名稱描述caption定義表格的名稱thead定義表頭tbody定義表格的內容區(qū)，可以有多個tfoot定義表格頁腳th定義表頭的單元格這些名稱在傳統(tǒng)的表格設計上幾乎沒有被使用，但在符合Web標準的CSS布局中卻非常實用。6<tableborder="2"cellpadding="2"cellspacing="2"bgcolor="#eeeeee">

<caption>期中考試成績單</caption>

用于定義表格大標題<thead> 用于定義表格的頭部<th>姓名</th><th>物理</th>……</thead><tbody> 用于定義表格具體內容<tr><th>牛小頓</th><td>32</td><td>17</td></tr></tbody></table>案例演示7表格邊框border的美化發(fā)現，某些單元格的邊框變成虛線了！問題：1、如何由實線變成虛線？2、哪些改變了，哪些沒有改變？如何設置CSS選擇符？

3、單元格之間的邊框線粗細是多少？案例演示1案例演示28邊框合并通過對table設置border-collapse:collapse;案例演示9案例階段10表格實例一：隔行變色當表格的行和列都很多時，單元格若采用相同的背景色，用戶在實際實用時會感到凌亂。通常解決方法就是采用隔行變色。案例演示11表格實例二：鼠標經過時變色的表格為什么要實現這樣的效果？1、無論網頁怎么設計，最終是為了給用戶提供信息的；2、對于長時間審核大量數據和瀏覽表格的用戶來說，隔行變色的表格，依然會感到疲勞；3、如果數據行能動態(tài)根據鼠標來變色，就會使得頁面充滿生機，最大程度減少用戶疲勞。案例演示<tronmouseout="this.style.background=''"

onmouseover="th

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論