CSS表格设置练习代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3月22日作业 CSS表格设置</title> <style> table,th,td{ border: 1px solid #555; } table { border-collapse: collapse; /*text-align: center;*/ width: 70%; margin: 50px auto; box-shadow: 3px 3px 3px #888; background-image: url(images/gs/bg.jpg); background-repeat: no-repeat; background-size: cover; } table caption { font-size: 1.5em; font-weight: bolder; margin-bottom: 30px; } th,td { padding: 10px; text-align: center; } td img { border-radius: 50%; box-shadow: 2px 2px 2px #888; } th { background-color: rgba(192,192,192,0.3); /*color: ;*/ } #admin{ color: brown; } </style> </head> <body> <table> <caption>进销存管理系统操作员列表</caption> <tr> <th>部门</th> <th>姓名</th> <th>头像</th> <th>权限</th> <th>状态</th> <th>注册时间</th> <th>操作</th> </tr> <tr> <td>办公室</td> <td id="admin">魏文虎</td> <td><img src="images/1.jpg" width="30"></td> <td>万能操作员</td> <td>允许登录</td> <td>2010-09-05</td> <td> <a href=""><img src="images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td rowspan="2">仓储部</td> <td>苏勒</td> <td><img src="images/2.jpg" width="30"></td> <td>出库</td> <td>允许登录</td> <td>2016-07-13</td> <td> <a href=""><img src="images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td>穆祥宇</td> <td><img src="images/3.jpg" width="30"></td> <td>盘点</td> <td>限制登录</td> <td>2018-03-11</td> <td> <a href=""><img src="images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td rowspan="2">销售部</td> <td>窦文涛</td> <td><img src="images/4.jpg" width="30"></td> <td>调价</td> <td>禁止登录</td> <td>2015-07-18</td> <td> <a href=""><img src="images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> <tr> <td>于谦</td> <td><img src="images/5.jpg" width="30"></td> <td>入库</td> <td>允许登录</td> <td>1890-11-11</td> <td> <a href=""><img src="images/edit.jpg" width="30" alt="编辑" title="编辑"></a> <a href=""><img src="images/del.jpg" width="30" alt="删除" title="删除"></a> </td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
CSS表格设置练习效果图:
CSS表格设置练习手抄代码: