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所示。