html 如何用 CSS 美化表格? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
下面通过示例来看看.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- </title>
- <style type="text/css">
- /* 表格样式 */ table { width: 90%; background: #ccc; margin: 10px auto; border-collapse:
- collapse; /*border-collapse:collapse 合并内外边距 (去除表格单元格默认的 2 个像素内外边距 */ }
- th,td { height: 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 href="#">
- 查看
- </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>
效果图:
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17412.html