css怎么给表格设置边框

青灯夜游
Lepaskan: 2023-01-05 16:10:20
asal
35485 orang telah melayarinya

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>
Salin selepas log masuk

1.png

我们可以通过css来给表格添加边框。

方法1:只对表格table标签设置边框

只对table标签设置border(边框)样式,将让此表格最外层table一个边框,而表格内部不产生边框样式。

语法:

table{
	border: 1px solid red;
}
Salin selepas log masuk

效果图:

2.png

方法2:对td设置边框

对table表格td设置边框样式,表格对象内td将实现边框样式,但中间部分td会导致出现双边框。

语法:

td{
border: 1px solid red;
}
Salin selepas log masuk

效果图:

3.png

如果觉得双线效果不好看。可以设置:

table {
        border-collapse: collapse;
        
}
Salin selepas log masuk

为表格(table)设置合并边框模型(合并边框),效果图:

4.png

(学习视频分享:css视频教程

Atas ialah kandungan terperinci css怎么给表格设置边框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan