首頁 > web前端 > css教學 > css怎麼給表格設定邊框

css怎麼給表格設定邊框

青灯夜游
發布: 2023-01-05 16:10:20
原創
35515 人瀏覽過

css表格設定邊框的方法:1、使用border屬性為table元素新增邊框,語法「table{border:寬度樣式顏色;}」;2、使用border屬性為td元素新增邊框,語法「 td{border:寬度樣式顏色;}」。

css怎麼給表格設定邊框

本教學操作環境: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怎麼給表格設定邊框

我們可以透過css來為表格新增邊框。

方法1:只對表格table標籤設定邊框

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

語法:

table{
	border: 1px solid red;
}
登入後複製

效果圖:

css怎麼給表格設定邊框

#方法2:對td設定邊框

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

語法:

td{
border: 1px solid red;
}
登入後複製

效果圖:

css怎麼給表格設定邊框

#如果覺得雙線效果不好看。可以設定:

table {
        border-collapse: collapse;
        
}
登入後複製

為表格(table)設定合併邊框模型(合併邊框),效果圖:

css怎麼給表格設定邊框

(學習影片分享: css影片教學

以上是css怎麼給表格設定邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板