1. 对数据表格应用样式
普通的用表格展现的数据，一般会形成杂乱的布局，会使用户难以阅读
对表格内容用少量垂直和水平填充进行视觉分隔，主要的列标题通过一种精细的重复背景图像区别于数据，颜色交替的行帮助引导用户的实线在每个单元格之间水平移动，同时视觉上不会显得太混乱，为了进一步帮助读者，可以在每一行上应用鼠标停留效果
@ 1 表格特有的元素
#1 summary和caption
caption：他基本上用做表格的标题
summary：可应用于表格的标签，用来描述表格的内容（与image的alt文本相似）
<table id="listTable" summary="音乐排行榜">
<caption>实力歌手</caption>
</table>
#2 thead、tbody和tfoot
thead、tbody和tfoot使开发人员能够将表格划分为逻辑部分，可以将所有列标题放在thead元素中，这样可以对这个特殊区域单独应用样式，如果使用
thead或tfoot元素，那么必须至少使用一个tbody元素
行和列标题应该使用th标记而不是td，但是如果某些内容既是数据又是标题，那么它仍然应该使用td，表格标题可以设置值为row或col的scope属性，定义
他们是行标题还是列标题，它们还可以设置值rowgroup或colgroup，表示他们与多行或多列相关
<thead>
<tr>
<th id="playListHead" scope="col">歌曲名</th>
<th scope="col">艺术家</th>
<th scope="col">专辑</th>
<th scope="col">时间</th>
</tr>
</thead>
#3 col和colgroup
colgroup能够对使用col元素定义的一个或多个列进行分组，但是支持col和colgroup元素的浏览器并不多
<colgroup>
<col id="name"/>
<col id="art"/>
<col id="time"/>
</colgroup>
@2 数据表格标记
将上述所有HTML元素和属性组合，创建出表格的基本轮廓：
<table id="listTable" summary="音乐排行榜">
<caption>实力歌手</caption>
<colgroup>
<col id="name"/>
<col id="art"/>
<col id="time"/>
</colgroup>
<thead>
<tr>
<th id="playListHead" scope="col">歌曲排名</th>
<th scope="col">歌曲名</th>
<th scope="col">艺术家</th>
<th scope="col">专辑</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>十年</td>
<td>陈奕迅</td>
<td>那些年</td>
</tr>
<tr>
<td>2</td>
<td>愿得一人心</td>
<td>李行亮</td>
<td>愿得一人心</td>
</tr>
<tr class="odd">
<td>3</td>
<td>K歌之王</td>
<td>陈奕迅</td>
<td>那些年</td>
</tr>
<tr>
<td>4</td>
<td>知心</td>
<td>李行亮</td>
<td>愿得一人心</td>
</tr>
</tbody>
</table>
@3 对表格应用样式
CSS规范有两个表格边框模型：单独的和叠加的
border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。
设置表格的宽和边框，通过使用一些垂直和水平填充，在表格单元格周围形成一些空白
table{
border-collapse:collapse;
50em;
border:1px solid #666;
}
th,td{
padding:0.1em 1em;
}
@4 添加视觉样式
caption{
font-size:1.2em;
font-weight:bold;
margin:1em 0;
}
col{
border-right:1px solid #ccc;
}
col#albumCol{
border:none;
}
thead{
background:#21aec7 url(images/bar.gif) repeat-x left center;
border-top:1px solid #a5a5a5;
border-bottom:1px solid #a5a5a5;
}
th{
font-weight:normal;
text-align:left;
}
#palyListHead{
text-indent:-1000em;
}
.odd{
background-color:#edf5ff;
}
tr:hover{
background-color:#3d80df;
color:#fff;
}
thead tr:hover{
background-color:transparent;
color:inherit;
}
效果图：
2.简单的表单布局
@1有用的表单元素
HTML提供了许多有用的元素，可以帮助在表单中添加结构和意义，其中第一个元素是filedset元素，filedset元素用于对相关的信息块进行分组
filedset{
border:solid 0 transparent;
}
表单标签：<label>
@2 基本布局