HTML使用CSS美化表格
阿新 • • 發佈:2019-01-29
1、HTML中插入表格
<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>
2、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;}
<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>
2、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;}