3.3 表格

表格是網頁中的一個重要容器元素，表格除了用來顯示數據外，還用于搭建網頁的結構。

3.3.1 表格的結構

表格是由行和列組成的二維表，而每行又由一個或多個單元格組成，用于放置數據或其他內容。表格中的單元格是行與列的交叉部分，它是組成表格的最基本單元。單元格的內容是數據，所以單元格也稱數據單元格。單元格可以包含文本、圖片、列表、段落、表單、水平線或表格等元素。表格中的內容按照相應的行或列進行分類和顯示，如圖3-11所示。

3.3.2 表格的基本語法

在HTML語法中，表格主要由3個標簽構成，包括表格標簽<table>、行標簽<tr>、表項標簽<td>。表格的語法格式如下。

在上面的語法格式中，使用<caption>標簽可為每個表格指定唯一的標題。一般情況下，標題會出現在表格的上方，<caption>標簽的align屬性可以用來定義表格標題的對齊方式。HTML標準規定，<caption>標簽要放在打開的<table>標簽之后，且網頁中的表格標題不能多于一個。

表格是按行建立的，在每一行中填入該行每一列的表項數據。表格的第一行為表頭，文字樣式為居中、加粗顯示，通過<th>標簽實現。

在瀏覽器中顯示時，<th>標簽的文字按粗體顯示，<td>標簽的文字按正常字體顯示。

表格的整體外觀由<table>標簽的屬性決定，下面將詳細講解如何設置表格的屬性。

3.3.3 表格的屬性

表格是頁面布局中的重要元素，它有豐富的屬性，可以通過屬性設置來美化表格。

1.設置表格的邊框

可以使用<table>標簽的border屬性為表格添加邊框并設置邊框寬度及顏色。按照數據單元格將表格分割成單元格，邊框的寬度以像素為單位，默認情況下表格邊框值為0。

2.設置表格大小

如果需要表格在網頁中占用適當的空間，可以通過width和height屬性指定像素值來設置表格的寬度和高度，也可以通過表格寬度占瀏覽器窗口的百分比來設置表格的大小。

width和height屬性不但可以設置表格的大小，還可以設置表格單元格的大小。為表格單元格設置width或height屬性，會影響整行或整列單元的大小。

3.設置表格背景顏色

根據網頁設計要求，通過bgcolor屬性設置表格背景顏色，以增強視覺效果。表格背景默認為白色。

4.設置表格背景圖像

表格背景圖像可以是GIF、JPEG或PNG三種圖像格式。通過background屬性，可以設置表格背景圖像。

同樣，可以使用bgcolor和background屬性為表格中的單元格添加背景顏色或背景圖像。需要注意的是，為表格添加背景顏色或背景圖像時，必須使表格中的文本內容顏色與表格的背景顏色或背景圖像形成足夠的反差，否則，將不容易分辨表格中的文本內容。

5.設置表格單元格間距

使用cellspacing屬性可以調整表格的單元格和單元格之間的間距，使得表格布局不會顯得過于緊湊。

6.設置表格單元格邊距

單元格邊距是指單元格中的內容與單元格邊框的距離，使用cellpadding屬性可以調整單元格中的內容與單元格邊框的距離。

7.設置表格在網頁中的對齊方式

表格在網頁中的位置有3種，分別為居左、居中和居右。使用align屬性設置表格在網頁中的對齊方式，在默認的情況下表格的對齊方式為左對齊。格式如下。

當表格位于頁面的左側或右側時，文本填充在另一側；當表格居中時，表格兩邊沒有文本；當align屬性省略時，文本在表格的下面。

8.表格數據的對齊方式

（1）行數據水平對齊

使用align屬性可以設置表格中數據的水平對齊方式，如果在<tr>標簽中使用align屬性，將影響整行數據在單元格中的水平對齊方式。align屬性的值可以是left、center、right，默認值為left。

（2）單元格數據水平對齊

如果在某個單元格的<td>標簽中使用align屬性，那么align屬性將影響該單元格數據的水平對齊方式。

（3）行數據垂直對齊

如果在<tr>標簽中使用valign屬性，那么valign屬性將影響整行數據單元的垂直對齊方式。這里的valign值可以是top、middle、bottom、baseline，它的默認值是middle。

【例3-9】 制作愛心包裝季度銷量一覽表。本例在瀏覽器中顯示的效果如圖3-12所示。

【說明】<th>標簽用于定義表格的表頭，以粗體、居中的方式顯示。

3.3.4 不規范表格

colspan和rowspan屬性用于創建不規范表格。所謂不規范表格是指單元格的個數不等于行乘以列的數值。在實際應用中經常使用不規范表格，需要把多個單元格合并為一個單元格，也就是要用到表格的跨行跨列功能。

1.跨行

跨行是指單元格在垂直方向上合并，語法如下。

其中，rowspan屬性指明該單元格應有多少行的跨度，在<th>和<td>標簽中使用。

2.跨列

跨列是指單元格在水平方向上合并，語法如下。

其中，colspan屬性指明該單元格應有多少列的跨度，在<th>和<td>標簽中使用。

3.跨行、跨列

【例3-10】制作一個跨行跨列展示的產品銷量表格。本例在瀏覽器中顯示的效果如圖3-13所示。

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

3.3.5 表格數據的分組

表格數據的分組標簽包括<thead>標簽、<tbody>標簽和<tfoot>標簽，主要用于對表格數據進行邏輯分組。其中，<thead>標簽定義表格的頭部；<tbody>標簽定義表格主體，即表格詳細的數據描述；<tfoot>標簽定義表格的腳部，即對各分組數據進行匯總的部分。

<thead>標簽、<tbody>標簽和<tfoot>標簽必須同時使用，它們出現的次序是<thead>標簽、<tbody>標簽、<tfoot>標簽，必須在<table>標簽內部使用這些標簽，<thead>標簽內部必須嵌套<tr>標簽。

【例3-11】 制作產品銷量季度數據報表。本例文件3-11.html的瀏覽效果如圖3-14所示。

3.3.6 案例——使用表格布局愛心包裝產品展示頁面

在講解了表格基本語法的基礎上，下面介紹表格在頁面局部布局中的應用。在設計頁面時，常需要利用表格來定位頁面元素。使用表格可以導入表格化數據，設計頁面分欄，定位頁面上的文本和圖像等。使用表格還可以實現頁面局部布局，例如產品展示、新聞列表這樣的效果，都可以采用表格來實現。

【例3-12】使用表格布局愛心包裝產品展示頁面。本例在瀏覽器中顯示的效果如圖3-15所示。