在HTML页面中，没有经过任何修饰的表格是极其丑陋的。为了让表格与其承载的内容都能以漂亮的面貌呈现出来，就需要对表格进行格式化处理。

5.2.1　id属性

id属性规定了HTML元素的唯一性。在HTML页面中，绝大多数的元素都有id属性。如果为某个元素设置了一个id属性值，那就不能为其他元素设置相同的属性值，否则当使用JavaScript或者CSS样式的时候，就不能正确获取该元素，无法对其进行其他操作。

5.2.2　class属性

class属性规定了元素的类名。在一个网页中，多个HTML元素可以使用相同的class属性名称。class属性大多数时候用于指向样式表中的类，也可以利用它通过JavaScript来改变带有指定class的HTML元素。

5.2.3　表格的宽度和高度

默认情况下，表格的宽度和高度可以根据单元格中的内容自动调整。我们也可以通过设置表格或者单元格的宽度和高度，手动改变表格的宽度和高度。例如下面这段代码：

这段代码运行后的效果如图5.3所示。

从上面的代码中可以看出，<table>元素的宽度和高度可以控制整个表格的尺寸，而数据行的高度可以通过<tr>标签或者<td>标签的height属性进行设置，数据列的宽度可以通过首行单元格的宽度进行设置，如<th>标签或者<td>标签。

5.2.4　表格与单元格的对齐

默认情况下，<td>标签中单元格的内容在水平方向上左对齐，垂直方向上居中对齐，而<th>标签中单元格的内容在水平方向上居中对齐，垂直方向上也是居中对齐，如图5.4所示。

在HTML中，align属性控制表格单元格在水平方向上的对齐方式，可以设置的值有以下几种。

（1）left：默认的对齐方式，左对齐内容。

（2）right：右对齐内容。

（3）center：居中对齐内容。

（4）justify：对行进行伸展，这样每行都可以有相等的长度。

（5）char：将内容对准指定字符。

valign属性控制表格单元格内容在垂直方向上的对齐方法，可以设置的值有以下几种。

（1）top：对内容进行上对齐。

（2）middle：默认对齐方式，对内容进行居中对齐。

（3）bottom：对内容进行下对齐。

（4）baseline：与基线对齐。

如果设置单元格的align属性为justify，单元格中的内容会以两端对齐的方式展现，但是一般情况下很少用到；而align属性值为char的效果，目前几乎没有浏览器支持；valign属性值为baseline时，只有单元格的内容为字母，且字号各不相同时效果才会明显，实际应用中也很少使用。

align和valign属性可以在<tr>、<th>或<td>标签中进行设置。当用于<tr>标签时，对齐属性应用于该行所有的单元格。以下代码列举了这两种属性在单元格中的详细使用情况，效果如图5.5所示。

5.2.5　表格边框

表格的边框可以用border属性进行控制，border属性会为每个单元格应用边框，并用边框围绕表格。如果border属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。在HTML页面中插入表格时，只有设置了表格的边框属性border，才能显示插入的表格，例如以下代码：

在这段代码中，我们设置了表格的border属性为1px，又设置了表格的宽度和高度，效果如图5.6所示。

5.2.6　单元格间距和单元格边距

仔细观察表格的边框，我们可以看到单元格之间、单元格与表格边框之间都有一个间隙，这个间隙被称为单元格间距，可以通过cellspacing来设置单元格的间距。例如设置单元格的间距为0，可以让表格的边框看起来更窄，相关代码如下：

添加以上代码后，表格的效果如图5.7所示。

目前看起来表格的边框有些粗，并不像我们设置的1个像素那么宽，这是因为虽然我们设置了表格的边框为1个像素，但是这里显示的却是两个<td>的边框。因为<td>之间并没有重合，要想看到1个像素边框的效果，需要设置表格的border-collapse属性为collapse，例如下面的代码：

添加以上代码后，表格的边框就显示为真正的1个像素宽度，效果如图5.8所示。

单元格的边距表示单元格的内容与单元格边的距离，可以使用cellpadding属性进行设置。例如添加以下代码，设置数据单元格边距为15px，单元格中的文本将与边框保持15个像素的距离，效果如图5.9所示。

5.2.7　表头

表格中的表头用<th>标签来定义，多数浏览器会将表头显示为粗体居中的文本，这些效果我们在前面的案例中已经看到了。通常情况下，表头的排列方式分两种，一种是水平显示在表格的第一行，相关代码如下所示，效果如图5.10所示。

另一种是垂直显示在表格的第一列，相关代码如下所示，效果如图5.11所示。

更加复杂的表头需要用到表格的嵌套，以及colspan和rowspan属性，我们将在5.2.9节进行详细介绍。

5.2.8　nowrap属性

nowrap属性用于控制单元格中的内容是否自动换行，当nowrap属性值为true时表示允许换行，当nowrap属性值为false时表示禁止换行。需要注意的是，nowrap属性仅在没有设置width属性时起作用，如果设置了单元格的width属性，nowrap属性就没有效果了。

5.2.9　colspan和rowspan属性

colspan和rowspan属性能够改变表格的外观，使某列或者行合并起来。这两个属性作用于<td>标签上，colspan属性可以对任意行进行设置，使其跨越多列，而rowspan可以对第一列进行设置，使其跨越多行。

例如，以下代码是colspan跨越多列的效果，如图5.12所示。

以下代码是rowspan跨越多行的效果，如图5.13所示。

5.2.10　背景与边框颜色

在使用表格展示数据的时候，我们经常会为表格的背景和边框设置颜色，以便用户能更清晰的观察数据。在HTML页面中，可以使用bgcolor属性设置颜色。如果要为整个表格设置同一个背景色，可以为<table>标签设置颜色属性；如果要为某一行设置背景色，可以为<tr>标签设置颜色属性；如果要为某个单元格设置颜色属性，可以直接为<th>或者<td>标签设置颜色属性。表格边框的颜色可以通过bordercolor属性进行设置。例如下面的代码：

在这段代码中，使用bordercolor属性为表格设置了边框颜色，使用bgcolor属性为每行数据设置了背景颜色，效果如图5.14所示。

5.2.11　背景图像

在HTML页面中可以使用background属性为表格添加背景图像。可以为整个表格添加统一的背景图像，也可以为单独某一行数据添加统一的背景图像，甚至可以为某个指定的单元格添加单独的背景图像。例如下面这段代码，分别为整个表格、第1行以及第2行第1列单元格添加了背景图像，效果如图5.15所示。