css表格設定邊框的方法:1、使用border屬性為table元素新增邊框,語法「table{border:寬度樣式顏色;}」;2、使用border屬性為td元素新增邊框,語法「 td{border:寬度樣式顏色;}」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
預設表格是沒有邊框的
<table> <tr> <td>商品</td> <td>价格</td> </tr> <tr> <td>T恤</td> <td>¥100</td> </tr> <tr> <td>牛仔褂</td> <td>¥250</td> </tr> <tr> <td>牛仔库</td> <td>¥150</td> </tr> </table>
我們可以透過css來為表格新增邊框。
方法1:只對表格table標籤設定邊框
只對table標籤設定border(邊框)樣式,將讓此表格最外層table一個邊框,而表格內部不產生邊框樣式。
語法:
table{ border: 1px solid red; }
效果圖:
#方法2:對td設定邊框
對table表格td設定邊框樣式,表格物件內td將實現邊框樣式,但中間部分td會導致出現雙邊框。
語法:
td{ border: 1px solid red; }
效果圖:
#如果覺得雙線效果不好看。可以設定:
table { border-collapse: collapse; }
為表格(table)設定合併邊框模型(合併邊框),效果圖:
(學習影片分享: css影片教學)
以上是css怎麼給表格設定邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!