2.3 表格元素table

表格是由指定數目的行和列組成，每行的列數通常一致，同行單元格高度一致且水平對齊，同列單元格寬度一致且垂直對齊，這種嚴格的約束形成了一個不易變形的長方形盒子結構，堆疊排列起來結構很穩定，表格中的內容按照相應的行或列進行分類和顯示。表格將文本和圖像按行、列排列，它與列表一樣，有利于表達信息。

2.3.1 基本表格

表格用﹤table﹥標簽定義，標簽標題用﹤caption﹥標簽定義；每個表格有若干行，用﹤tr﹥標簽定義；每行被分隔為若干個單元格，用﹤td﹥標簽定義；當單元格是表頭時，用﹤th﹥標簽定義。定義表格元素的格式為：

表格是一行一行建立的，在每一行中填入該行每一列的表項數據。可以把表頭看作一行，只不過用的是﹤th﹥標簽。在瀏覽器中顯示時，﹤th﹥標簽的文字按粗體顯示，﹤td﹥標簽的文字按正常字體顯示。

表格的整體外觀由table元素的屬性決定。

1）border屬性：定義表格邊框的粗細，n為整數，單位為像素。如果省略，則不帶邊框。

2）width屬性：定義表格的寬度，x為像素數或百分數（占窗口的）。

3）height屬性：定義表格的高度，y為像素數或百分數（占窗口的）。

4）cellspacing屬性：定義表項間隙，i為像素數。

5）cellpadding屬性：定義表項內部空白，j為像素數。

【例2-9】 在頁面中添加一個4行3列的表格。本例文件2-9.html在瀏覽器中的顯示效果如圖2-9所示。

表格所使用的邊框粗細等樣式一般應放在專門的CSS樣式文件中（后續章節講解），此處講解這些屬性僅僅是為了演示表格案例中的頁面效果，在真正設計表格外觀的時候是通過CSS樣式完成的。

2.3.2 跨行跨列表格

在表格中合并單元格，跨行是指單元格在垂直方向上合并，跨列是指單元格在水平方向上合并。﹤th﹥標簽可以使用rowspan和colspan兩個屬性，分別表示該單元格縱跨多少行和橫跨多少列。定義跨行跨列表格的格式為：

【例2-10】 跨行跨列表格示例。本例文件2-10.html在瀏覽器中的顯示效果如圖2-10所示。

表格跨行跨列以后，并不改變表格的特點。表格中同行的內容總高度一致，同列的內容總寬度一致，各單元格的寬度或高度互相影響，結構相對穩定，不足之處是不能靈活地進行布局控制。

2.3.3 表格數據的分組

表格數據的分組標簽包括﹤thead﹥、﹤tbody﹥和﹤tfooter﹥，主要用于對表格數據進行邏輯分組。其中，﹤thead﹥標簽對應表格的表頭；﹤tbody﹥標簽對應表格的主體；﹤tfooter﹥對應表格的頁腳，即對各分組數據匯總的部分。各分組標簽內由多行﹤tr﹥組成，子元素僅有td和th。

標簽﹤tbody﹥、﹤thead﹥、﹤tfoot﹥通常用于對表格內容進行分組，當創建某個表格時，希望擁有一個標題行、一些帶有數據的行，以及位于底部的一個總計行。這種劃分使瀏覽器有能力支持獨立于表格標題和頁腳的表格正文滾動。當長的表格被打印時，表格的表頭和頁腳可被打印在包含表格數據的每張頁面上。

【例2-11】 表格分組示例。本例文件2-11.html在瀏覽器中的顯示效果如圖2-11所示。

為了區分表格各部分的顏色，這里使用了style樣式屬性分別為thead、tbody和tfooter元素設置背景色，此處只是為了演示頁面效果。

2.3.4 調整列的格式

為了調整列的格式，對表格中的列組合后，可以用以下標簽對表格中的列定義屬性值。

1）﹤colgroup﹥：對表格中的列進行組合，以便對其進行格式化。

2）﹤col﹥：為表格中一個或者多個列定義屬性值，通常位于colgroup元素內。

【例2-12】列格式示例。本例文件2-12.html在瀏覽器中的顯示效果如圖2-12所示。