通过学习表格属性充分利用HTML表格
HTML表格属性为您提供了对HTML表格的更多控制。 表格中有很多属性可以使它们更有趣，并改变页面的外观。
HTML TABLE元素属性
在HTML5中，元素使用全局属性和另一个属性：。 它已更改为只有值1或空（即border =“”）。 如果你想改变边框的宽度，你应该使用border-width CSS属性。
请参阅下文以了解有效的HTML5表格属性。
HTML5中还有几个属性是HTML 4.01规范的一部分：
- - 在表格的TD和TH元素上使用CSS填充属性。
- - 在表格上使用CSS属性border-spacing。
- - 使用CSS样式border-color：black; 和桌子上的边框风格。
- - 使用CSS样式border-color：black; 并以表格的适当元素为边界样式。
- 相反，您应该在CAPTION中描述表格的结构，或者将整个表格放在图中并在FIGCAPTION中进行描述。 或者，您可以简化表格的结构，以便不需要解释。
- - 使用CSS宽度属性。
还有一个在HTML 4.01中被弃用的属性，在HTML5中也是过时的。
了解有关HTML 4.01 TABLE属性的更多信息。
- align -使用CSS margin属性。
还有几个不属于任何HTML规范的属性。
如果您知道您支持的浏览器可以处理它们，并且您不关心有效的HTML，请使用这些属性。
- - 改用CSS属性background-color。
- bordercolor - 使用CSS属性border-color来代替。
- bordercolorlight - 使用CSS属性border-color代替。
- bordercolordark - 使用CSS属性border-color代替。
- cols - 这个属性没有其他选择。
- 高度 - 改为使用CSS属性高度。
- - 改用CSS属性边距。
- - 改用CSS属性边距。
- - 改为使用CSS属性空白。
- - 使用CSS属性vertical-align代替。
了解有关浏览器特定TABLE属性的更多信息。
HTML5 TABLE元素属性
正如我们上面提到的，除了全局属性之外，只有一个属性在HTML5 TABLE元素上是有效的：border。
边界属性用于定义整个表格及其中所有单元格的边框。 关于它是否会包含在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中有效的TABLE属性，但在HTML5中已过时。 如果您仍然编写HTML 4.01文档，则可以使用这些属性，但其中大多数都有替代方法，这些替代方法可以使您的页面在未来移至HTML5时更具前瞻性。
有效的HTML 4.01属性
我们上面描述的属性。
HTML 4.01与HTML5的唯一区别在于，您可以指定任何整数（0,1,2,15,20,200等）以像素为单位定义边框的宽度。
要建立一个5px边框的表格，写下：
border =“5” >
此表格有5px的边框。
查看两个带有边框的表格的示例。
该属性定义了单元格边框和单元格内容之间的空间量。 默认值是两个像素。 如果内容和边框之间不需要空格，请将cellpadding设置为0。
要将单元格填充设置为20，请写下：
cellpadding =“20” >
该表格的cellpadding为20。
单元格边框将被分隔20像素。
查看带cellpadding的表的示例
该属性定义表格单元格和单元格内容之间的空间量。 像cellpadding一样，默认设置为两个像素，因此如果不需要单元格间距，则必须将其设置为0。
要将单元格间距添加到表中，请写下：
cellspacing =“20” >
此表格的单元格间隔为20。
单元格将以20像素分隔。
查看带有细胞间距的表格
该属性标识了表格外围的边界部分是可见的。 你可以在所有四边，任何一边，顶部和底部，左边和右边，或没有框架你的桌子。
以下是只有左侧边框的表格的HTML：
frame =“lhs” >
这张表
将有
只有
左边框。
而底部框架的另一个例子是：
frame =“below” >
该表的底部有一个框架。
查看一些带有框架的表格
该属性与框架属性相似，只是它影响表格单元格周围的边框。 您可以在所有单元格之间，列之间，TBODY和TFOOT之间或不设置规则。
要仅在行之间建立一个只包含行的表 ，请写下：
rules =“rows” >
这张4x4的表格有
行不是列
概述了
规则属性。
另一个在列之间的行：
rules =“cols” >
这是
一张表
其中
列
是
高亮
这是一个包含规则的表格的例子
该属性提供有关屏幕阅读器和其他用户代理的表格的信息，这些代理可能在阅读表格时遇到困难 要使用摘要属性，请写下表格的简要说明并将其作为属性的值。 摘要将不会显示在大多数标准网页浏览器的网页上。
以下是如何编写一个带有摘要的简单表格：
summary =“这是一个包含填充信息的示例表，这个表的目的是为了展示一个总结。” >
第1行第1行
第2行第1行
第1行第2行
第2行第2列
查看带有摘要的表格
该属性用两个像素或容器元素的百分比定义表格的宽度。 如果未设置宽度，则表格将只占用显示内容所需的尽可能多的空间，其最大宽度与父元素的宽度相同。
要以像素为单位创建具有特定宽度的表格，请写下：
width =“300” >
这个表格是它所在容器宽度的80％。
要构建一个宽度为父元素百分比的表，请写下：
width =“80％” >
这个表格是它所在容器宽度的80％。
查看具有宽度的表格的示例
不推荐使用HTML 4.01 TABLE属性
有一个TABLE元素的属性在HTML 4.01中被弃用，并在HTML5中被废弃： align 。 通过此属性，您可以设置表格在页面上的位置，并与其旁边的文本相对应。 该属性在HTML 4.01中已被弃用，您应该避免使用它。 相反，你应该使用CSS属性或margin-left：auto; 和margin-right：auto; 样式。 float属性给出的结果更接近align属性提供的结果，但它会影响页面内容其余部分显示的方式。 保证金 - 右：汽车; 和margin-left：auto; 是W3C推荐的替代方案。
以下是使用align属性的已弃用示例：
align =“right” >
该表格是右对齐的
文本左右移动
使用align属性查看已弃用的示例。
要获得与有效（不推荐）HTML相同的效果，请写下：
style =“float：right;” >
该表格是右对齐的
文本左右移动
以下解释了不属于任何HTML规范的TABLE属性。
以前的信息描述了在HTML 4.01中有效的HTML元素的属性，但在HTML5中已过时。
以下描述了当前规范中无效的TABLE属性。 如果你不关心你的页面是否有效，并且你的用户使用支持这些元素的浏览器，那么你可以使用这些元素。 但其中大多数在现代浏览器中不受支持，或者有更符合标准的替代方案。
我们不建议在HTML表格上使用这些属性 。
该属性是在CSS得到广泛支持之前包含的旧属性。 它允许您更改表格的背景颜色。 您可以设置颜色名称或十六进制代码。 该属性在很多浏览器中仍然有效，但对于面向未来的HTML，您不应该使用它，而是使用CSS代替。
这个属性的更好的替代方案是样式属性。
要更改表格的背景颜色，请写下：
style =“background-color：#ccc;” >
这张表有一个灰色背景
与bgcolor属性类似，bordercolor属性允许您更改属性的颜色。 此属性仅受Internet Explorer支持。 相反，您应该使用边框颜色样式属性。
要更改表格边框的颜色，请写下：
style =“border-color：red;” >
该表格有红色边框。
Internet Explorer中包含bordercolorlight和bordercolordark属性，以允许您在表格周围创建3D边框。 但是，从IE8开始，这仅在IE7标准模式和怪癖模式下受支持。 微软表示不再支持这些属性。
在短时间内，TABLE元素上的cols属性被提出来帮助浏览器知道表有多少个列。 前提是这将有助于加速渲染大型表格。 然而，它只是由IE浏览器实现的，从IE8开始，它只支持IE7标准模式和怪异模式。
因为有一个width属性（在HTML5中是过时的），很多人都认为表格也有高度属性。 但是因为表格符合其内容的宽度或CSS或width属性中定义的宽度，所以高度不能被约束。 相反，浏览器允许height属性定义表的最小高度。 如果桌子比这个高度高，它会显示更高。 但你应该使用这个属性
使用CSS高度属性，您可以限制高度，如果您也使用CSS属性来定义发生任何多余的内容。
要设置表格的最小高度，请写下：
style =“height：30em;” >
这个表格至少有30埃姆高。
表格的左/右侧（hspace）和顶部/底部（vspace）周围的两个属性和增加的空间。 您应该改用style属性。
要将垂直空间设置为20像素，将水平空间设置为40像素，请写下：
style =“margin：20px 40px;”
该表具有20像素的vspace和40像素的hspace。
该属性是一个布尔属性，用于定义表格的内容是应该包装在父元素或窗口的边缘还是强制水平滚动。 相反，您应该使用CSS属性定义每个表格单元格的包装特征。
要制作一个包含大量文本的列，请写下：
<表>
style =“white-space：nowrap;” >这是一个有很多内容的专栏。 但即使它比容器宽，文本也不应该换行到下一行，而是强制浏览器窗口水平滚动以查看所有内容。
最后，该属性定义每个单元格的内容应该如何在单元格内垂直对齐。 而不是这个无效的属性，你应该使用每个单元格上的CSS属性来更改对齐方式。 除非单元格的内容小于其他较大单元格创建的可用空间，否则您将不会注意到该风格的影响。
要强制一个单元格对齐底部（而不是中间，作为默认），写：
<表>
这个单元比其他单元长，所以会强制高度更高。 因此，您会看到垂直对齐的单元格与底部对齐。
style =“vertical-align：bottom;” >底部的内容。
中间内容