- 劍指大前端全棧工程師（全2冊）
- 賈志杰 史廣 趙東彥編著
- 1704字
- 2024-12-28 11:22:31
2.5 表格
在HTML中，使用<table>標簽來定義表格。HTML中的表格和Excel中的表格類似，都包括行、列、單元格等元素。表格在文本和圖像的位置控制方面都有很強的功能。在制作網頁時，使用表格可以更清晰地排列數據，如圖2-26所示。
圖2-26 網頁中表格的應用場景
2.5.1 表格概述
表格由行、列和單元格3部分組成，一般通過3個標簽來創建，分別是表格標簽<table>、行標簽<tr>和單元格標簽<td>。在學習表格之前，不妨先來看一段簡單的HTML代碼，如例2-21所示。
【例2-21】 表格展示
在瀏覽器中的顯示效果如圖2-27所示。
圖2-27 表格展示效果
在上述代碼中使用了<table>、<tr>、<td>及<th>共4個標簽：
（1）<table>表示表格，表格的所有內容需要寫在<table>和</table>之間。
（2）<tr>是Table Row的簡稱，表示表格的行。表格中有多少個<tr>標簽就表示有多少行數據。
（3）<td>是Table Datacell的簡稱，表示表格的單元格，這才是真正存放表格數據的標簽。單元格的數據可以是文本、圖片、列表、段落、表單、水平線、表格等多種形式。
（4）<th>是Table Heading的簡稱，表示表格的表頭。<th>其實是<td>單元格的一種變體，本質上還是一種單元格。<th>一般位于第1行，充當每列的標題。大多數瀏覽器會把表頭顯示為粗體居中的文本。
定義一個表格時所使用的標簽如表2-12所示。
表2-12 常用表格標簽及描述
注意：<tr>只能包含<td>或<th>。
2.5.2 表格標題
使用<caption>標簽為表格設置標題，標題用來描述表格的內容。
常見的表格一般有標題，表格的標題使用<caption>標簽來表示。默認情況下，表格的標題位于整個表格的第1行并且居中顯示。一個表格只能有一個標題，也就是說<table>標簽中只能有一個<caption>標簽，如例2-22所示。
【例2-22】 表格標題
在瀏覽器中的顯示效果如圖2-28所示。
圖2-28 表格標題使用效果
2.5.3 表格屬性
表格在網頁中是數據分析的最好展示工具之一，在實際應用中借助于表格標簽和標簽屬性可以完成表格的裝飾和美化。表格標簽的屬性如表2-13所示。
表2-13 表格標簽的屬性、值及描述
表格中各自屬性所控制的區域如圖2-29所示，表格屬性的設置如例2-23所示。
圖2-29 表格屬性控制區域
【例2-23】 表格屬性設置
在瀏覽器中的顯示效果如圖2-30所示。
圖2-30 表格屬性設置效果展示
2.5.4 表格行和列的屬性
表格中行、列屬性的設置與表格的屬性設置類似，只需將相關的屬性值添加在行、列標簽中。
表格中行<tr>的屬性用于設置表格某一行的樣式，其屬性設置如表2-14所示。
表2-14 行標簽的屬性表
表格列標簽<td>、<th>的屬性可以設置表格單元格的顯示風格，其屬性設置如表2-15所示。
表2-15 列標簽的屬性表
表格行、列屬性的設置應用如例2-24所示。
【例2-24】 設置表格行、列屬性
在瀏覽器中的顯示效果如圖2-31所示。
圖2-31 表格行、列屬性應用效果
2.5.5 合并單元格
和Excel類似，HTML也支持單元格的合并，包括跨行合并和跨列合并兩種。
（1）rowspan：表示跨行合并。在HTML代碼中，允許使用rowspan屬性來表明單元格所要跨越的行數。
（2）colspan：表示跨列合并。同樣，在HTML中，允許使用colspan屬性來表明單元格所要跨越的列數。
使用格式如下：
n是一個整數，表示要合并的行數或者列數。
將多個內容合并時，會有多余的單元格，需把它們刪除。例如，把3個td合并成一個，那就多余了兩個，需要刪除，即刪除的個數=合并的個數－1，如例2-25所示。
【例2-25】 合并單元格
在瀏覽器中的顯示效果如圖2-32所示。
圖2-32 合并單元格
注意：不論是rowspan還是colspan都是<td>標簽的屬性。
2.5.6 表格嵌套
表格的嵌套就是表格里又有表格，表格的嵌套作用一方面可以使外觀更漂亮，另一方面出于布局的需要，或者兩者皆有。只要在外表格（最外面的表格）的<td></td>標簽間嵌套對應的table標簽就行了，如例2-26所示。
基本語法如下：
【例2-26】 表格嵌套
在瀏覽器中的顯示效果如圖2-33所示。
圖2-33 表格嵌套效果圖
2.5.7 綜合實戰
以“淘寶店鋪”項目為例，利用表格及常用標簽對淘寶網站首頁的布局進行設計，使用表格標簽及標簽屬性的設置來美化表格，設計效果如圖2-34所示。
圖2-34 淘寶店鋪頁面
淘寶店鋪頁面的布局分為頭部區域、主體區域、底部區域。頭部區域包含了logo、搜索框及導航條；主體區域分為左右兩側，主要是店鋪和商品信息的詳細描述；底部區域主要是友情鏈接。
1．頭部設計
頭部區域的布局采用兩個表格分別對logo、搜索框、導航條等圖片進行引入，具體的代碼如下：
2．主體設計
主體區域分為左右兩側區域，本質是表格的左右兩列。右側區域中每個店鋪是一個完整的表格，共3個店鋪，即在右側列中嵌套了3個完整的表格，具體的代碼如下：
3．底部設計
底部區域也通過表格布局引入圖片，具體的代碼如下：
