CSS 設定table表格樣式

admin發表於2018-10-08
CSS

隨著時間的前進，人可能會意識到自己在何種位置上更加恰當。

技術上也是如此，最初，table用來進行頁面佈局，並且應用十分普遍。

但是用table佈局的劣勢很大，靈活度很差，不容易改版等。

現在table已經從“神壇”，逐漸做一些平凡且自己擅長的事情。

那就是繪製表格，真正做到名副其實，下面介紹一下利用CSS設定table表格的樣式。

一.設定table表格的邊框：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table{ 
  border:1px solid #ccc; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落一</td>
  </tr>
  <tr> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落二</td>
  </tr>  
</table> 
</body> 
</html>


程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141018niiw19i81i9w7717.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果沒有給table元素內部設定border屬性值，那麼表格預設無邊框。

給整個表格外圍新增一個邊框，使用CSS的border屬性。

二.設定td單元格邊框：

前面程式碼僅設定table邊框，感覺還是赤裸裸，結構不夠明晰。

所以還需要給td單元格設定邊框。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落一</td>
  </tr>
  <tr> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落二</td>
  </tr>  
</table> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141048pljtuqwq89mkqnsz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面程式碼給table和td都設定了邊框。

但是在視覺上感覺很奇怪，邊框貌似重複了，下面介紹如何解決此問題。

三.邊框合併：

上面程式碼設定了table和td的邊框，但是並不美觀。

因為相鄰的邊框有一種重複的感覺，其實只需要一條即可，那麼我們可以將相鄰的邊框合併。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落一</td>
  </tr>
  <tr> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落二</td>
  </tr>  
</table> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141117vfepifer3ea93vk3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到相鄰的邊框已經被合併，是不是更加美觀清晰了一點。

設定border-collapse屬性值為collapse即可實現邊框合併。

四.表格的寬度和高度：

這是最為簡單的操作，使用width和height屬性即可。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
table, td{ 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
td{
  width:80px;
  height:30px;
}
</style> 
</head> 
<body> 
<table> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落一</td>
  </tr>
  <tr> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落二</td>
  </tr>  
</table> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/141147ubk16q6b8bqstml6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

相關文章