table 表格的属性

本文详细介绍了如何使用HTML和CSS来定制表格样式,包括添加边框、调整单元格间距及边距、实现圆角效果等技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1】.表格什么属性都不用,默认样式
<div id="test">
	<table class="table-style">
		<tr>
			<td>第一行</td>
			<td>第一行</td>
			<td>第一行</td>
			<td>第一行</td>
		</tr>
		<tr>
			<td>第二行</td>
			<td>第二行</td>
			<td>第二行</td>
			<td>第二行</td>
		</tr>
		<tr>
			<td>第三行</td>
			<td>第三行</td>
			<td>第三行</td>
			<td>第三行</td>
		</tr>
	</table>
</div>

4c0eca32d7d976df80d64df4612d2da48f8.jpg

2】.给table,td添加边框
.table-style, td{
	border:1px solid #EEE0E5;
}

35bdbf17b2865b6e231827c8db4db8a9077.jpg

3】.把表格单元格间距设置为0(cellspacing="0")

cellspacing:规定单元格之间的空间

3.1 cellspacing="0"

<table class="table-style" cellspacing="0">

bdc5f7c6bc5a11224e8be3b65738d9c76d1.jpg

单元格之间的空间去掉之后,边框会重叠,导致边框变粗

3.2 cellspacing="10"

5c293073e98ead58a6db8421c92e44c375e.jpg

4】.边框去重
.table-style{
	 border-collapse: collapse;
}

e8b597d01ce01c98765e1d76367e294e1c0.jpg

5】.表单变为圆角
.table-style{
	border-collapse: separate;
	border-radius:10px;
	overflow: hidden;
}

04b244cf8c00af9096b42c1e3c18682cdfa.jpg

border-collape设置为separate边框去重效果就失效了,

6】.cellpadding属性

规定单元边沿与其内容之间的空白

<table class="table-style" cellpadding="20">

1d69664388c5f82c14a8e7e4141648e7d00.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/u/3680343/blog/1837489

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值