使用css怎么給表格設(shè)置邊框

本篇文章為大家展示了使用css怎么給表格設(shè)置邊框，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

什么是css

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

默認(rèn)表格是沒(méi)有邊框的

<table>
	<tr>
		<td>商品</td>
		<td>價(jià)格</td>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔庫(kù)</td>
		<td>￥150</td>
	</tr>
</table>

我們可以通過(guò)css來(lái)給表格添加邊框。

方法1：只對(duì)表格table標(biāo)簽設(shè)置邊框

只對(duì)table標(biāo)簽設(shè)置border（邊框）樣式，將讓此表格最外層table一個(gè)邊框，而表格內(nèi)部不產(chǎn)生邊框樣式。

語(yǔ)法：

table{
	border: 1px solid red;
}

效果圖：

方法2：對(duì)td設(shè)置邊框

對(duì)table表格td設(shè)置邊框樣式，表格對(duì)象內(nèi)td將實(shí)現(xiàn)邊框樣式，但中間部分td會(huì)導(dǎo)致出現(xiàn)雙邊框。

語(yǔ)法：

td{
border: 1px solid red;
}

效果圖：

如果覺(jué)得雙線效果不好看?？梢栽O(shè)置：

table {
        border-collapse: collapse;
        
}

為表格（table）設(shè)置合并邊框模型（合并邊框），效果圖：

上述內(nèi)容就是使用css怎么給表格設(shè)置邊框，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。