第12講使用CSS設(shè)置表格樣式

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

提示：雖然我們一直強(qiáng)調(diào)網(wǎng)頁的布局形式應(yīng)該是DIV+CSS，但并不是所有的布局都應(yīng)該如此，在某些時(shí)候表格布局更為便利?。?！4表格回顧行<tr></tr>列單元格<td></td>5表格標(biāo)記表格三個(gè)常用的標(biāo)記有：tabletdtr我們來了解新的用于表格的標(biāo)記：

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

<caption>期中考試成績(jī)單</caption>

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

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

onmouseover="th