CSS学习笔记（十）对表单和数据表格使用样式

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;

　　width: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 基本布局

 

转载于:https://www.cnblogs.com/qixing/archive/2013/01/21/2869813.html