HTML+CSS(三)——数据表格及表单应用样式
首先，推荐两本关于css的书籍，一本是《css禅意花园》，一本是《精通css：高级web标准解决方案》，两本都比较适合在初步了解css基本内容之后去读。第一本讲了一些好的布局案例，更偏向于教会如何去设计完整的页面，个人认为比较适合在熟练掌握Html+css内容后再去读；后一本更加详细的介绍了一些具体的内容，如：如何对链接应用样式，对列表 应用样式和创建导航条，bug和bug修复等，但是书中也是有一些错误，在应用样式时应该注意。
上周学习了对链接应用样式、布局、对表单和数据表格应用样式，这三个内容中第一个比较容易，布局在前面的总结中已经有所简单介绍过，这篇中主要介绍对表单和数据表格应用样式。
数据表格
- 在为表格应用样式前应该先有一个较好的HTML文本
<table cellspacing="0" id="playlistTable" summary="Top 15 songs played. Top artists include Cold Play,
Yeah Yeah Yeahs,Snow Patrol,Deeper Water, Kings of Leon,Embrace, Oasis,franz Ferdinand,Jet, The Bees,
Blue States,Kaiser Chiefs and Athlete.">
<caption>Top 15 Playlist</caption>
<colgroup>
<col id="PlaylistCol"/>
<col id="trackCol"/>
<col id="artistCol"/>
<col id="albumCol"/>
</colgroup>
<thead>
<tr>
<th id="playlistPosHead" scop="Col">Playlist Position</th>
<th scope="col">Track Name</th>
<th scope="col">Artist</th>
<th scope="col">Album</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hide You</td>
<td>Kosheen</td>
<td>Resist</td>
</tr>
<tr>
<td>2</td>
<td>.38.45</td>
<td>Thievery Corporation</td>
<td>Sounds From the Thievery Hi-fi</td>
</tr>
<tr>
<td>3</td>
<td>Fix You</td>
<td>Cold Play</td>
<td>X&Y</td>
</tr>
</tbody>
</table>
这里面有几个表格特有的元素：
1.summary和caption
- summary应用于表格标签，描述表格内容；
- caption用做表格的标题。
2.thead、tbody和foot
- 这个三可以将表格划分为逻辑部分。可以将所有列标题放在thead元素中，这样就可以对这个特殊区域统一单独应用样式。如果选择thead或tfoot元素，就必须至少使用一个tbody元素。在一个表格中只能使用一个thead和tfootuansu，但是可以使用多个tbody元素将复杂的表格划分为更容易管理的部分。
3.col和colgroup
- tr能对整行应用样式，但是很难对整列应用样式。colgroup能够使用col元素定义一个或多个列进行分组。
接下来就是对表格应用样式了
table{
border-collapse: collapse;
width:50em;
border:1px soid #666;
}
caption{
font-size: 1.2em;
font-weight: bold;
margin:1em 0;
}
col{
border-right: 1px solid black;
}
#albumCol{
border:none;
}
thead {
background: #ccc;
border-top: 1px soild #a5a5a5;
border-bottom:1px soild #a5a5a5;
}
th{
font-weight:normal;
text-align:left;
}
th, td{
padding: 0.1em 1em;
}
#playlistPosHead{
text-indent:-1000em;
}
tbody tr:nth-child(even){
background-color:#edf5ff;
}
tr:hover{
background-color:#3d80df;
color:#fff;
}
thead tr:hover{
background-color:transparent;
color:inherit;
}
首先，给表格设置一个宽度，调整表格间距并使每个方格的数据左对齐，
使用：nth-child选择器交错使偶数行或者奇数行显示不同颜色，不需要使用给每个交替行添加类。:hover动态伪类可以在鼠标滑动到某一行时显示，某个样式。当然还可以给表格加上边框，或者将字体加粗也是同样的方法。
添加样式后的表格
表单
<fieldset>
<legend>个人信息</legend>
<p>
<label for="Place Of Birth">Place Of Birth:</label>
<select name="Place Of Birth">
<option value="1">China</option>
<option value="2">USA</option>
</select>
</p>
<p>
<label for="Date Of Birth">Date Of Birth:</label>
<input type="text" name="DateOfBirth" id="DateOfBirth"/>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">Februry</option>
<option value="3">March</opyion>
</select>
<input type="text" name="YearOfBirth" id="YearOfBirth" />
</p>
<h4>Favorite Color:</h4>
<legend>
<p>
<input type="checkbox" name="red" id="red" value="red" />
<label>red</label>
<input type="checkbox" name="bule" id="bule" value="bule" />
<label>bule</label>
<input type="checkbox" name="black" id="black" value="black" />
<label>black</label>
</p>
</legend>
<legend>
<input type="checkbox" name="yellow" id="yellow" value="yellow" />
<label>yellow</label>
<input type="checkbox" name="orange" id="orange" value="orange" />
<label>orange</label>
<input type="checkbox" name="white" id="white" value="white" />
<label>white</label>
</legend>
</fieldset>
<input type="button" name="submit" id="submit" value="submit" />
先通过html的标签和属性创建一个简单的表单，<legend>标签可以对整个组进行定位。在这个表单上用到的所有表单控件都包含name和id属性，在表单输入控件和标签之间创建关联需要id属性，而将表单数据发送回服务器需要name属性。
fieldset{
width:30em;
}
input#DateOfBirth{
width:50px;
margin-right: 0.5em;
}
select#monthOfBirth{
width: 10em;
margin-right: 0.5em;
}
input#YearOfBirth{
width:50px;
}
同样可以给表单设置任意宽度，不让随浏览器变化，当需要某种形式的反馈消息，可以在适当的区域添加一个错误消息提示。可以将反馈文本放在<span>标签中，并放在源代码中文本输入元素的后面，然后使用CSS进行定位。
部分表单
在之前模仿写趣医网的静态页面时，用了大量的div标签，虽然可以达到自己想要的效果，但使得代码看起来比较乱又难读懂，在后面写的过程中应多熟练使用一些有意义的标签元素。
