第14章

表格樣式第14章

表格樣式回顧下面說法正確的是（

）。XHTML標(biāo)簽即使沒有定義樣式，也會(huì)呈現(xiàn)一定樣式XHTML沒有設(shè)定默認(rèn)樣式不同的瀏覽器定義的默認(rèn)樣式?jīng)]有差別li默認(rèn)以block顯示瀏覽器默認(rèn)的字體大小是（

）。12px B.14pxC.16px D.18pxAC回顧下面說法正確的是（）。AC預(yù)習(xí)檢查如何將表格邊框和單元格邊框合為一個(gè)邊框？border-collapse屬性設(shè)置表格邊框和單元格邊框是否被合并為一個(gè)單一的邊框。改善表格顯示效果有哪些方法？標(biāo)題行與數(shù)據(jù)行的區(qū)分。標(biāo)題行與數(shù)據(jù)行文本的區(qū)分。交替定義不同背景色來實(shí)現(xiàn)。預(yù)習(xí)檢查如何將表格邊框和單元格邊框合為一個(gè)邊框？?jī)?nèi)容提要現(xiàn)在的網(wǎng)頁布局使用表格的越來越少了，但表格在表現(xiàn)數(shù)據(jù)方面是不能替代的，對(duì)表格的樣式設(shè)計(jì)主要體現(xiàn)在顯示數(shù)據(jù)直觀性上。內(nèi)容提要現(xiàn)在的網(wǎng)頁布局使用表格的越來越少了，但表格在表現(xiàn)數(shù)據(jù)本章要點(diǎn)CSS表格。表格顯示效果。本章要點(diǎn)CSS表格。14.1CSS表格——表格屬性CSS表格屬性。屬性描述border-collapse是否把表格邊框和單元格邊框合并為單一的邊框border-spacing相鄰單元格邊框間的距離。（用于separatedborders模型）caption-side表格標(biāo)題的位置empty-cells是否顯示表格中的空單元格。（用于separatedborders模型）table-layout設(shè)置顯示單元格、行和列的算法規(guī)則14.1CSS表格——表格屬性CSS表格屬性。屬性描述bo14.1CSS表格——表格屬性1.border-collapse屬性border-collapse屬性設(shè)置表格的邊框和單元格的邊框是否被合并為一個(gè)單一的邊框如為表格設(shè)置合并邊框模型：table{border-collapse:collapse;}值描述separate默認(rèn)值。邊框分離。不會(huì)忽略

border-spacing和

empty-cells屬性collapse邊框合并為一個(gè)單一的邊框14.1CSS表格——表格屬性1.border-coll14.1CSS表格——表格屬性2.border-spacing屬性border-spacing屬性設(shè)置相鄰單元格的邊框間的距離（用于“邊框分離”模式），在指定的兩個(gè)長(zhǎng)度值中，第一個(gè)是水平間隔，第二個(gè)是垂直間隔，如果只有一個(gè)值，那么定義的是水平和垂直間距，不允許使用負(fù)值。如為表格設(shè)置border-spacing：table{border-collapse:separate;border-spacing:10px50px;}14.1CSS表格——表格屬性2.border-spac14.1CSS表格——表格屬性3.table-layout屬性table-layout屬性用來設(shè)置顯示表格單元格、行和列的算法規(guī)則。如設(shè)置表格布局算法：table{table-layout:fixed;}值描述automatic默認(rèn)。列寬度由單元格內(nèi)容設(shè)定fixed列寬由表格寬度和列寬度設(shè)定14.1CSS表格——表格屬性3.table-layou14.1CSS表格——表格屬性Automatic（自動(dòng)）：列的寬度是由列單元格中沒有折行的最寬的內(nèi)容設(shè)定的。此算法有時(shí)會(huì)較慢，因?yàn)樵诖_定最終布局之前需要訪問表格的所有內(nèi)容。fixed（固定）：水平布局僅取決于表格寬度、列寬度、表格邊框?qū)挾群蛦卧耖g距，而與單元格的內(nèi)容無關(guān)。固定算法比較快，但是不太靈活，而自動(dòng)算法比較慢。14.1CSS表格——表格屬性Automatic（自動(dòng)）：14.1CSS表格——邊框控制用CSS控制表格的最大便利是能夠靈活控制表格的邊框。實(shí)例css(table-1).html列出了經(jīng)常使用的各種邊框。14.1CSS表格——邊框控制用CSS控制表格的最大便利是14.1CSS表格——改善表格顯示效果用CSS來改善表格顯示樣式，使其達(dá)到一定效果，一般采用下述原則。標(biāo)題行與數(shù)據(jù)行的區(qū)分，可以通過不同背景色來實(shí)現(xiàn)。標(biāo)題行與數(shù)據(jù)行文本的區(qū)分，可以通過定義字體、大小和粗細(xì)等文本屬性來實(shí)現(xiàn)。為了避免讀錯(cuò)行現(xiàn)象，可以適當(dāng)增加行高，或交替定義不同背景色來實(shí)現(xiàn)。14.1CSS表格——改善表格顯示效果用CSS來改善表格顯14.1CSS表格——改善表格顯示效果實(shí)例css(table-2).html實(shí)現(xiàn)了上述原則的部分效果。<tableclass="table"width="100%">

<tr><th>標(biāo)題</th><th>標(biāo)題</th></tr><trclass="r1"><td>內(nèi)容</td><td>內(nèi)容</td></tr><trclass="r2"><td>內(nèi)容</td><td>內(nèi)容</td></tr><trclass="r1"><td>內(nèi)容</td><td>內(nèi)容</td></tr><trclass="r2"><td>內(nèi)容</td><td>內(nèi)容</td></tr></table>14.1CSS表格——改善表格顯示效果實(shí)例css(tabl14.1CSS表格——改善表格顯示效果<styletype="text/css">.table{border-collapse:collapse;/*合并相鄰邊框*/}tr,td,th{border:1px#000solid;}.tableth{background:#888;color:#FFF;}.table.r1{background:#AAA;/*定義交替行不同背景色*/}.table.r2{background:#CCC;/*定義交替行不同背景色*/}.tabletr:hover{background:#EEE;/*鼠標(biāo)經(jīng)過表格行時(shí)改變背景色*/}</style>14.1CSS表格——改善表格顯示效果<styletyp14.2叮叮書店購物車頁面表格樣式設(shè)計(jì)打開cart1.html文件。在head元素里輸入如下樣式聲明。<styletype="text/css">.cart-table{ font-size:1.4em;width:100%; border-collapse:collapse;/*合并邊框*/ border:1pxsolid#eee8e1;margin:10px0px10px0px;}.cart-tabletr,.cart-tabletd{ border:1pxsolid#eee8e1;text-align:center;/*單元格邊框*/}.cart-title,.cart-total{ background-color:#eee8e1;/*第一行和最后一行背景色*/}.cart-tableimg{width:23px;height