CSS設(shè)置表格樣式

CSS設(shè)置表格樣式主講：毛麗娟email:maolj@表格中的標(biāo)記<caption>:定義表格的大標(biāo)題，習(xí)慣放在表格定義的第一行，即緊隨<table>標(biāo)記。<th>標(biāo)記：表頭標(biāo)記，用于行或列的名稱(chēng)。<thead>、<tbody>、<tfoot>:用來(lái)定義表格的不同部分，稱(chēng)為“行組”。<col>:列標(biāo)記。案例1：制作如下效果的表格。樣式要求：外邊框?qū)傩詾椋?pxsolidred;表頭邊框?qū)傩詾?1pxsolidred;普通單元格的邊框?qū)傩詾椋?pxdashedred;表格標(biāo)題<caption>表頭<th>案例要點(diǎn)分析：Css選擇器的類(lèi)型？<th>的使用？相鄰邊框線的合并屬性border-collapse?相鄰邊框的合并規(guī)則？相鄰邊框的合并規(guī)則粗的優(yōu)先于細(xì)的。如果幾個(gè)邊框的border-width相同，則優(yōu)先次序由高到低是：double、solid、dashed、dotted、ridge、outset、groove、inset。如果邊框的border-style設(shè)置為hidden，則優(yōu)先級(jí)最高。如果邊框的屬性中有“none”，優(yōu)先級(jí)最低。案例1：網(wǎng)頁(yè)結(jié)構(gòu)代碼<table><!--行表頭，即列標(biāo)題--><tr><th>姓名</th><th>高數(shù)</th><th>物理</th><th>組成原理</th><th>總分</th></tr><!--行表頭結(jié)束-->案例1：網(wǎng)頁(yè)結(jié)構(gòu)代碼<tr><th>張三</th><td>77</td><td>66</td><td>78</td><td>150</td></tr><th>李斯</th><td>88</td><td>80</td><td>86</td><td>160</td></tr><tr><th>趙謙</th><td>98</td><td>57</td><td>90</td><td>145</td></tr><tr><th>文章</th><td>67</td><td>90</td><td>69</td><td>178</td></tr> </table>案例2：美化表格。利用<caption>、<thead>、<tbody>、<tfoot>標(biāo)記設(shè)置如下格式：案例3：美化表格——立體效果案例3分析關(guān)鍵技術(shù)：設(shè)置單元格的相應(yīng)的邊框?qū)傩詔d,th{padding:5px;border:2pxsolid#EEE;border-bottom-color:#666;border-right-color:#666;}練習(xí)：表格的立體效果練習(xí)：樣式代碼table{ width:400px;

border:none;

/*border-collapse:collapse;*/ background:#CCC;}td,th{border:2pxsolid#FFF; border-right-color:#666; border-bottom-color:#666; }案例4：美化表格——斑馬紋效果案例5：設(shè)置表格的列樣式要點(diǎn)分析在<tbody>標(biāo)記前增加列標(biāo)記<col/><col/><col/><colclass="right"/><col/>建立樣式col.right{…}說(shuō)明：<col/>是標(biāo)準(zhǔn)的HTML元素，由于CSS規(guī)范和HTML規(guī)范之間的一些不一致，導(dǎo)致Firefox不支持<col/>標(biāo)記。案例5：結(jié)構(gòu)代碼<tablewidth="400"border="0"cellspacing="0"><caption>成績(jī)表</caption><thead><tr><th>姓名</th><th>高數(shù)</th><th>物理</th><th>組成原理</th><th>總分</th></tr></thead>

案例5：結(jié)構(gòu)代碼<tbody><trclass="even"><th>張三</th><td>77</td><td>66</td><td>78</td><td>150</td></tr>案例5：結(jié)構(gòu)代碼<tr><th>李斯</th><td>88</td><td>80</td><td>86</td><td>160</td></tr><trclass="even"><th>趙謙</th><td>98</td><td>57</td><td>90</td><td>145</td></tr>

案例5：結(jié)構(gòu)代碼<tr><th>文章</th><td>67</td><td>90</td><td>69</td><td>178</td></tr></tbody><tfoot> <tr><th>平均分</th><tdcolspan="4">63.00</td></tr></tfoot></table>案例5：樣式代碼table{ font-family:"隸書(shū)"; font-size:16px; text-align:center; border:none;}thead,tfoot{ background-color:#FFF;}案例5：樣式代碼tablecaption{ font-size:36px; font-weight:bold; background-color:#FF0; border-top-style:solid; border-bottom-width:2px; border-bottom-style:solid; border-top-color:#F00; border-bottom-color:#F00; }tbody

tr{ background-color:#ccc;}案例5：樣式代碼td,th{ border:2pxsolid#eee; border-right-color:#999; border-bottom-color:#999; padding:5px;}tr.even{ background-color:#999;}th+td+td+td{ text-align:right;}案例6：解決案例5在Firefox中的顯示鄰接選擇器：用‘+’連接選擇器名，如td+td+td{}表示如果有3個(gè)td相鄰，則第3個(gè)td為修飾對(duì)象。將案例5中的col.right{}改為th+td+td+td{text-align:right;}案例7：設(shè)置鼠標(biāo)指針經(jīng)過(guò)時(shí)整行變色的效果。案例：主要樣式代碼。tbody

tr:hover{ background:#6CC;}綜合案例：日歷-Google日歷綜合案例：日歷-效果圖綜合案例：日歷-效果圖綜合案例：日歷-制作步驟按照傳統(tǒng)方法建立最簡(jiǎn)單的表格，如：<table> <tr> <td></td> <td></td>…… </tr>……</table>建立表格的標(biāo)題<caption>利用<th>建立表頭：星期一到星期日綜合案例：日歷-制作步驟4.給表格定義相應(yīng)的CSS樣式。5.將各天的日程放在具體的單元格中，并定義各種CSS樣式。綜合案例：日歷-表頭樣式分析設(shè)置表格的<caption>和<th>的基本屬性：.month{

/*使相鄰單元格的邊框重合在一起*/border-collapse:collapse;

/*用固定寬度的布局方式，使每一列的寬度都相等*/table-layout:fixed;width:780px;}綜合案例：日歷-表頭樣式分析/*設(shè)置表格標(biāo)題“2008年3月的樣式”*/.monthcaption{…… }/*設(shè)置表頭“星期一到星期日”的樣式*/.monthth{ …….}綜合案例：日歷-單元格樣式分析整個(gè)表格中的單元格樣式一共分為4種，即“普通的”、“有日程安排的”、“上個(gè)月的”和“下個(gè)月的”。/*普通單元格樣式*/.monthtd{ …… }綜合案例：日歷-單元格樣式分析/*上個(gè)月和下個(gè)月的樣式*/.monthtd.previous,.monthtd.next{ ……}/*有日程安排的單元格樣式*/.monthtd.active{……}綜合案例：日歷-日程安排樣式分析日程安排用列表實(shí)現(xiàn)，清除