×

cellspacing属性在哪个标签中使用

cellspacing属性在哪个标签中使用(表格cellspacing属性)

admin admin 发表于2023-07-10 14:32:15 浏览34 评论0

抢沙发发表评论

本文目录

表格cellspacing属性

  • 单元格(cell) -- 表格的内容

  • 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间

  • 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离

  • 引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

5、表格中的cellspacing属性是设置表格的 *

cellspacing 属性规定单元之间的空间,以像素计。

注意:请勿将该属性与 cellpadding 属性相混淆,cellpadding 属性规定的是单元边沿与单元内容之间的空间。

举例子说明:

《!DOCTYPE html》《html》    《head》        《meta charset=“utf-8“》        《title》练习使用HTML《/title》    《/head》    《body》        《center》            《table border=“black 1px solid“ cellspacing=“0“》                《tr》                    《td》hello《/td》                    《td》world《/td》                《/tr》                《tr》                    《td》hello《/td》                    《td》world《/td》                《/tr》            《/table》        《/center》    《/body》《/html》

演示(加cellspacing=“0“前后对比):

HTML中表格属性有哪些

《table width=“800“ border=“0“ align=“center“ cellpadding=“0“ cellspacing=“0“》

该标记标示表格的开始,该表格宽度为800像素,边框粗细为0( 即不显示边框 ),对齐方式“水平居中“,单元格边距“0“,单元格间距“0“。

表格属性的设置及相关说明:

border: 用于设置表格边框的粗细,属性值为数值,数值越大,框线越粗,如果设置border=“0“,则表示不显示表格框线

background: 用于设置表格的背景图片,属性值为URL( 图片所在路径及图片文件的文件名 )

例:

《table background=“URL“》      《!--设置表格背景图片--》 

cellspacing: 用于设置表格内框线宽度( 即单元格间距 ),属性值为数值( 单位为像素 ),数值越大,单元格间距越大,若未设置,默认值为2

例:

《table cellspacing=“1“》       《!--设置表格中单元格间距为1--》 

cellpadding: 用于设置表格内文字与表格框线之间的间距( 单元格边距 ),属性值为数值( 单位为像素 ),数值越大,表格内文字与表格框线的间距越大,该属性的设置值必须是大于或等于0的正整数值,若未设置,默认值为1

例:

《table cellpadding=“0“》       《!--设置表格中单元格边距为0--》 

width: 用于设置表格的宽度( 也可用于设置单元格《td》或《th》宽度 ),属性值可以是数值( 单位为像素 ),也可以是百分比( 相对于父级目标的比例值 ),数值越大,表示宽度越大( 注: 设置width属性时,可以先设置表格的宽度,再依次设置各单元格的宽度,也可以不设置表格的宽度,仅设置表格中各单元格的宽度 )

例:

《table width=“100“》            《!--设置表格宽度为100像素--》

《td width=“20%“》               《!--设置单元格宽度为所在表格宽度的20%--》 

height: 用于设置表格的高度( 也可用于设置单元格《td》或《th》高度 ),属性值可以是数值( 单位为像素 ),也可以是百分比( 相对于父级目标的比例值 ),数值越大,表示高度越大( 注: 设置height属性时,可以先设置表格的高度,再依次设置各单元格的高度,也可以不设置表格的宽度,仅设置表格中各单元格的高度 )

例:

《td height=“30“》               《!--设置单元格高度为30像素--》 

bgcolor: 用于设置表格或单元格或表格中的行或列的背景颜色,属性值可以使用颜色名称,或使用三原色混色值

例:

《table bgcolor=“blue“》         《!--设置表格背景颜色为蓝色--》

《td bgcolor=“black“》           《!--设置单元格背景颜色为黑色--》 

align: 用于设置表格或单元格的对齐方式。在《table》标记中设置align属性用于设置表格的对齐方式,包括: center( 表格居中对齐 ),left( 表格左对齐,默认值 ),right( 表格右对齐 )。在行《tr》或单元格《td》或《th》标记中设置align属性用于设置单元格内文字的对齐方式,包括: center( 单元格内文字居中对齐 ),left( 单元格内文字左对齐,默认值 ),right( 单元格内文字右对齐 )

valign: 用于设置单元格内文字垂直对齐方式,包括: top( 单元格内文字顶端对齐 ),middle( 单元格内文字垂直居中对齐,默认值 ),bottom( 单元格内文字底端对齐 ) 

《tr》

