歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

阿森纳热刺 www.tzxsac.com.cn CSS如何設置table表格邊框樣式

對table設置css樣式邊框,分為幾種情況:
1、只對table設置邊框
2、對td設置邊框
3、對table和td技巧性設置表格邊框
4、對table和td設置背景,實現完美表格邊框

以下阿森纳热刺對以上幾種實現html 表格邊框樣式進行講解與案例演示。為了便于觀察,divcss5均設置所有案例表格為1px實線紅色邊框為例;table寬度為400px;表格為三列三行,對以上四種情況表格外層加個div盒子,分別CSS命名為“.table-a”、“.table-b”、“.table-c”、“.table-d”。

一、只對表格table標簽設置邊框   -   TOP

只對table標簽設置border(邊框)樣式,將讓此表格最外層table一個邊框,而表格內部不產生邊框樣式。

案例詳細如下:

1、對應css代碼

  1. <style> 
  2. .table-a table{border:1px solid #F00} 
  3. /* css注釋:只對table標簽設置紅色邊框樣式 */ 
  4. </style> 

2、對應html代碼片段

  1. <div class="table-a"> 
  2. <table width="400" border="0" cellspacing="0" cellpadding="0"> 
  3. <tr> 
  4. <td width="105">站名</td> 
  5. <td width="181">網址</td> 
  6. <td width="112">說明</td> 
  7. </tr> 
  8. <tr> 
  9. <td>DIVCSS5</td> 
  10. <td>阿森纳热刺 www.tzxsac.com.cn</td> 
  11. <td>CSS學習</td> 
  12. </tr> 
  13. <tr> 
  14. <td>CSS5</td> 
  15. <td>www.css5.com.cn</td> 
  16. <td>CSS切圖</td> 
  17. </tr> 
  18. </table> 
  19. </div> 

3、案例截圖

對table設置邊框案例截圖
阿森纳热刺對table設置邊框案例截圖-僅對table標簽設置邊框

4、在線演示
查看案例

二、對td設置邊框   -   TOP

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

詳細案例教程如下:

1、對應css代碼

  1. <style> 
  2. .table-b table td{border:1px solid #F00} 
  3. /* css注釋:只對table td標簽設置紅色邊框樣式 */ 
  4. </style> 

2、對應html源代碼片段

  1. <div class="table-b"> 
  2. <table width="400" border="0" cellspacing="0" cellpadding="0"> 
  3. <tr> 
  4. <td width="105">站名</td> 
  5. <td width="181">網址</td> 
  6. <td width="112">說明</td> 
  7. </tr> 
  8. <tr> 
  9. <td>DIVCSS5</td> 
  10. <td>阿森纳热刺 www.tzxsac.com.cn</td> 
  11. <td>CSS學習</td> 
  12. </tr> 
  13. <tr> 
  14. <td>CSS5</td> 
  15. <td>www.css5.com.cn</td> 
  16. <td>CSS切圖</td> 
  17. </tr> 
  18. </table> 

3、案例截圖

對td設置邊框后,中間出現雙邊框樣式 案例截圖
對td設置邊框后,中間出現雙邊框樣式 案例截圖

4、在線演示
查看案例

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

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

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

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

1、對應css代碼:

  1. <style> 
  2. .table-c table{border-right:1px solid #F00;border-bottom:1px solid #F00} 
  3. .table-c table td{border-left:1px solid #F00;border-top:1px solid #F00} 
  4. /* 
  5. css 注釋: 
  6. 只對table td設置左與上邊框; 
  7. 對table設置右與下邊框; 
  8. 為了便于截圖,我們將css 注釋說明換行排版 
  9. */ 
  10. </style> 

2、對應html源代碼片段:

  1. <div class="table-c"> 
  2. <table width="400" border="0" cellspacing="0" cellpadding="0"> 
  3. <tr> 
  4. <td width="105">站名</td> 
  5. <td width="181">網址</td> 
  6. <td width="112">說明</td> 
  7. </tr> 
  8. <tr> 
  9. <td>DIVCSS5</td> 
  10. <td>阿森纳热刺 www.tzxsac.com.cn</td> 
  11. <td>CSS學習</td> 
  12. </tr> 
  13. <tr> 
  14. <td>CSS5</td> 
  15. <td>www.css5.com.cn</td> 
  16. <td>CSS切圖</td> 
  17. </tr> 
  18. </table> 

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

完美實現table表格邊框樣式截圖
CSS完美實現html table表格邊框樣式截圖

4、在線演示
查看案例

推薦此方法設置table表格邊框樣式。

四、對table和td設置背景,實現完美表格邊框   -   TOP

1、基礎設置

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

2)、設置table單元之間間距為1
使用DW軟件輔助設置table表格單元間距為1,具體DW軟件可視化操作步驟簡要說明,首先(視圖模式)選中表格后,對應DW軟件編輯窗口底部會“屬性”面板會出現對應table表格屬性設置地方,我們將“間隔”填寫為“1”。這個時候我們會看到table表格標簽里cellspacing值為“1”(cellspacing="1")。

借助DW軟件設置表格單元之間間距
借助DW軟件設置表格單元之間間距

直接對<table>標簽內cellspacing="1"即可,得到:

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

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

2、css代碼:

  1. <style> 
  2. .table-d table{ background:#F00} 
  3. .table-d table td{ background:#FFF} 
  4. /* 
  5. css注釋:設置table背景為紅色,td背景為白色 */ 
  6. </style> 

3、對應html源代碼:

  1. <div class="table-d"> 
  2. <table width="400" border="0" cellspacing="1" cellpadding="0"> 
  3. <tr> 
  4. <td width="105">站名</td> 
  5. <td width="181">網址</td> 
  6. <td width="112">說明</td> 
  7. </tr> 
  8. <tr> 
  9. <td>DIVCSS5</td> 
  10. <td>阿森纳热刺 www.tzxsac.com.cn</td> 
  11. <td>CSS學習</td> 
  12. </tr> 
  13. <tr> 
  14. <td>CSS5</td> 
  15. <td>www.css5.com.cn</td> 
  16. <td>CSS切圖</td> 
  17. </tr> 
  18. </table> 
  19. </div> 

4、表格邊框案例截圖

設置表格背景顏色實現邊框樣式截圖
設置表格背景顏色實現邊框樣式截圖

五、css table表格邊框實現總結   -   TOP

以上四種方式實現table表格邊框樣式方法,推薦使用第三和第四種方法來解決表格邊框樣式。希望DIVCSS5整理總結html table邊框布局方法對大家有幫助并能掌握,平時需要時靈活運用。

所有方式在線演示:
查看案例

擴展相關CSS教程閱讀:
1、css字間距
2、css表格隔行變色 
3、css table表格寬度 
4、什么時候使用table布局 
5、css背景顏色 
6、html 表格 

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/wenji/w503.shtml

北京麻将牌去哪里买 古剑ol最快赚钱法 网络捕鱼大圣闹海 靠抖音刷赞赚钱么 在日本赚钱容易吗 玩游戏赚钱的游戏可提现 菠萝小组如何快速赚钱 悟空智能赚钱提现不到账 末世之红警无敌 利用房租赚钱 外卖店一个月多少销量赚钱 卖蒸面皮赚钱吗 捕鱼千炮可以赚钱吗 彩票资金分配赚钱 vr彩票游戏 骑马与砍杀隋唐金融传怎么赚钱