CSS設置表格樣式主講：毛麗娟email:maolj@表格中的標記<caption>:定義表格的大標題，習慣放在表格定義的第一行，即緊隨<table>標記。<th>標記：表頭標記，用于行或列的名稱。<thead>、<tbody>、<tfoot>:用來定義表格的不同部分，稱為“行組”。<col>:列標記。案例1：制作如下效果的表格。樣式要求：外邊框屬性為：1pxsolidred;表頭邊框屬性為:1pxsolidred;普通單元格的邊框屬性為：1pxdashedred;表格標題<caption>表頭<th>案例要點分析：Css選擇器的類型？<th>的使用？相鄰邊框線的合并屬性border-collapse?相鄰邊框的合并規則？相鄰邊框的合并規則粗的優先于細的。如果幾個邊框的border-width相同，則優先次序由高到低是：double、solid、dashed、dotted、ridge、outset、groove、inset。如果邊框的border-style設置為hidden，則優先級最高。如果邊框的屬性中有“none”，優先級最低。案例1：網頁結構代碼<table><!--行表頭，即列標題--><tr><th>姓名</th><th>高數</th><th>物理</th><th>組成原理</th><th>總分</th></tr><!--行表頭結束-->案例1：網頁結構代碼<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>標記設置如下格式：案例3：美化表格——立體效果案例3分析關鍵技術：設置單元格的相應的邊框屬性td,th{padding:5px;border:2pxsolid#EEE;border-bottom-color:#666;border-right-color:#666;}練習：表格的立體效果練習：樣式代碼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：設置表格的列樣式要點分析在<tbody>標記前增加列標記<col/><col/><col/><colclass="right"/><col/>建立樣式col.right{…}說明：<col/>是標準的HTML元素，由于CSS規范和HTML規范之間的一些不一致，導致Firefox不支持<col/>標記。案例5：結構代碼<tablewidth="400"border="0"cellspacing="0"><caption>成績表</caption><thead><tr><th>姓名</th><th>高數</th><th>物理</th><th>組成原理</th><th>總分</th></tr></thead>

案例5：結構代碼<tbody><trclass="even"><th>張三</th><td>77</td><td>66</td><td>78</td><td>150</td></tr>案例5：結構代碼<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：結構代碼<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:"隸書"; 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個td相鄰，則第3個td為修飾對象。將案例5中的col.right{}改為th+td+td+td{text-align:right;}案例7：設置鼠標指針經過時整行變色的效果。案例：主要樣式代碼。tbody

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

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

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