使用html表元素属性

HTML表属性使您能够更好地控制HTML表。有许多属性可用于表,以使它们更有趣并更改页面的外观。...

HTML表属性使您能够更好地控制HTML表。有许多属性可用于表,以使它们更有趣并更改页面的外观。

Side View Of Man Working In Office

html表元素属性

在HTML5中,元素使用全局属性和一个其他属性,并且它已更改为仅具有值1或空(即border=“”)。如果要更改边框的宽度,应使用border width CSS属性。

请参见下文以了解有效的HTML5表属性。

HTML 4.01规范中还有几个属性在HTML5中已经过时:

  • -对表的TD和TH元素使用CSS padding属性。
  • -在表格上使用CSS属性边框间距。
  • -使用CSS样式边框颜色:黑色;和桌子上的边框样式。
  • -使用CSS样式边框颜色:黑色;并在表格的相应元素上添加边框样式。
  • -相反,您应该在标题中描述表的结构,或者将整个表放在一个图中,并在一个FIGCAPTION中描述它。或者,您可以简化表的结构,这样就不需要解释了。
  • -使用CSS宽度属性。

还有一个属性在HTML4.01中被弃用,在HTML5中也被废弃。

  • 对齐使用CSS边距属性。

还有几个属性不是任何HTML规范的一部分。如果您知道您支持的浏览器可以处理这些属性,并且您不关心有效的HTML,请使用这些属性。

  • -改为使用CSS属性“背景色”。
  • bordercolor使用CSS属性bordercolor代替。
  • bordercolorlight使用CSS属性border color代替。
  • bordercolordark使用CSS属性BorderColor代替。
  • cols除此属性外,没有其他选择。
  • 高度使用CSS属性height代替。
  • -改为使用CSS属性页边距。
  • -改为使用CSS属性空白。
  • -改为使用CSS属性垂直对齐。

html5表格元素属性

正如我们前面提到的,除了全局属性之外,只有一个属性在HTML5表元素上有效:border。

border属性用于定义整个表及其所有单元格周围的边框。关于它是否会包含在HTML5规范中,存在一些问题,但它仍然存在,因为它提供了关于表结构的信息,而不仅仅是样式含义。

要添加边框属性,如果有边框,则将该值设置为1;如果没有边框,则将该值设置为空(或禁用该属性)。大多数浏览器还支持0表示无边框,以及任何其他整数值(2、3、30、500等)以像素表示边框的宽度,但这在HTML5中已经过时。相反,您应该使用CSS边框样式属性来定义边框宽度和其他样式。

要创建带边框的表,请编写:

border=“1”>这是一个带有边框的表。该表描述了在HTML 4.01中有效但在HTML5中已过时的表属性。如果您仍在编写HTML4.01文档,则可以使用这些属性,但大多数属性都有其他选项,可以让您的页面在迁移到HTML5时更加经得起未来的考验。

有效的HTML4.01属性

我们上面描述的属性。HTML4.01与HTML5的唯一区别在于,您可以指定任何整数(0、1、2、15、20、200等)来定义边框的宽度(以像素为单位)。

要构建具有5px边框的表,请编写:

border="5">

这张桌子有5px的边框。

该属性定义单元格边框和单元格内容之间的空间量。默认值为两个像素。如果不希望内容和边框之间留有空格,请将cellpadding设置为0。

要将单元格填充设置为20,请写入:

cellpadding="20">

这张桌子有20个床垫。

单元格边框将由20个像素分隔。

查看带有单元格填充的表的示例

该属性定义表格单元格和单元格内容之间的空间量。与cellpadding一样,默认设置为两个像素,因此如果不需要单元格间距,则必须将其设置为0。

要向表格中添加单元格间距,请写入:

cellspacing="20">

这张桌子的单元格间距是20。

单元格将被20个像素隔开。

该属性标识围绕表外部的边框的哪些部分将可见。你可以在桌子的四个面上,任何一面,顶部和底部,左侧和右侧,或者没有。

以下是仅具有左侧边框的表格的HTML:

frame=“lhs”>此表格将仅为左侧加框。另一个底部框架示例:

frame=“below”>此表格底部有一个框架。请查看一些带有框架的表格

该属性与框架属性类似,只是它影响表格单元格周围的边框。您可以在所有单元格、列之间、组之间(如TBODY和TFOOT)或无上设置规则。

要生成仅在行之间包含行的表,请编写:

rules=“rows”>此4x4表中的行未使用therules属性进行列线。另一个表的列之间有行:

