怎樣對table和td設定背景實現表格邊框

很多朋友都很苦惱表格樣式怎麼設定，今天就給大家詳細講解一下css表格樣式怎麼設定，之前說過三種方法，只對table設定邊框，對td設定邊框，對table和td技巧性設定表格邊框現在給大家帶來怎樣對table和td設定背景實現表格邊框，希望大家閱讀後有所收穫。

首先設定table css背景為紅色

然後設定table單元之間間距為1
使用DW軟體輔助設定table表格單元間距為1，具體DW軟體可視化操作步驟簡要說明，首先（視圖模式）選中表格後，對應DW軟體編輯視窗底部會“屬性”面板會出現對應table表格屬性設定地方，我們將“間隔”填寫為“1”。這個時候我們會看到table表格標籤裡cellspacing值為“1”（cellspacing="1"）。

藉助DW軟體佈建表格單元之間間距或

直接對<table>標籤內cellspacing="1"即可，得到：

<table width="400" border="0" cellspacing="1" cellpadding="0">

設定table td背景為白色

css代碼：

<style> .table-d table{ background:#F00} .table-d table td{ background:#FFF} /* css注釋：設定table背景為紅色，td背景為白色 */ </style>

對應html原始碼：

<div class="table-d"> <table width="400" border="0" cellspacing="1" cellpadding="0"> <tr> <td width="105">站名</td> <td width="181">網址</td> <td width="112">說明</td> </tr> <tr> <td>DIVCSS5</td> <td>www.divcss5.com</td> <td>CSS學習</td> </tr> <tr> <td>CSS5</td> <td>www.css5.com.cn</td> <td>CSS切圖</td> </tr> </table> </div>

我們總共歸納了四種方式實現table表格邊框樣式方法，推薦使用第三和第四種方法來解決表格邊框樣式。希望我們的方法對大家有協助並能掌握，平時需要時靈活運用。

相關閱讀：

怎樣對table和td技巧性設定表格邊框

怎樣用CSS對td設定邊框

怎樣用CSS只對錶格table的標籤設定邊框