表格中的行标记,tr即table row的缩写,《tr》标记为成对标记,用于设置表格中一行的开始和结束及该行的相关属性,表格中有多少行,则该表格的《table》…《/table》标记内就有多少对《tr》…《/tr》标记与之对应。

例:

《tr valign=“top“》

该标记标示行的开始,垂直对齐方式“顶端对齐“( 默认为垂直居中对齐 )。

《tr》标记中的水平对齐属性:align=“left“( 左对齐 ); align=“center“( 居中 ); align=“right“( 右对齐 )。

《tr》标记中的垂直对齐属性:valign=“top“( 顶端 ); valign=“middle“( 居中 ); valign=“bottom“( 靠下 )。 

《td》

表格中的字段( 列 )数据标记,td即table Data的缩写,《td》标记为成对标记,用于设置字段数据的开始和结束及字段的相关属性,表格中有多少列,则该表格的《table》…《/table》标记内就有多少对《td》…《/td》标记与之对应。

例:

《td width=“50%“》

该标记标示一个单元格的开始,该单元格宽度设置为父级目标宽度的50%。

《th》

表格中列标题( 字段名 )定义标记,th是Table Header的缩写,《th》标记为成对标记,用于设置表格的表头名称( 字段名 ),该标记内文字的对齐方式为水平居中且垂直居中,字体加粗。也可以在该标记内使用align和valign设置该字段内的对齐方式,其设置值的有效范围只限于该数据。在《tr》标记内,align和valign对该行中的所有字段均有效。

《border》

《table》标记中的属性之一,用于设置表格边框的粗细。Border属性值可用数值表示,其值为0或省略此项设置表示不显示边框,数值越大表示框线越粗。

在table里cesspadding 和cellspacing是用来定义表格什么属性的都还有哪些常用到的属性

Cellspacing属性表示两个单元格之间的距离cellpadding,是补白,是指单元格内文字与边框的距离在table中控制单元格之间的间距要用到。默认情况cellspacing、cellpadding均不为0,通常情况下不让table单元格之间的间距影响到美观,经常会把cellspacing、cellpadding设置为0。这样做无形中增加了代码的体积,而且也不符合样式与内容分离的web标准,一般做大型网站页面的时候通常用css控制cellspacing/cellpadding的!另外在工作当中,table的应用并不需要太复杂的属性设置。一般基础教程里都有所介绍。也就是一些width、height、align、valign、class、nowrap、bgcolor 、bordercolor等等的基本设置。在DW中,你可以直接在属性里设置,不需要输入代码的。当然你最好是把它们记下来,这样可以压缩代码,去掉不必要的代码,节省文件的大小。当然最好的办法还是学习下CSS的应用。

table的cellspacing和cellpadding有什么区别

  cellpadding和cellspacing区别:  cellspacing属性用来指定表格各单元格之间的空隙。此属性的参数值是数字,表示单元格间隙所占的像素点数。  看下面的两个表格:  比较代码,上边两个表格中只有cellspacing的设置不同,一个为“0”,一个为“8”,显示的结果就是第一个表格的每个单元格之间的距离为0(在本例中由于我们为了显示的方便,将表格边框设为“1”,所以单元格的真实距离是“2”,若将表格边框设为“0”,则单元格的距离就是0了,第二个单元格同理),第二个表格的每个单元格之间的距离为8。  cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小。此属性的参数值也是数字,表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。我们先来看看这个例子:  看下面两个表格:  第一个表格单元格的内容与单元格边界之间没有空白距离,而第二个表格单元格的内容与单元格边界之间有空白距离,我们来比较一下他们的源代码:  第一个表格的代码:  <tablewidth=“240“cellspacing=“0“border=“1“bordercolor=“#000000“cellpadding=“0“>  <tr>  <tdwidth=“120“>网页陶吧</td>  <td></td>  </tr>  </table>  第二个表格的代码:  <tablewidth=“240“cellspacing=“0“border=“1“bordercolor=“#000000“cellpadding=“15“>  <tr>  <tdwidth=“120“>网页陶吧</td>  <td></td>  </tr>  </table>   两个表格只有红色部分代码不同。第一个表格中“网页陶吧“这几个字离它所在的单元格为0,那是因为设置了cellpadding=“0“的原因.第一个表格中的“网页陶吧“这几个字离它所在的单元格比较远,那是因为cellpadding=“15“,也就是说“网页陶吧“离它所在的单元格的边界的距离为20像素。简单的说,cellpadding的值等于多少,那表格内的单元格从自身边界开始向内保留多少空白,单元格里的元素永远都不会进入那些空白里。