CSS如何設定html table表格邊框樣式

設定表格邊框樣式的方法：1、為table元素新增「border:邊框寬度邊框樣式邊框顏色」樣式，可為整個表格設定邊框樣式；2、為td元素新增「border:邊框寬度邊框樣式邊框顏色」樣式，可為每個儲存格設定邊框樣式。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS如何設定table表格邊框樣式

對table設定css樣式邊框，分成幾種情況：
1、只對table設定邊框
2、對td設定邊框

為了方便觀察，均設定所有案例表格為1px實線紅色邊框為例；table寬度為400px;表格為三列三行，對以上情況表格外層加個p盒子，分別命名為“.table-a”、“.table-b”。

一、只對表格table標籤設定邊框

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

案例詳細如下：

對應css程式碼

<style>
 .table-a table{
 border:1px solid #F00
 } 
 /* css注释：只对table标签设置红色边框样式 */ 
 </style>

對應html程式碼片段

<p class="table-a"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
        <td width="105">1</td> 
        <td width="181">2</td>
        <td width="112">3</td> 
    </tr> 
    <tr> 
         <td>1</td>
         <td>2</td> 
         <td>3</td>
    </tr>
    <tr>
         <td>4</td> 
         <td>5</td> 
         <td>6</td> 
    </tr> 
</table> 
</p>

效果：

##二、對td設定邊框

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

對應css程式碼

<style>
.table-b table td{
border:1px solid #F00
} 
/* css注释：只对table td标签设置红色边框样式 */ 
</style>

對應html原始碼片段

<p class="table-b"> 
<table width="400" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
        <td width="105">1</td> 
        <td width="181">2</td>
        <td width="112">3</td> 
    </tr> 
    <tr> 
         <td>1</td>
         <td>2</td> 
         <td>3</td>
    </tr>
    <tr>
         <td>4</td> 
         <td>5</td> 
         <td>6</td> 
    </tr> 
</table> 
</p>

效果：

學習影片分享：

css影片教學

以上是CSS如何設定html table表格邊框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！