Skip to main content

如何使用'TABLE'元素属性(HTML)

[HTML][中文][初學] 13. 表格介紹 table (可能 2025)

[HTML][中文][初學] 13. 表格介紹 table (可能 2025)
Anonim

HTML表属性使您可以更好地控制HTML表。表格有很多属性可以使它们更有趣并改变页面的外观。

HTML TABLE元素属性

在HTML5中,元素使用全局属性和另一个属性:。而且它已变为仅具有价值 1 或空(即 BORDER = “”)。如果要更改边框的宽度,则应使用 边框宽度 CSS属性。

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

还有一些属性是HTML 4.01规范的一部分,在HTML5中已经过时了:

  • - 使用CSS 填充 桌子上的财产 TDTH 元素。
  • - 使用CSS属性 边框间距 在桌子上。
  • - 使用CSS样式 边框颜色:黑色;边框样式 在桌子上。
  • - 使用CSS样式 边框颜色:黑色;边框样式 关于表格的适当元素。
  • - 相反,你应该用a来描述表格的结构 字幕 或把整个表放在一个 数字 并在一个。中描述它 FIGCAPTION。或者,您可以简化表的结构,以便不需要解释。
  • - 使用CSS 宽度 属性。

并且在HTML 4.01中已弃用的一个属性在HTML5中也已过时。

了解有关HTML 4.01 TABLE属性的更多信息。

  • 对齐 - 使用CSS 余量 财产而不是。

还有一些属性不属于任何HTML规范。如果您知道您支持的浏览器可以处理它们而您不关心有效的HTML,请使用这些属性。

  • - 使用CSS属性 背景颜色 代替。
  • 边框颜色 - 使用CSS属性 边框颜色 代替。
  • bordercolorlight - 使用CSS属性 边框颜色 代替。
  • bordercolordark - 使用CSS属性 边框颜色 代替。
  • COLS - 这个属性别无选择。
  • 高度 - 使用CSS属性 高度 代替。
  • - 使用CSS属性 余量 代替。
  • - 使用CSS属性 余量 代替。
  • - 使用CSS属性 空白 代替。
  • - 使用CSS属性 垂直对齐 代替。

了解有关特定于浏览器的TABLE属性的详细信息。

HTML5表元素属性

如上所述,除了全局属性之外,只有一个属性在HTML5上有效 元件: 边界.

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

添加 边界 属性,您将值设置为 1 如果有边框并且空(或省略属性),如果没有。大多数浏览器也会支持 0 没有边框,以及任何其他整数值(2,3,30,500等)来声明边框的宽度(以像素为单位),但这在HTML5中已经过时了。相反,您应该使用CSS边框样式属性来定义边框宽度和其他样式。

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

BORDER = “1” > 这是一张带边框的桌子

在HTML5中有HTML 4.01属性已过时。如果您打算编写HTML 4.01文档,可以学习它们,否则,您可以忽略它们。大多数这些属性具有上述的替代方案。

我们描述了在HTML5(和HTML 4.01)中有效的元素属性。这描述了 在HTML 4.01中有效但在HTML5中已过时的属性。如果您仍然编写HTML 4.01文档,则可以使用这些属性,但是大多数文档都有其他选项可以使您的页面在转移到HTML5时更具有前瞻性。

有效的HTML 4.01属性

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

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

<> BORDER = “5” > 此表有5px边框。

查看带有边框的两个表的示例。

该属性定义单元格边框与单元格内容之间的空间量。默认值为两个像素。设置CELLPADDING0 如果你想在内容和边框之间没有空格。

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

<> CELLPADDING = “20” > 这张表有一个CELLPADDING 20。 单元格边框将分隔20个像素。

查看带有cellpadding的表的示例

该属性定义表格单元格与单元格内容之间的空间量。喜欢CELLPADDING,默认设置为两个像素,因此您必须将其设置为0 如果你不想要单元格间距。

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

<> CELLSPACING = “20” > 这张表有一个CELLSPACING 20。 细胞将被分开20个像素。

请参阅包含cellspacing的表格

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

以下是仅包含左侧边框的表格的HTML:

帧= “LHS” > 这张桌子 会有的 只有 左侧框架。

底框的另一个例子:

帧=“下方” > 这张桌子底部有一个框架。

查看一些带框架的表格

该属性类似于 属性,只影响表格单元格周围的边框。您可以在所有单元格之间,列之间,组之间设置规则TBODYTFOOT 或者没有。

