如何在html的表格中加入邊框線

html的表格中加入邊框線方法：

壹、如何在html的表格中加入邊框線

只對table標簽設置border（邊框）樣式，將讓此表格最外層table壹個邊框，而表格內部不產生邊框樣式。

案例詳細如下：

1、對應css代碼

<style>?

.table-a?table{border:1px?solid?#F00}?

/*?css註釋：只對table標簽設置紅色邊框樣式?*/?

</style>

2、對應html代碼片段

<div?class="table-a">?

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

<tr>?

<td?width="105">站名</td>?

<td?width="181">網址</td>?

<td?width="112">說明</td>?

</tr>?

<tr>?

<td>DIVCSS</td>?

<td>域名</td>?

<td>CSS學習</td>?

</tr>?

<tr>?

<td>CSS5</td>?

<td>域名</td>?

<td>CSS切圖</td>?

</tr>?

</table>?

</div>

3、案例截圖

二、對td設置邊框

對table表格td設置邊框樣式，表格對象內td將實現邊框樣式，但中間部分td會導致出現雙邊框。

詳細案例教程如下：

1、對應css代碼

<style>?

.table-b?table?td{border:1px?solid?#F00}?

/*?css註釋：只對table?td標簽設置紅色邊框樣式?*/?

</style>

2、對應html源代碼片段

3、案例截圖

三、對table和td技巧性設置表格邊框 ? -

如上第二點，只對表格對象td設置單壹邊框樣式，中間部分td與td標簽之間就會出現雙邊框現象。

解決方法：對td只設置兩個邊的邊框，對table也設置兩個邊的邊框樣式。

解釋：對td設置左與上邊框，這樣td與td相鄰就會只出現單壹邊框樣式，這樣就會出現表格右側和下部沒有邊框，這個時候我們設置table右和下邊框解決顯示右側和下側td剩下未顯示邊框。

1、對應css代碼：

<style>?

.table-c?table{border-right:1px?solid?#F00;border-bottom:1px?solid?#F00}?

.table-c?table?td{border-left:1px?solid?#F00;border-top:1px?solid?#F00}?

/*?

css?註釋：?

只對table?td設置左與上邊框；?

對table設置右與下邊框；?

為了便於截圖，我們將css?註釋說明換行排版?

*/?

</style>

2、對應html源代碼片段：

<div?class="table-c">?

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

<tr>?

<td?width="105">站名</td>?

<td?width="181">網址</td>?

<td?width="112">說明</td>?

</tr>?

<tr>?

<td>DIVCSS</td>?

<td>域名</td>?

<td>CSS學習</td>?

</tr>?

<tr>?

<td>CSS5</td>?

<td>域名</td>?

<td>CSS切圖</td>?

</tr>?

</table>

3、表格邊框實現案例截圖

四、對table和td設置背景，實現完美表格邊框?

1）、先設置table?css背景為紅色

2）、設置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">

3）、設置table td背景為白色

2、css代碼：

<style>?

.table-d?table{?background:#F00}?

.table-d?table?td{?background:#FFF}?

/*?

css註釋：設置table背景為紅色，td背景為白色?*/?

</style>