1、第第1515章章 CSSCSS控制表格元素的顯示控制表格元素的顯示 表格元素，一般用來顯示矩陣格式的數據。在CSS中，可以通過相應的表現屬性，來定義表格元素的表現效果。除了可以定義表格的邊框、補白、邊界等屬性之外，還可以使用表格獨有的CSS屬性，例如邊框合并屬性（border-collapse）等，對表格進行進一步的控制。通過本章學習，應該掌握以下知識要點： 熟悉CSS控制表格元素邊框的各個屬性及其應用。 屬性單元格的制約關系。 精確控制表格與單元格的大小。第1頁/共14頁15.1 15.1 控制表格元素的顯示控制表格元素的顯示 在CSS中，表格元素的控制，包括控制表格邊框是否合并、控制表格邊

2、框間距、表格標題位置等幾個方面的內容。由于瀏覽器對CSS屬性的支持情況不同，部分屬性只有在特定的瀏覽器中才能夠顯示相應的效果。下面進行詳細講解。第2頁/共14頁15.1.1 15.1.1 邊框合并屬性邊框合并屬性boderboder-collapse-collapse 邊框合并屬性（boder-collapse），用來定義表格中邊框是獨立顯示還是合并顯示。在邊框合并屬性中，使用的屬性值有兩個，separate、collapse。第3頁/共14頁15.1.2 15.1.2 表格邊框間距屬性表格邊框間距屬性border-spacingborder-spacing 表格邊框間距屬性（border-s

3、pacing），用來定義表格中獨立邊框之間的距離。在表格邊框間距屬性中，使用的屬性值是長度值。第4頁/共14頁15.1.2 15.1.2 表格邊框間距屬性表格邊框間距屬性border-spacingborder-spacing第5頁/共14頁15.1.3 15.1.3 表格標題位置屬性表格標題位置屬性caption-sidecaption-side 表格標題位置屬性（caption-side），用來定義表格中標題元素顯示的位置。在表格標題位置屬性中，可以使用4個屬性值：top、right、bottom、left。第6頁/共14頁15.1.4 15.1.4 表格布局屬性表格布局屬性table-l

4、ayouttable-layout 表格布局屬性（table-layout），用來定義表格和表格內容之間的關系。在表格布局屬性中，可以使用兩個屬性值：auto和fixed，其語法結構如下所示。 table-layout : auto | fixed;第7頁/共14頁15.1.4 15.1.4 表格布局屬性表格布局屬性table-layouttable-layout第8頁/共14頁15.2 15.2 單元格的制約關系單元格的制約關系 在使用表格元素的時候，通過定義CSS樣式，可以控制單元格的高度、寬度等顯示效果。當在某個單元格中定義了相應的屬性，與該單元格相鄰的單元格也將會受到影響。同時當多個單

5、元格中，定義的高度和寬度與表格高度、寬度發生矛盾時，表格中單元格也會做相應的調整。其中具體的內容，如下所示。第9頁/共14頁15.2.1 15.2.1 確定單行或列的寬度或高度確定單行或列的寬度或高度 在使用表格元素的時候，由于表格中存在多個行或列，同時在每個單元格中都可以定義寬度和高度。當在某一列中，單元格中定義的寬度不同（并且不超過表格的寬度）時，會使用較大的寬度值。但是在某一行中，當定義某個單元格的高度屬性值時，如果其他行沒有定義任何高度屬性，則按照最小的高度顯示。第10頁/共14頁15.2.2 15.2.2 確定多行或列的寬度或高度確定多行或列的寬度或高度 如果再同個行或列中，每個單元格中都定義了寬度或者高度屬性值。并且所有單元格寬度或高度之和與表格的寬度或高度不相等。此時每個單元格，將按照各自定義的寬度比例確定最終的寬度。而在高度方面，每個單元格均保持各自的高度。第11頁/共14頁15.2.2 15.2.2 確定多行或列的寬度或高度確定多行或列的寬度或高度第12頁/共14頁15.2.3 15.2.3 單元格與嵌套的單元格與嵌套的 div元素元素 在制作