要构建仅在行之间使用行的表,请写入:

规则=“行” > 这个4x4表有 行不是列 概述了 规则属性。

另一个列之间的线条:

规则= “COLS” > 这是 一张桌子 在哪里 突出

以下是带有规则的表的示例

该属性为屏幕阅读器和可能无法读取表的其他用户代理提供有关表的信息。要使用摘要 您可以写一个表的简短描述,并将其作为属性的值。大多数标准Web浏览器中的摘要不会显示在摘要中。

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

<> summary =“这是一个包含填充信息的示例表。此表的目的是演示摘要。” > 第1栏第1行 第2栏第1行 第1栏第2行 第2栏第2行

查看包含摘要的表格

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

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

<> 宽度= “300” > 该表是其所在容器宽度的80%。

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

<> 宽度= “80%” > 该表是其所在容器宽度的80%。

查看具有宽度的表的示例

不推荐使用HTML 4.01 TABLE属性

有一个属性 HTML 4.01中已弃用且HTML5中已废弃的元素:对齐。通过此属性,您可以设置表格在页面上相对于其旁边文本的位置。此属性已在HTML 4.01中弃用,您应该避免使用它。相反,您应该使用CSS属性或margin-left:auto;margin-right:auto; 样式。该浮动 属性给你一个更接近于什么的结果对齐 提供的属性,但它可以影响其余页面内容的显示方式。该margin-right:auto;margin-left:auto; 是W3C推荐的替代方案。

这是一个不推荐使用的例子对齐 属性:

<> ALIGN = “右” > 此表是右对齐的 文本向左流动

请参阅使用的弃用示例对齐 属性。

要使用有效(不推荐)的HTML获得相同的效果,请写:

<> 风格=“浮动:权利;” > 此表是右对齐的 文本向左流动

以下说明 不属于任何HTML规范的属性。

前面的信息描述了在HTML 4.01中有效但在HTML5中已过时的HTML元素的属性。

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

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

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

此属性的更好替代方法是style属性。

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

<> style =“background-color:#ccc;” > 此表具有灰色背景

类似于BGCOLOR 属性,边框颜色 属性允许您更改属性的颜色。 Internet Explorer仅支持此属性。相反,您应该使用border-color样式属性。

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

style =“border-color:red;” > 此表有红色边框。

bordercolorlightbordercolordark Internet Explorer中包含属性,允许您在表格周围创建3D边框。但是,从IE8及更高版本开始,这仅在IE7标准模式和Quirks模式下受支持。 Microsoft声明不再支持这些属性。

很短的时间了COLS 属性 提出了一个元素来帮助浏览器知道一个表有多少列。前提是这有助于加快大型表的渲染速度。但是它仅由Internet Explorer实现,从IE8及更高版本开始,仅在IE7标准模式和Quirks模式下支持。

因为有一个宽度 属性(在HTML5中已经过时)很多人都认为有一个高度 表的属性也是如此。但是因为表格符合其内容的宽度或CSS或中定义的宽度宽度 属性,高度不能被约束。相反,浏览器允许高度 attribute用于定义表的最小高度。如果桌子高于那个高度,它会显示更高。但你应该使用该属性

随着CSS高度 如果您使用CSS属性来定义任何多余内容会发生什么,您可以约束高度。

要设置表格的最小高度,请写入:

<> style =“height:30em;” > 此表至少高30埃。

这两个属性和左/右侧的附加空间(HSPACE)和顶部/底部(VSPACE)表的。您应该使用style属性。

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

<> style =“margin:20px 40px;” 该表的vspace为20像素,hspace为40像素。

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

要使包含大量文本的列不包装,请写入:

<> style =“white-space:nowrap;” >这是一个内容丰富的专栏。但即使它比容器宽,文本也不应该换行到下一行,而是强制浏览器窗口水平滚动以查看所有内容。

最后,该属性定义每个单元格的内容应如何在单元格内垂直对齐。您应该在要更改其对齐方式的每个单元格上使用CSS属性,而不是此无效属性。除非单元格的内容小于其他较大单元格创建的可用空间,否则您不会注意到此样式的效果。

要强制单元格与底部对齐(而不是中间,作为默认值),请写入:

<> style =“vertical-align:bottom;” >底部的内容。
这个单元比其他单元长,因此会迫使高度更高。因此,您将看到垂直对齐的单元格与底部对齐。中间的内容。