2.5　表格

在HTML中，使用<table>标签来定义表格。HTML中的表格和Excel中的表格类似，都包括行、列、单元格等元素。表格在文本和图像的位置控制方面都有很强的功能。在制作网页时，使用表格可以更清晰地排列数据，如图2-26所示。

2.5.1　表格概述

表格由行、列和单元格3部分组成，一般通过3个标签来创建，分别是表格标签<table>、行标签<tr>和单元格标签<td>。在学习表格之前，不妨先来看一段简单的HTML代码，如例2-21所示。

【例2-21】　表格展示

在浏览器中的显示效果如图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所示。

注意：<tr>只能包含<td>或<th>。

2.5.2　表格标题

使用<caption>标签为表格设置标题，标题用来描述表格的内容。

常见的表格一般有标题，表格的标题使用<caption>标签来表示。默认情况下，表格的标题位于整个表格的第1行并且居中显示。一个表格只能有一个标题，也就是说<table>标签中只能有一个<caption>标签，如例2-22所示。

【例2-22】　表格标题

在浏览器中的显示效果如图2-28所示。

2.5.3　表格属性

表格在网页中是数据分析的最好展示工具之一，在实际应用中借助于表格标签和标签属性可以完成表格的装饰和美化。表格标签的属性如表2-13所示。

表格中各自属性所控制的区域如图2-29所示，表格属性的设置如例2-23所示。

【例2-23】　表格属性设置

在浏览器中的显示效果如图2-30所示。

2.5.4　表格行和列的属性

表格中行、列属性的设置与表格的属性设置类似，只需将相关的属性值添加在行、列标签中。

表格中行<tr>的属性用于设置表格某一行的样式，其属性设置如表2-14所示。

表格列标签<td>、<th>的属性可以设置表格单元格的显示风格，其属性设置如表2-15所示。

表格行、列属性的设置应用如例2-24所示。

【例2-24】　设置表格行、列属性

在浏览器中的显示效果如图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所示。

注意：不论是rowspan还是colspan都是<td>标签的属性。

2.5.6　表格嵌套

表格的嵌套就是表格里又有表格，表格的嵌套作用一方面可以使外观更漂亮，另一方面出于布局的需要，或者两者皆有。只要在外表格（最外面的表格）的<td></td>标签间嵌套对应的table标签就行了，如例2-26所示。

基本语法如下：

【例2-26】　表格嵌套

在浏览器中的显示效果如图2-33所示。

2.5.7　综合实战

以“淘宝店铺”项目为例，利用表格及常用标签对淘宝网站首页的布局进行设计，使用表格标签及标签属性的设置来美化表格，设计效果如图2-34所示。

淘宝店铺页面的布局分为头部区域、主体区域、底部区域。头部区域包含了logo、搜索框及导航条；主体区域分为左右两侧，主要是店铺和商品信息的详细描述；底部区域主要是友情链接。

1．头部设计

头部区域的布局采用两个表格分别对logo、搜索框、导航条等图片进行引入，具体的代码如下：

2．主体设计

主体区域分为左右两侧区域，本质是表格的左右两列。右侧区域中每个店铺是一个完整的表格，共3个店铺，即在右侧列中嵌套了3个完整的表格，具体的代码如下：

3．底部设计

底部区域也通过表格布局引入图片，具体的代码如下：