要求
- 表格整体居中,宽度为600px
- 表格边框为1个像素的绿色实线条
- 单元格和单元格之间的间距合并
- 标题行背景为黑色、字体为白色、字号14px宋体
- 表格页脚包含四个超链接:首页、上一页、下一页、尾页
- 表格页脚部分背景为黑色,四个超链接右对齐,间距为15px,字体为14px,且无蓝色下划线
- 表格中间部分隔行显示背景色(深灰色与浅灰色交替)
- 鼠标移到行上高亮显示为浅黄色,鼠标移开还原为之前的颜色
- 单元格的字体字号为12px表格第一列为“复选框”列;
- 最后一列为“操作”列每行数据的第一个单元格为复选框;
- 最后一个单元格含三个按钮,分别为:查看、修改、删除
模板效果图
CSS模块
<style>
table,
td {
border-width: 1px;
border-style: solid;
border-color: yellowgreen;
}
table,
th,
tr,
td {
height: 60px;
}
table {
margin-left: 28%;
width: 600px;
border-collapse: collapse;
/*边缘颜色*/
/* outline-style: solid;
outline-color: yellowgreen;
outline-width: 1px; */
}
td {
text-align: center;
font-size: 12px;
}
th {
background-color: black;
color: white;
font-size: 14px;
/*宋体*/
font-family: "SimSun";
}
a:link {
/*链接位置设置*/
float: right;
text-decoration: none;
padding: 15px;
font-size: 14px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #FFCC66;
}
</style>
总体模块
<html>
<head>
<style>
table,
td {
border-width: 1px;
border-style: solid;
border-color: yellowgreen;
}
table,
th,
tr,
td {
height: 60px;
}
tr,
td {
height: 60px;
}
table {
margin-left: 28%;
width: 600px;
border-collapse: collapse;
/* outline-style: solid;
outline-color: yellowgreen;
outline-width: 1px; */
}
td {
text-align: center;
font-size: 12px;
}
th {
background-color: black;
color: white;
font-size: 14px;
font-family: "SimSun";
}
a:link {
float: right;
text-decoration: none;
padding: 15px;
font-size: 14px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #FFCC66;
}
</style>
<meta charset="utf-8" />
</head>
<body>
<table>
<tr>
<th><input type="checkbox" /></th>
<th>学号</th>
<th>姓名</th>
<th>专业</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>9527</td>
<td>唐伯虎</td>
<td>美术</td>
<td><button>查看</button> <button>修改</button> <button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>007</td>
<td>武松</td>
<td>体育</td>
<td><button>查看</button> <button>修改</button> <button>删除</button></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>1024</td>
<td>诸葛亮</td>
<td>心理学</td>
<td><button>查看</button> <button>修改</button> <button>删除</button></td>
</tr>
<tr>
<th colspan="6">
<p><b><a href="default.asp" target="_blank">首页</a></b>
<a href="default.asp" target="_blank">上一页</a></b>
<b><a href="default.asp" target="_blank">下一页</a></b>
<b><a href="default.asp" target="_blank">页尾</a></b>
</p>
</th>
</tr>
</table>
</body>
</html>
更多参考属性
更多推荐
CSS+html人员信息表
发布评论