ht ML 用css美化表格的方法：首先创建一个HTML示例文件；然后在body中创建table表格；最后通过style标签给表格添加css样式即可。
本文操作环境：Windows7系统、HTML5 && CSS3、Dell G3 电 脑。
html如何用css美化表格？
下面通过示例来看看。
<!DOCTY PE html>
<html>
<head>
<t IT le></title>
<style type="text/css">
/*表格样式*/
table {
width: 90%;
background: # ccc;
m arg in: 10px auto;
border-collapse: collapse;
/*border-collapse:collapse合并内 外边距
(去除表格单元格默认的2个像素内外 边距 */
}
th,td {
h ei ght: 25px;
line-height: 25px;
text-align: center ;
border: 1px solid #ccc;
}
th {
background: #eee;
font-weight : normal;
}
tr {
background: #fff;
}
tr:hover {
background: #cc0;
}
td a {
color: #06f;
text-decoration: none;
}
td a:hover {
color: #06f;
text-decoration: underline;
}
</style>
</head>
<body>
<table>
<tr>
<!-- th为表格标题栏-->
<th>序号</th>
<th>职位名称</th>
<th>招聘人数</th>
<th>工作地点</th>
<th>有效时间</th>
<th>职位描述</th>
</tr>
<tr>
<td>1</td>
<td>保安人员</td>
<td>3至4人</td>
<td>洞头</td>
<td>2006.12.08</td>
<td>
<a hr ef="#">查看</a>
</td>
</tr>
<tr>
<td>2</td>
<td>项目技 术 人员</td>
<td>1人</td>
<td>洞头</td>
<td>2006.10.08</td>
<td>
<a href="#">查看</a>
</td>
</tr>
<tr>
<td>3</td>
<td>总 经理 助理</td>
<td>1人</td>
<td>温州</td>
<td>2006.07.11</td>
<td>
<a href="#">查看</a>
</td>
</tr>
</table>
</body>
</html>效果图：
推荐：《css视频教程》
以上就是html如何用css美化表格的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 html如何用css美化表格 全部内容，希望文章能够帮你解决 html如何用css美化表格 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did199329