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中文网其他相关文章!