table細線表格例項程式碼

admin發表於2018-07-03

關於表格型別效果，還是table實現起來更為輕鬆，但預設狀態下表格的美觀度實在是不能令人滿意。

主要預設無細線效果，下面就簡單介紹一下如何實現細線表格效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>table細線表格-螞蟻部落</title>
<style type="text/css"> 
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  background-color:#CCF;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style> 
</head> 
<body> 
<table cellpadding="0" cellspacing="1" id="thetable">
  <tr>
    <th>標題一</th>
    <th>標題二</th>
    <th>標題三</th>
    <th>標題四</th>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
  </tr>
</table>
</body> 
</html>

原理非常的簡單，設定整個table和單元格的背景色，然後再設定cellspacing屬性，也就是單元格之間的距離，露出表格的背景色，形成細線效果。特別注意，預設狀態下單元格是透明的，所以要特別設定它的背景色為白色，否則看到的都是表格的背景色。

相關文章