表格(table)属性cellspacing、cellpadding

表格(table)属性cellspacing、cellpaddingcellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。 我们来看下面的两个表格:    上面第一个表格的单元格之间没有空白距离,而第二个的单元格之间有很大的空白距离,我们来比较一下他们的源代码:第一个表格的代码:<tablewidth=”200″cellspacing=”0″border=”1

cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。 


我们来看下面的两个表格: 

表格(table)属性cellspacing、cellpadding     表格(table)属性cellspacing、cellpadding


上面第一个表格的单元格之间没有空白距离,而第二个的单元格之间有很大的空白距离,我们来比较一下他们的源代码:
第一个表格的代码:
<table width=”200″ cellspacing=”0″ border=”1″ bordercolor=”#000000″>
<tr> 
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

第二个表格的代码:
<table width=”200″ cellspacing=”8″ border=”1″ bordercolor=”#000000″>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>


比较代码,上边两个表格中只有 cellspacing 的设置不同,一个为“0”,一个为“8”,显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便,将表格边框设为“1”,所以单元格的真实距离是“2”,若将表格边框设为“0”,则单元格 的距离就是0了,第二个单元格同理),第二个表格的每个单元格之间的距离为8。

  cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看下面两个表格:

表格(table)属性cellspacing、cellpadding

 第一个表格单元格的内容与单元格边界之间没有空白距离,而第二个表格单元格的内容与单元格边界之间有空白距离,我们来比较一下他们的源代码:
第一个表格的代码:
<table width=”240″ cellspacing=”0″ border=”1″ bordercolor=”#000000″ cellpadding=”0”>
<tr> 
<td width=”120″>文字描述</td>
<td> </td>
</tr>
</table>

第二个表格的代码:
<table width=”240″ cellspacing=”0″ border=”1″ bordercolor=”#000000″ cellpadding=”15″>
<tr> 
<td width=”120″>文字描述</td>
<td> </td>
</tr>
</table>

  两个表格只有红色部分代码不同。第一个表格中”网页陶吧”这几个字离它所在的单元格为0,那是因为设置了cellpadding=”0″的原因.第一个表格中的”网页陶吧”这几个字离它所在的单元格比较远,那是因为cellpadding=”15″,也就是说”网页陶吧”离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/34447.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注