這篇文章給大家分享的是有關html用css美化表格的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
html用css美化表格的方法：首先創建一個HTML示例文件；然后在body中創建table表格；最后通過style標簽給表格添加css樣式即可。
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>效果圖：
感謝各位的閱讀！關于“html用css美化表格的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
