6.2 新建表格
表格有多种形式，如简单的表格、带标题的表格、结构化的表格、列分组的表格等，本节将介绍这些不同形式的表格的设计方法。
6.2.1 定义普通表格
视频讲解
使用table元素可以定义HTML表格。简单的HTML表格由一个table元素，以及一个或多个tr和td元素组成，其中tr元素定义表格行，td元素定义表格的单元格。
【示例】下面示例设计一个简单的HTML表格，包含两行两列，演示效果如图6.2所示。
图6.2 设计简单的表格
6.2.2 定义列标题
视频讲解
在数据表格中，每列可以包含一个标题，这在数据库中被称为字段，在HTML中被称为表头单元格。使用th元素定义表头单元格。
提示：HTML表格中有两种类型的单元格：
表头单元格：包含表头信息，由th元素创建。
标准单元格：包含数据，由td元素创建。
在默认状态下，th元素内部的文本呈现为居中、粗体显示，而td元素内通常是左对齐的普通文本。
【示例1】下面示例设计一个含有表头信息的HTML表格，包含两行两列，演示效果如图6.3所示。
表头单元格一般位于表格的第一行，当然，用户可以根据需要把表头单元格放在表格中的任意位置。例如，第一行或最后一行，第一列或最后一列等。也可以定义多重表头。
【示例2】下面示例设计了一个简单的课程表，表格中包含行标题和列标题，即表格被定义了两类表头单元格，演示效果如图6.4所示。
图6.3 设计带有表头的表格
图6.4 设计双表头的表格
6.2.3 定义表格标题
视频讲解
有时为了方便浏览，用户需要为表格添加一个标题。使用caption元素可以定义表格标题。
注意：须紧随table元素之后，只能对每个表格定义一个标题。
【示例】以上节示例1为基础，下面示例为上节示例1的表格添加一个标题，演示效果如图6.5所示。
图6.5 设计带有标题的表格
从图6.5中可以看到，在默认状态下这个标题位于表格上面居中显示。
提示：在HTML4中，可以使用align属性设置标题的对齐方式，取值包括left、right、top、bottom。在HTML5中不建议使用，建议使用CSS样式取而代之。
6.2.4 表格行分组
视频讲解
thead、tfoot和tbody元素可以对表格中的行进行分组。当创建表格时，如果希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行，这样可以设计独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
使用thead元素可以定义表格的表头，该标签用于组合HTML表格的表头内容，一般与tbody和tfoot元素结合起来使用。其中tbody元素用于对HTML表格中的主体内容进行分组，而tfoot元素用于对HTML表格中的表注（页脚）内容进行分组。
【示例】下面示例使用上述各种表格标签对象，设计一个符合标准的表格结构，代码如下所示。
在上面示例代码中，可以看到<tfoot>是放在<thead>和<tbody>之间，而最终在浏览器中会发现<tfoot>中的内容显示在表格底部。在<tfoot>标签中有一个colspan属性，该属性的主要功能是横向合并单元格，将表格底部的两个单元格合并为一个单元格，示例效果如图6.6所示。
图6.6 表格结构效果
注意：当使用thead、tfoot和tbody元素时，必须使用全部的元素，排列次序是thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚，且这些元素必须在table元素内部使用。在默认情况下，这些元素不会影响到表格的布局。不过，用户可以使用CSS使这些元素改变表格的外观。在<thead>标签内部必须包含<tr>标签。
6.2.5 表格列分组
视频讲解
ccol和colgroup元素可以对表格中的列进行分组。
其中使用<col>标签可以为表格中一个或多个列定义属性值。如果需要对全部列应用样式，<col>标签很有用，这样就不需要对各个单元格和各行重复应用样式了。
【示例1】下面示例使用col元素为表格中的三列设置不同的对齐方式，效果如图6.7所示。
图6.7 表格列分组样式
在上面示例中，使用3个col元素为表格中三列分别定义不同的对齐方式。这里使用HTML标签属性align设置对齐方式，取值包括right（右对齐）、left（左对齐）、center（居中对齐）、justify（两端对齐）和char（对准指定字符）。由于浏览器支持不统一，不建议使用align属性。
提示：只能在table或colgroup元素中使用col元素。col元素是仅包含属性的空元素，不能够包含任何信息。如要创建列，就必须在tr元素内嵌入td元素。
使用<colgroup>标签也可以对表格中的列进行组合，以便对其进行格式化。如果需要对全部列应用样式，<colgroup>标签很有用，这样就不需要对各个单元和各行重复应用样式了。
【示例2】下面示例使用colgroup元素为表格中每列定义不同的宽度，效果如图6.8所示。
图6.8 定义表格列分组样式
<colgroup>标签只能在table元素中使用。
为列分组定义样式时，建议为<colgroup>或<col>标签添加class属性，然后使用CSS类样式定义列的对齐方式、宽度和背景色等样式。
【示例3】从上面两个示例可以看到，<colgroup>和<col>标签具有相同的功能，同时也可以把<col>标签嵌入到<colgroup>标签中使用。
如果没有对应的col元素，列会从colgroup元素那里继承所有的属性值。
提示：span是<colgroup>和<col>标签专用属性，规定列组应该横跨的列数，取值为正整数。例如，在一个包含6列的表格中，第一组有4列，第二组有2列，这样的表格在列上进行分组，如下所示：
<colgroup span="4"></colgroup>
<colgroup span="2"></colgroup>
浏览器将表格的单元格合成列时，会将每行前四个单元格合成第一个列组，将接下来的两个单元格合成第二个列组。这样，<colgroup>标签的其他属性就可以用于该列组包含的列中了。
如果没有设置span属性，则每个<colgroup>或<col>标签代表一列，按顺序排列。
注意：现代浏览器都支持<colgroup>和<col>标签，但是Firefox、Chrome和Safari浏览器仅支持col和colgroup元素的span和width属性。也就是说，用户只能够通过列分组为表格的列定义统一的宽度，另外也可以定义背景色，但是其他CSS样式不支持。虽然IE支持，但是不建议用户去应用。通过示例2，用户也能够看到CSS类样式中的“color:red;”和“font-size:16px;”都没有发挥作用。
【示例4】下面示例定义如下几个类样式，然后分别应用到<col>列标签中，显示效果如图6.9所示。
图6.9 设计隔列变色的样式效果