html用css美化表格的方法:先建立一個HTML範例檔案;然後在body中建立table表格;最後透過style標籤為表格新增css樣式即可。
本文操作環境:Windows7系統、HTML5&&CSS3、Dell G3電腦。
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>
效果圖:
推薦:《css影片教學》
以上是html如何用css美化表格的詳細內容。更多資訊請關注PHP中文網其他相關文章!