rules=“cols”>此isa表格中的列高亮显示该属性为屏幕阅读器和可能在读取表格时遇到问题的其他用户代理提供有关表格的信息。要使用summary属性,您需要编写表的简要描述,并将其作为属性值。在大多数标准web浏览器中,摘要不会显示在网页上。

下面是如何编写带有摘要的简单表格:

summary="This is a sample table that contains filler information. The purpose of this table is to demonstrate a summary.">

第1列第1行

第2列第1行

第1列第2行

第2列第2行

该属性以像素或容器元素的百分比定义表的宽度。如果未设置宽度,则表将只占用显示内容所需的空间,最大宽度与父元素的宽度相同。

要构建具有特定宽度(以像素为单位)的表,请写入:

width="300">

这张桌子是它所在容器宽度的80%。

要构建宽度为父元素百分比的表,请编写:

width="80%">

这张桌子是它所在容器宽度的80%。

不推荐使用的HTML4.01表属性

TABLE元素的一个属性在HTML4.01中被弃用,在HTML5中被废弃:align。此属性允许您设置表格相对于其旁边的文本在页面上的位置。该属性在HTML4.01中已被弃用,您应该避免使用它。相反,您应该使用CSS属性或左边距:auto;和右边距:自动;风格。float属性提供的结果更接近align属性提供的结果,但它可能会影响页面其余内容的显示方式。右边距:自动;左边距:自动;是W3C推荐的替代方案。

下面是一个使用align属性的弃用示例:

align="right">

这张桌子是右对齐的

文本围绕它向左流动

要使用有效(未弃用)HTML获得相同的效果,请编写:

style="float:right;">

这张桌子是右对齐的

文本围绕它向左流动

过时的表属性

前面的信息描述了HTML元素的属性,这些属性在HTML4.01中有效,但在HTML5中已过时。

下表描述了在任何当前规范中无效的属性。如果您不关心页面是否有效,用户是否使用支持这些元素的浏览器,那么您可以使用这些元素。但它们中的大多数要么在现代浏览器中不受支持,要么有更符合标准的替代方案。

我们不建议在HTML表上使用这些属性。

该属性是在CSS得到广泛支持之前包含的一个旧属性。它允许您更改表格的背景色。可以设置颜色名称或十六进制代码。这个属性在很多浏览器中仍然有效,但是对于未来的HTML,您不应该使用它,而应该使用CSS。

此属性的更好替代方法是“样式”属性。

要更改表格的背景色,请写入:

style="background-color: #ccc;">

这张桌子的背景是灰色的

与bgcolor属性类似,bordercolor属性允许您更改属性的颜色。只有Internet Explorer才支持此属性。相反,应该使用“边框颜色样式”属性。

要更改表格边框的颜色,请写入:

style=“边框颜色:红色;”>此表有红色边框。Internet Explorer中包含bordercolorlight和bordercolordark属性,允许您在表周围创建3D边框。但是,从IE8及以上版本开始,这仅在IE7标准模式和怪癖模式下受支持。Microsoft声明不再支持这些属性。

在很短的一段时间内,TABLE元素上的cols属性被用来帮助浏览器知道一个表有多少列。前提是这将有助于加快大型表的呈现。但是,它仅由Internet Explorer实现,从IE8及以上版本开始,这仅在IE7标准模式和Quirks模式下受支持。

因为有一个宽度属性(在HTML5中已经过时),所以很多人认为表也有一个高度属性。但由于表格符合其内容的宽度或CSS或width属性中定义的宽度,因此无法约束高度。因此,浏览器允许height属性定义表的最小高度。如果桌子比那个高度高,它会显示得更高。但是你应该使用这个属性

使用CSS height属性,如果您还使用CSS属性来定义任何多余内容的情况,则可以约束高度。

要设置桌子上的最小高度,请写入:

style="height: 30em;">

这张桌子至少有30个ems高。

这两个属性并在表的左/右侧(hspace)和上/底部(vspace)周围添加了空间。您应该改用style属性。

要将垂直空间设置为20像素,将水平空间设置为40像素,请写入:

style="margin: 20px 40px;"

此表的vspace为20像素,hspace为40像素。

该属性是一个布尔属性,用于定义表的内容是否应在父元素或窗口的边缘换行或强制水平滚动。相反,您应该使用CSS属性定义每个表单元格的包装特征。

要使包含大量文本的列不换行,请编写:

