1. 程式人生 > >HTML使用CSS美化表格

HTML使用CSS美化表格

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;}