首頁  >  文章  >  web前端  >  CSS如何設定html table表格邊框樣式

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

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-08 14:47:5614333瀏覽

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

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

本教學操作環境: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>

效果:

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

##二、對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如何設定html table表格邊框樣式

學習影片分享:

css影片教學

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn