HTML表格：深入理解複雜性與樣式

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

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

表格及其列的寬度由兩種算法決定：固定表格佈局算法和自動表格佈局算法。前者不受表格單元格內(nèi)容影響，後者需要檢查表格中的每個單元格，對於大型表格來說可能非常耗時。

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

列和列組元素的屬性

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

表格寬度算法

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

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

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

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

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

切勿省略單元格！

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

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

由於必須檢查每個單元格，因此對於具有大量行和/或列的表格，自動表格佈局算法可能非常耗時。

表格高度算法

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

表格對象的邊框

CSS2中存在兩種渲染內(nèi)部表格對象邊框的模型：分離邊框模型和折疊邊框模型?？梢允褂?code>border-collapse屬性將其值設(shè)置為separate（初始值）或collapse來選擇首選模型。

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

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

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

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

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

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