style=“空白:nowrap;”&燃气轮机;这是一个内容丰富的专栏。但即使文本比容器宽,也不应换行到下一行,而是强制浏览器窗口水平滚动以查看所有内容。最后,该属性定义了每个单元格的内容在单元格内的垂直对齐方式。您应该在要更改对齐方式的每个单元格上使用CSS属性,而不是此无效属性。除非单元格的内容小于其他较大单元格创建的可用空间,否则不会注意到此样式的效果。

要强制单元格与底部对齐(默认情况下是与中间对齐),请写入:

此单元比其他单元长,因此将强制使高度更高。因此,您将看到垂直对齐的单元格与底部对齐&燃气轮机;内容在底部,内容在中间。

  • 发表于 2021-09-04 21:31
  • 阅读 ( 155 )
  • 分类:IT

你可能感兴趣的文章

基本的html常见问题,你应该书签

...HTML代表超文本标记语言,是一组简单的web浏览器指令。使用这些说明,浏览器将显示网页的外观。 ...

  • 发布于 2021-03-25 17:43
  • 阅读 ( 240 )

如何在css中设置背景图像

...是HTML或超文本标记语言。HTML用于创建网站。尽管您可以使用HTML控制网站的一些样式,CSS提供了更多的控制和设计选项。 ...

  • 发布于 2021-03-29 12:38
  • 阅读 ( 356 )

部门(div)和跨度(span)的区别

...l 超文本标记语言(hypertextmarkup Language,HTML)是一种广泛使用的标记语言,是指在web浏览器中显示的网页背后的结构和代码。 HTML是一个文本文件,它使用特定的代码(语法)来定义页面的样式、内容、布局和格式。标记术语表...

  • 发布于 2021-06-24 23:59
  • 阅读 ( 252 )

身份证件(id)和css中的类(class in css)的区别

...本Hello World 1和Hello World 2将以蓝色显示。 可以对多个元素使用同一类。因此,类选择器用于多个元素。 身份**(id)和css中的类(class in css)的区别 定义 id是CSS中的选择器,用指定的id设置元素的样式,而class是CSS中的选择器,用指定...

  • 发布于 2021-06-30 21:53
  • 阅读 ( 316 )

标签(tag)和html中的属性(attribute in html)的区别

...页的结构。程序员不能直接在网站上写这些元素。他必须使用标签将特定元素写入网页。大多数元素都有开始标记和结束标记。换言之,元素包含在start和end标记中。此外,诸如换行符和水平线之类的元素没有闭合标记。下面是...

  • 发布于 2021-07-02 01:17
  • 阅读 ( 531 )

html元素:块级(html elements: block-level)和内联元素(inline elements)的区别

...数HTML元素都是块级元素。 块级元素在HTML文档的主体中使用。它们可以包含内联元素以及其他块级元素。 内联元素 与块级元素相比,内联元素: 它可以在一行内开始。 它不会开始新的生产线。 其宽度仅扩展到由其标记...

  • 发布于 2021-09-04 22:28
  • 阅读 ( 173 )

什么是id属性?(the id attribute?)

...为网页执行多个操作: 样式表选择器:这是大多数人使用ID属性的功能。因为它们是唯一的,所以在使用ID属性进行样式设置时,您将只对网页上的一个项目进行样式设置。使用ID进行样式设置的缺点是,它具有非常高的特殊...

  • 发布于 2021-09-04 22:38
  • 阅读 ( 138 )

如何html(dhtml)用于创建交互式页面(html (dhtml) is used to create interactive pages)

...CSS) XHTML 多姆 DOM允许您访问Web页面的任何部分,并使用DHTML对其进行更改。网页的每个部分都由DOM指定,使用其一致的命名约定,您可以访问它们并更改它们的属性。 剧本 用JavaScript或ActiveX编写的脚本是用于激活DHTML的...

  • 发布于 2021-09-04 23:13
  • 阅读 ( 190 )

使用样式类和ID

...该元素的所有实例应用样式。要实现这些所需的样式,请使用class和ID HTML属性。这些属性是适用于几乎每个HTML标记的全局属性,因此,无论您是为文档中的分区、段落、链接、列表或任何其他HTML片段设置样式,都可以使用class...

  • 发布于 2021-09-04 23:37
  • 阅读 ( 187 )

如何向html标记添加属性(add an attribute to an html tag)

...记名后面加一个空格(在本例中为“p”)。然后添加要使用的属性名,后跟等号。最后,属性值将放在引号中。例如: <p class="opening"> 标记可以有多个属性。可以使用空格将每个属性与其他属性分开。 <p class="openin...

  • 发布于 2021-09-04 23:46
  • 阅读 ( 229 )
you939978630
you939978630

0 篇文章

相关推荐