任務1.5　在網頁中添加表格

?學習目標

①能夠說出表格的三個基本元素。

②能夠使用表格標簽對表格的數據結構進行編排，從而呈現數據間的關系。

?任務描述

根據《百度搜索引擎網頁質量白皮書》效果圖，制作該白皮書中的表格。

?知識學習與課堂練習

表格的作用是組織信息。HTML表格就像是電子表格，由行和列構成，每個表格單元格處于行和列的交匯處。

①表格由＜table＞元素來定義，以＜table＞標記開始，＜/table＞標記結束。

②表格中的行以＜tr＞元素來定義，每一行都以＜tr＞標記開始，＜/tr＞標記結束。

③表格中的單元格以＜td＞元素來定義，每個單元格都以＜td＞標記開始，＜/td＞標記結束。

④表格單元格可包含文本、圖片和其他HTML元素。

其語法形式如下：

【課堂練習1.5-1】創建簡單的兩行兩列表格。

打開Visual Studio Code軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.5-1所示。

默認情況下，表格沒有邊框線，可以使用樣式表為其定義邊框線、線條樣式、粗細和邊框顏色。這在后面的章節中會學到。

1.表格的標題（＜caption＞元素）

每一個表格都可以通過＜caption＞元素來對表格的目的做一個簡單的說明，＜caption＞元素的內容用來描述表格的特征，并且＜caption＞元素必須緊接著＜table＞元素開始標簽后被定義，一個＜table＞元素中僅能包含一個＜caption＞元素。

其語法形式如下：

【課堂練習1.5-2】添加表格標題。

打開Visual Studio Code軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.5-2所示。

2.表格的表頭（th元素）

在表格中還有一種特殊的單元格，稱為表頭。表格的表頭一般位于第1行和第1列，用來配置列標題或行標題，用＜th＞和＜/th＞標簽來表示。表格的表頭與＜td＞標簽使用方法相同，但表頭元素中的文本居中和加粗顯示。

其語法形式如下：

【課堂練習1.5-3】添加表格表頭。

打開Visual Studio Code軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.5-3所示。

3.跨多行、多列的單元格

單元格可以跨越多個橫行或豎列的多個單元格，跨越橫行或豎列的數量通過rowspan或colspan屬性來對＜th＞或＜td＞元素進行設置。

（1）rowspan屬性指定單元格所占的行數

其語法形式如下：

＜td rowspan=跨的行數＞

【課堂練習1.5-4】設置單元格行跨度。

顯示效果如圖1.5-4所示。

（2）colspan屬性指定單元格所占的列數

其語法形式如下：

＜td colspan=跨的列數＞

【課堂練習1.5-5】設置單元格列跨度。

打開Visual Studio Code軟件，在＜body＞標簽中輸入如下代碼：

顯示效果如圖1.5-5所示。

?任務實施

①打開任務1.4中的index.html文件。

②完成“網頁廣告單頁”中的表格顯示效果。

?任務回顧

在日常生活中，我們對表格式數據已經很熟悉了。這種數據有多種形式，如財務數據、調查數據、事件日歷、公交時刻表、電視節目等。在大多數情況下，這類信息都會使用表格進行表示。

?任務拓展

在未知表格內容的長度而進行打印時，為了在每頁的頭尾都印出表格表頭和頁腳標簽內容（此功能需瀏覽器支持）時，需要在table元素的標簽內容中配置＜thead＞、＜tfoot＞、＜tbody＞元素。

1.表格表頭＜thead＞

＜thead＞元素用來顯示表格的表頭，為＜table＞元素的子元素，該標簽內容中可包含＜tr＞元素與＜tr＞元素的子元素。其用法為＜thead＞…＜/thead＞。

2.表格頁腳＜tfoot＞

＜tfoot＞元素用來顯示表格的頁腳，為＜table＞元素的子元素，該標簽內容中可包含＜tr＞元素與＜tr＞元素的子元素。其用法為＜tfoot＞…＜/tfoot＞。

3.表格主體＜tbody＞

＜tbody＞元素用來指定表格主體（表格的數據），為＜table＞元素的子元素，該標簽內容中可包含＜tr＞元素與＜tr＞元素的子元素。其用法為＜tbody＞…＜/tbody＞。

【課后練習】使用＜thead＞、＜tfoot＞、＜tbody＞元素完成如圖1.5-6所示的效果。