4.2　表格的高级应用

4.2.1　表格的样式

除了基本表格，表格还可以设置一些基本的样式属性。例如，可以设置表格的宽度、高度、对齐方式、插入图片等。

语法格式如下：

通过一个实例，在<td>单元格标签中插入<img>图标标签，实现一个商品推荐表格的制作。首先通过<table>表格标签，创建一个表格框架，然后利用<tr>行标签和<td>单元格标签，输入商品的文字内容，最后在最末一组<td>单元格标签中使用<img>图标标签，在单元格中插入具体商品图片。具体代码如下：

本实例的运行效果如图4.4所示。

4.2.2　表格的合并

表格的合并是指在复杂的表格结构中，有些单元格是跨多列的，有些单元格是跨多行的，其语法格式如下：

在该语法中，跨的列数是指单元格在水平方向上跨的列数；跨的行数是指单元格在垂直方向上跨的行数。

通过一个实例，使用<tr>行标签中的rowspan属性，将多行合并成一行，实现一个较复杂的课程表的制作。首先使用<table>表格标签，新建一个表格框架，然后通过<tr>行标签和<td>单元格标签，完成常规表格的制作，最后在希望合并的单元格标签<td>中，添加属性rowspan，属性值为2，表示将两行合并为一行。关键代码如下：

本实例的运行效果如图4.5所示。

4.2.3　表格的分组

表格可以使用<colgroup>标签对列进行样式控制，如单元格的背景颜色、字体大小等，其语法格式如下：

在该语法中，使用<colgroup>标签对表格中的列进行控制，使用<col>标签对具体的列进行控制。

下面通过一个实例，使用<colgroup>标签，制作了一个学生联系方式表格，并对列进行样式控制。首先使用<table>表格标签，创建了一个表格框架；然后使用<colgroup>标签，对每一列单元格内容进行颜色设置；最后通过<tr>行标签和<td>单元格标签完成学生联系方式表格的制作。具体代码如下：

本实例的运行效果如图4.6所示。