h5学习笔记：Table
编写一个表格做为练习。当中有个比较重要的样式在学习过程当中遇到，border-collapse: collapse; 可以去除双重的边框。table能够合并单元格因此 对td属性设置 colspan=”2” 则表明能够设置单元格。css
table 当中thead， tbody， tfoot 都是table元素。使用thead表明表头 ，这个标签好处的无需关系位置。一样tfoot 也同样。html
.mytable tr:nth-child(2n) 为隔开选取，这样就可以间隔地处理错开的颜色。web
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Table 练习</title>
</head>
<style> .mytable { width: 800px; height: auto; margin: 0 auto; } .mytable table { width: 100%; border: 1px solid #999; padding: 0; margin: 0; border-collapse: collapse; } .mytable th { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #999; padding: 0; margin: 0; } .mytable td { height: 45px; line-height: 45px; text-align: center; border-bottom: 1px solid #999; padding: 0; margin: 0; } .mytable tr:hover { background-color: #f8f8f8; } .mytable tr:nth-child(2n) { background-color: #f8f8f8; } .mytable tfoot { width: 100%; } .mytable tfoot a{ text-decoration: none; color: #999; } </style>
<body>
<div class="mytable">
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>小米</td>
<td>未知</td>
<td>1234567</td>
<td>火星文明</td>
</tr>
<tr>
<td>华为</td>
<td>未知</td>
<td>1234567</td>
<td>火星文明</td>
</tr>
<tr>
<td>三星</td>
<td>未知</td>
<td>1234567</td>
<td>火星文明</td>
</tr>
<tr>
<td>苹果</td>
<td>未知</td>
<td>1234567</td>
<td>火星文明</td>
</tr>
</tbody>
<tfoot>
<tfoot>
<tr>
<td><a href="#" class="more">上一页</a></td>
<td colspan="1"><a href="#" class="more">下一页</a></td>
<td colspan="2"></td>
</tr>
</tfoot>
</tfoot>
</table>
</div>
</body>
</html>