HTML表格：深入理解復(fù)雜性與樣式

本文深入探討HTML表格的復(fù)雜性及其CSS樣式的應(yīng)用。HTML表格包含標(biāo)題、行組和列組等元素，渲染順序?yàn)椋罕砀?、列組、列、行組、行、單元格。HTML表格模型以行為中心，單元格結(jié)構(gòu)上包含在行內(nèi)。

CSS提供了十個(gè)與表格相關(guān)的display屬性值，用于控制表格樣式。這些值也可應(yīng)用于其他元素，但可能需要生成匿名表格相關(guān)元素才能正確渲染。

表格及其列的寬度由兩種算法決定：固定表格布局算法和自動(dòng)表格布局算法。前者不受表格單元格內(nèi)容影響，后者需要檢查表格中的每個(gè)單元格，對(duì)于大型表格來(lái)說(shuō)可能非常耗時(shí)。

CSS2定義了兩種渲染內(nèi)部表格對(duì)象邊框的模型：分離邊框模型和折疊邊框模型。分離邊框模型只允許單元格和表格本身有邊框，而折疊邊框模型允許行、行組、列、列組和表格本身的邊框以復(fù)雜的方式重疊。

列和列組元素的屬性

只有少數(shù)屬性可應(yīng)用于display屬性值為table-column或table-column-group的元素：邊框?qū)傩裕▋H在折疊邊框模型中）、背景屬性（單元格和行具有透明背景）、寬度屬性和可見(jiàn)性屬性值collapse（其他可見(jiàn)性值將被忽略）。

表格寬度算法

與其他塊級(jí)框不同，寬度設(shè)置為auto且水平邊距為零的表格不會(huì)填充其包含塊。表格大小將由其內(nèi)容決定。 可以使用margin-left和margin-right設(shè)置為auto來(lái)水平居中表格。

確定表格列寬度的算法有兩種：固定表格布局算法和自動(dòng)表格布局算法，由table-layout屬性（值分別為fixed和auto，初始值為auto）指定。如果表格寬度指定為auto，通常使用自動(dòng)表格布局算法。對(duì)于塊級(jí)表格（display設(shè)置為table），用戶代理可以但并非必須使用固定表格布局算法。

固定表格布局算法中，列和表格的寬度不受表格單元格內(nèi)容影響。每列寬度如下確定：

• 寬度不為auto的列對(duì)象設(shè)置該列的寬度。
• 寬度不為auto的第一行單元格設(shè)置其所屬列的寬度。如果單元格跨越多列，則寬度將平均分配到這些列。
• 剩余列平均分配剩余水平空間（減去任何邊框或單元格間距）。

表格寬度為表格寬度屬性值和列寬度總和（加上邊框或單元格間距）中的較大值。如果表格比列寬，則額外空間將分配到列上。

切勿省略單元格！

由于第一行單元格用于確定列寬，因此如果使用固定表格布局算法，則不應(yīng)從第一行省略任何單元格。 CSS2.1規(guī)范中未定義此情況下的行為。

自動(dòng)表格布局算法通常需要多次遍歷。CSS2.1規(guī)范建議了一種確定列寬度的算法，但用戶代理無(wú)需使用它。該算法檢查整個(gè)表格中的每個(gè)單元格，計(jì)算渲染每個(gè)單元格所需的最小和最大寬度。然后，這些值用于確定每列的寬度，這反過(guò)來(lái)又可能決定表格本身的寬度。

由于必須檢查每個(gè)單元格，因此對(duì)于具有大量行和/或列的表格，自動(dòng)表格布局算法可能非常耗時(shí)。

表格高度算法

如果表格高度屬性的值不是auto，并且指定的高度與行高總和（加上邊框或單元格間距）不同，則行為未定義。行、行組和單元格的高度屬性的百分比值未定義。每個(gè)單元格的vertical-align屬性決定其在行內(nèi)的對(duì)齊方式。只允許baseline、top、bottom和middle值。對(duì)于任何其他值，將使用baseline。

表格對(duì)象的邊框

CSS2中存在兩種渲染內(nèi)部表格對(duì)象邊框的模型：分離邊框模型和折疊邊框模型。可以使用border-collapse屬性將其值設(shè)置為separate（初始值）或collapse來(lái)選擇首選模型。

在分離邊框模型中，只有單元格（和表格本身）可以有邊框；行、行組、列和列組不可以。邊框分別繪制在單元格周圍，單元格之間由border-spacing屬性指定的垂直和水平距離分隔。在單元格邊框之間的空間中，行、行組、列和列組的背景是不可見(jiàn)的。只有表格背景在單元格間距中可見(jiàn)。

border-collapse屬性設(shè)置為collapse時(shí)，單元格之間不會(huì)分開(kāi)，它們的邊框（以及行、行組、列、列組和表格本身的邊框）將以相當(dāng)復(fù)雜的方式折疊（或重疊）。

border-spacing和empty-cells屬性在使用折疊邊框模型時(shí)將被忽略。

(以下為FAQ部分，由于篇幅限制，此處僅保留標(biāo)題，完整內(nèi)容請(qǐng)參考原文)

• 表格的基本格式化步驟
• 如何使表格響應(yīng)式
• 如何合并表格單元格
• 如何向表格添加邊框
• 如何更改表格的背景顏色
• 如何對(duì)齊表格中的文本
• 如何向表格添加標(biāo)題
• 如何以不同方式設(shè)置表格的第一行或列的樣式
• 如何向表格添加懸停效果
• 如何使表格更易訪問(wèn)

以上是表格式的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！