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中文網其他相關文章！
