2.3 表格元素table

表格是由指定数目的行和列组成，每行的列数通常一致，同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐，这种严格的约束形成了一个不易变形的长方形盒子结构，堆叠排列起来结构很稳定，表格中的内容按照相应的行或列进行分类和显示。表格将文本和图像按行、列排列，它与列表一样，有利于表达信息。

2.3.1 基本表格

表格用﹤table﹥标签定义，标签标题用﹤caption﹥标签定义；每个表格有若干行，用﹤tr﹥标签定义；每行被分隔为若干个单元格，用﹤td﹥标签定义；当单元格是表头时，用﹤th﹥标签定义。定义表格元素的格式为：

表格是一行一行建立的，在每一行中填入该行每一列的表项数据。可以把表头看作一行，只不过用的是﹤th﹥标签。在浏览器中显示时，﹤th﹥标签的文字按粗体显示，﹤td﹥标签的文字按正常字体显示。

表格的整体外观由table元素的属性决定。

1）border属性：定义表格边框的粗细，n为整数，单位为像素。如果省略，则不带边框。

2）width属性：定义表格的宽度，x为像素数或百分数（占窗口的）。

3）height属性：定义表格的高度，y为像素数或百分数（占窗口的）。

4）cellspacing属性：定义表项间隙，i为像素数。

5）cellpadding属性：定义表项内部空白，j为像素数。

【例2-9】 在页面中添加一个4行3列的表格。本例文件2-9.html在浏览器中的显示效果如图2-9所示。

表格所使用的边框粗细等样式一般应放在专门的CSS样式文件中（后续章节讲解），此处讲解这些属性仅仅是为了演示表格案例中的页面效果，在真正设计表格外观的时候是通过CSS样式完成的。

2.3.2 跨行跨列表格

在表格中合并单元格，跨行是指单元格在垂直方向上合并，跨列是指单元格在水平方向上合并。﹤th﹥标签可以使用rowspan和colspan两个属性，分别表示该单元格纵跨多少行和横跨多少列。定义跨行跨列表格的格式为：

【例2-10】 跨行跨列表格示例。本例文件2-10.html在浏览器中的显示效果如图2-10所示。

表格跨行跨列以后，并不改变表格的特点。表格中同行的内容总高度一致，同列的内容总宽度一致，各单元格的宽度或高度互相影响，结构相对稳定，不足之处是不能灵活地进行布局控制。

2.3.3 表格数据的分组

表格数据的分组标签包括﹤thead﹥、﹤tbody﹥和﹤tfooter﹥，主要用于对表格数据进行逻辑分组。其中，﹤thead﹥标签对应表格的表头；﹤tbody﹥标签对应表格的主体；﹤tfooter﹥对应表格的页脚，即对各分组数据汇总的部分。各分组标签内由多行﹤tr﹥组成，子元素仅有td和th。

标签﹤tbody﹥、﹤thead﹥、﹤tfoot﹥通常用于对表格内容进行分组，当创建某个表格时，希望拥有一个标题行、一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

【例2-11】 表格分组示例。本例文件2-11.html在浏览器中的显示效果如图2-11所示。

为了区分表格各部分的颜色，这里使用了style样式属性分别为thead、tbody和tfooter元素设置背景色，此处只是为了演示页面效果。

2.3.4 调整列的格式

为了调整列的格式，对表格中的列组合后，可以用以下标签对表格中的列定义属性值。

1）﹤colgroup﹥：对表格中的列进行组合，以便对其进行格式化。

2）﹤col﹥：为表格中一个或者多个列定义属性值，通常位于colgroup元素内。

【例2-12】列格式示例。本例文件2-12.html在浏览器中的显示效果如图2-12所示。