编写一个表格作为练习。当中有个比较重要的样式在学习过程中遇到，border-collapse: collapse; 能够去除双重的边框。table可以合并单元格所以 对td属性设置 colspan=”2” 则代表可以设置单元格。
table 当中thead， tbody， tfoot 都是table元素。使用thead代表表头 ，这个标签好处的无需关系位置。同样tfoot 也一样。
.mytable tr:nth-child(2n) 为隔开选取，这样就能够间隔地处理错开的颜色。
<!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>
时间： 2025-01-04 15:53:31