第六章cs设置表格和表单样式.ppt

本章主要内容 6.1 控制表格 6.2 表格实例一：隔行变色 6.3 css与表单 6.4 直接输入的excel表格 6.1 控制表格  6.1.1 表格中的标记（6-1.html） Table概念 table标签 表格标签 tr 表格中的一行 td 表格中的一列 th 表格的标题行 6-1.html html headtitle年度收入/title styletable{ caption-side:bottom; } /style/head body table border=1 caption年度收入 2004 - 2007/caption /table/body/html 6.1.2 表格的颜色（6-2.html） html head title年度收入/title style body{ background-color:#ebf5ff; /* 页面背景色 */ margin:0px; padding:4px; text-align:center; } /* 居中对齐（IE有效） */ .datalist{ color:#0046a6; /* 表格文字颜色 */ background-color:#d2e8ff; /* 表格背景色 */ font-family:Arial; } /* 表格字体 */ .datalist caption{ font-size:18px; /* 标题文字大小 */ font-weight:bold; } /* 标题文字粗体 */ .datalist th{ color:#003e7e; /* 行、列名称颜色 */ background-color:#7bb3ff; } /* 行、列名称的背景色 */ /style body table summary=This table shows the yearly income for years 2004 through 2007 border=1 class=datalist caption年度收入 2004 - 2007/caption tr th/thth scope=col2004/th /tr tr th scope=row拨款/th td11,980/td /tr tr th scope=row捐款/th td4,780/td /tr tr th scope=row投资/th td8,000/td /tr tr th scope=row募捐/th td3,200/td /tr tr th scope=row销售/th td28,400/td /tr tr th scope=row杂费/th td2,100/td /tr tr th scope=row总计/th td58,460/td /tr /table/body/html 6.2 表格实例一：隔行变色 6-4.html 隔行变色使得奇数行和偶数行的背景颜色不一样 隔行变色 6-4.html html head titleMember List/title style tr class=altrow !-- 偶数行 -- tdgirlwing/td tdW210/td tdSep 16th/td tdVirgo/td td1307994/td /tr 6-7.html p请问你的性别:br input type=radio name=sex id=male value=male男br input type=radio name=sex id=female value=female女/p p你喜欢做些什么:br input type=checkbox name=hobby id=book value=book看书 input type=checkbox name=hobby id=net value=net上网 input type=checkbox name=hobby id=sleep value=sleep睡觉/p p我要留言:br textarea name=comments id=comments cols=30 rows=4/texta