表格式

HTML表格：深入理解复杂性与样式

本文深入探讨HTML表格的复杂性及其CSS样式的应用。HTML表格包含标题、行组和列组等元素，渲染顺序为：表格、列组、列、行组、行、单元格。HTML表格模型以行为中心，单元格结构上包含在行内。

表格格式化对象

CSS提供了十个与表格相关的display属性值，用于控制表格样式。这些值也可应用于其他元素，但可能需要生成匿名表格相关元素才能正确渲染。

表格及其列的宽度由两种算法决定：固定表格布局算法和自动表格布局算法。前者不受表格单元格内容影响，后者需要检查表格中的每个单元格，对于大型表格来说可能非常耗时。

CSS2定义了两种渲染内部表格对象边框的模型：分离边框模型和折叠边框模型。分离边框模型只允许单元格和表格本身有边框，而折叠边框模型允许行、行组、列、列组和表格本身的边框以复杂的方式重叠。

分离边框渲染

折叠边框渲染

列和列组元素的属性

只有少数属性可应用于display属性值为table-column或table-column-group的元素：边框属性（仅在折叠边框模型中）、背景属性（单元格和行具有透明背景）、宽度属性和可见性属性值collapse（其他可见性值将被忽略）。

表格宽度算法

与其他块级框不同，宽度设置为auto且水平边距为零的表格不会填充其包含块。表格大小将由其内容决定。 可以使用margin-left和margin-right设置为auto来水平居中表格。

确定表格列宽度的算法有两种：固定表格布局算法和自动表格布局算法，由table-layout属性（值分别为fixed和auto，初始值为auto）指定。如果表格宽度指定为auto，通常使用自动表格布局算法。对于块级表格（display设置为table），用户代理可以但并非必须使用固定表格布局算法。

固定表格布局算法中，列和表格的宽度不受表格单元格内容影响。每列宽度如下确定：

• 宽度不为auto的列对象设置该列的宽度。
• 宽度不为auto的第一行单元格设置其所属列的宽度。如果单元格跨越多列，则宽度将平均分配到这些列。
• 剩余列平均分配剩余水平空间（减去任何边框或单元格间距）。

表格宽度为表格宽度属性值和列宽度总和（加上边框或单元格间距）中的较大值。如果表格比列宽，则额外空间将分配到列上。

切勿省略单元格！

由于第一行单元格用于确定列宽，因此如果使用固定表格布局算法，则不应从第一行省略任何单元格。 CSS2.1规范中未定义此情况下的行为。

自动表格布局算法通常需要多次遍历。CSS2.1规范建议了一种确定列宽度的算法，但用户代理无需使用它。该算法检查整个表格中的每个单元格，计算渲染每个单元格所需的最小和最大宽度。然后，这些值用于确定每列的宽度，这反过来又可能决定表格本身的宽度。

由于必须检查每个单元格，因此对于具有大量行和/或列的表格，自动表格布局算法可能非常耗时。

表格高度算法

如果表格高度属性的值不是auto，并且指定的高度与行高总和（加上边框或单元格间距）不同，则行为未定义。行、行组和单元格的高度属性的百分比值未定义。每个单元格的vertical-align属性决定其在行内的对齐方式。只允许baseline、top、bottom和middle值。对于任何其他值，将使用baseline。

表格对象的边框

CSS2中存在两种渲染内部表格对象边框的模型：分离边框模型和折叠边框模型。可以使用border-collapse属性将其值设置为separate（初始值）或collapse来选择首选模型。

在分离边框模型中，只有单元格（和表格本身）可以有边框；行、行组、列和列组不可以。边框分别绘制在单元格周围，单元格之间由border-spacing属性指定的垂直和水平距离分隔。在单元格边框之间的空间中，行、行组、列和列组的背景是不可见的。只有表格背景在单元格间距中可见。

border-collapse属性设置为collapse时，单元格之间不会分开，它们的边框（以及行、行组、列、列组和表格本身的边框）将以相当复杂的方式折叠（或重叠）。

border-spacing和empty-cells属性在使用折叠边框模型时将被忽略。

(以下为FAQ部分，由于篇幅限制，此处仅保留标题，完整内容请参考原文)

• 表格的基本格式化步骤
• 如何使表格响应式
• 如何合并表格单元格
• 如何向表格添加边框
• 如何更改表格的背景颜色
• 如何对齐表格中的文本
• 如何向表格添加标题
• 如何以不同方式设置表格的第一行或列的样式
• 如何向表格添加悬停效果
• 如何使表格更易访问

以上是表格式的详细内容。更多信息请关注PHP中文网其他相关文章！