設定表格邊框樣式的方法:1、為table元素新增「border:邊框寬度邊框樣式邊框顏色」樣式,可為整個表格設定邊框樣式;2、為td元素新增「border:邊框寬度邊框樣式邊框顏色」樣式,可為每個儲存格設定邊框樣式。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
對table設定css樣式邊框,分成幾種情況:
1、只對table設定邊框
2、對td設定邊框
為了方便觀察,均設定所有案例表格為1px實線紅色邊框為例;table寬度為400px;表格為三列三行,對以上情況表格外層加個p盒子,分別命名為“.table-a”、“.table-b”。
#只對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如何設定html table表格邊框樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!