cellspacing和cellpadding区别

cellspacing和cellpadding区别
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

cellspacing和cellspadding区别

属性 含义 常用属性值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值(默认为2px)
cellspadding 设置单元格内容与单元格边框之间的空白距离 像素值(默认为1px)

不使用任何的cellspacing和cellspdding修饰:

<table border="1">
		<tr>
			<td>公司</td>
			<td>性质</td>
			<td>平均薪资</td>
		</tr>
		<tr>
			<td>阿里巴巴</td>
			<td>民营企业</td>
			<td>18k</td>
		</tr>
		<tr>
			<td>工商银行</td>
			<td>国有企业</td>
			<td>8k</td>
		</tr>
	</table>

结果如图所示: 

 

使用cellspacing修饰,设置为0

    <table border="1" cellspacing="0">
		<tr>
			<td>公司</td>
			<td>性质</td>
			<td>平均薪资</td>
		</tr>
		<tr>
			<td>阿里巴巴</td>
			<td>民营企业</td>
			<td>18k</td>
		</tr>
		<tr>
			<td>工商银行</td>
			<td>国有企业</td>
			<td>8k</td>
		</tr>
	</table>

发现单元格与单元格之间无间距 因为cellspcing设置为0

 

使用cellspaddcing修饰,设置为10

    <table border="1" cellspacing="0" cellpadding="10">
		<tr>
			<td>公司</td>
			<td>性质</td>
			<td>平均薪资</td>
		</tr>
		<tr>
			<td>阿里巴巴</td>
			<td>民营企业</td>
			<td>18k</td>
		</tr>
		<tr>
			<td>工商银行</td>
			<td>国有企业</td>
			<td>8k</td>
		</tr>
	</table>

发现单元格内容与单元格边框间距变大。

本文来源itcats_cn,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/8048

发表评论