8.1  创建基本的表格结构

8.1.1  表格结构

　　HTML表格包含4种基本元素：

• table：在HTML中table元素是一个容器，其中包含用于创建表格的其它的元素；
• tr：表示表格中的行，开始标记<tr>和结束</tr>用于包围该行的单元格；
• td：表示表格中的数据，在表格中用于包含单元格实际的内容，开始标记<td>和结束标记</td>用于表示行中的一个单元格；
• th：表示表格头，它是一个可选标记，用于代替td标记，th标记用于定义一个包含表格头信息的单元格。

8.1.2  单元格内容

　　在表格的单元格中，几乎可以包含Web页面能呈现的任何类型的内容。对于指定的单元格，单元格的内容应该放在开始标记 <td>和结束标记</td>之间。所有用于格式化内容的标记也应该包含在<td>和</td>标记之间。

　　要在表格中包含无内容的空单元格，请在单元格的<td>和</td>标记之间输入非换行空格（&nbsp;）字符作为其内容，此时单元格将显示为空白。

　　默认情况下，每一个单元格的大小将随着单元格内容的多少而变化。在显示一定数量的字符之后，浏览器可能会对内容进行换行（wrap）显示，即停止在当前行上显示内容，并从下一行继续显示其余内容。只有当表格碰到页面的另一个元素，或者达到浏览器的边缘时，才会发生换行的情况。在不同的浏览器中，对内容进行换行的默认位置可能会有所不同。

　　（1）单元格中的文本

　　在每一个单元格中，都可以使用前面学过的HTML元素来定制单元格中的文本。例如，可以使用strong元素添加强调，使单元格中的文本以粗体显示。

　　如果想使每一个单元格中的文本都具有相同的特征，最好的解决方案是使用样式表并将td标记作为选择器。

　　（2）单元格中的图像

　　对于HTML表格，还可以在其单元格中添加图像。只需在想显示图像的单元格中使用img元素添加对图像的引用即可。

8.2  格式化Web页面中的表格

8.2.1  边框和外边距

　　根据表格的设计，本质上它具有内边框和外边框。默认情况下，绝大多数浏览器将边框跨度设置为0，从而使边框看不见。但是，对于统计信息的表格，边框非常有用。例如，人们需要看到不同的列，才能更好地理解表格中的数据。在表格中使用边框的关键，在于理解与它有关的三个属性。

　　（1）table标记的border属性

　　即使最终想使表格的边框不可见，但在创建表格时，查看表格组成情况的一个好办法，就是暂时打开所有的表格边框。只需在<table>标记中添加border属性，并将其设置为1即可。

1 <table border="1">

　　（2）样式表中的border属性

　　还可以在样式表中使用border属性来定义表格边框的样式，包括border-width、border-style、border-color属性。当需要消除或定制单元格之间的间距时，border-collapse和border-spacing属性将非常有用。border-collapse属性可以按照以下两种方式使用：

• border-collapse：collapse   关闭单元格边框之间的所有边距
• border-collapse：seperate  保持单元格边框之间的间距

　　当把border-collapse属性设置为seperate时，可以继续使用border-spacing属性精确指定单元格之间应该包含多少间距：

1 table {border-collapse:seperate; border-spacing:10px 5px;}

　　（3）间距属性

　　在样式表中还可以使用padding属性和margin属性来定义围绕单元格四周的间距。注意，整个表格既可以使用padding属性也可以使用margin属性来定义样式，但对于单个单元格只能使用padding属性，不能使用margin属性。

8.2.2  宽度和高度

　　当在页面中添加表格时，使用样式表属性width和height来定义表格的尺寸。如果没有声明表格的尺寸，浏览器将根据每一个单元格中内容的数量以及在浏览器窗口中可用空间的大小来确定表格的尺寸，这可能会使表格的显示与预期不相符。

　　在本例中，将表格的宽度和高度定义为绝对尺寸，这样一来当浏览器窗口变大或缩小时，该表格的尺寸都不会发生改变。

1 table {width: 200px; height: 200px; border: 3px solid black;}

　　另一个方面，如果不关心表格的精确尺寸，但希望表格只占浏览器窗口50%的空间，而不会超出这个比例，那么可以使用百分比来定义表格的width和height属性：

1 table {width: 50%; height: 50%; border: 3px solid black;}

8.2.3  基本对齐方式

　　可以使用float属性使图片或表格与周围文本的左侧或右侧对齐，如果页面中只有一个表格，就可以使用table元素作为选择器。

1 table {float: right;}

8.2.4  表格的颜色

　　要改变整个表格的背景颜色，使用table标记作为选择器并在样式表中添加background-color属性即可。

1 table {background-color: yellow;}

8.2.5  表格的背景图像

　　可以将background-image属性添加到样式表中，以便将一幅图像作为整个表格的背景。当把background-image属性应用于表格时，它的工作原理与将其应用于其他Web页面对象是一样的。即背景图像将自动地从左到右、自上而下地重复进行填充。 如果需要，也可以利用之前学过的其它背景属性改变重复填充的选项（如background-repeat和background-attachment属性）。

1 table {background-image: url(‘e://Image/test.png‘);}

8.2.6  表格的标题

　　caption元素用于为表格指定标题，它并不是table元素的一个属性，而是一个独立的元素。caption元素用在表格的开始标记<table>之后、第一个表格行<tr>标记之前。caption元素的开始标记<caption>和结束标记</caption>，用于包围作为表格标题的文本。默认情况下，表格标题将对齐表格顶部并居中显示。要改变表格标题的对齐方式，可以使用以下两个CSS属性：

• text-align：用于定义标题文本是左对齐、右对齐，还是居中对齐，无论表格标题放在表格的哪一边；
• caption-side：用于指定将表格标题放在表格的哪一边（top、right、bottom或left）。

1 caption {text-align: right; caption-side:bottom;}

8.3  格式化表格单元格中的内容

　　除了可以定义整个表格的样式之外，还可以为表格中每一个单元格分别定义样式。可以改变单元格的对齐方式、宽度、高度和背景颜色，还可以限制单元格中的换行、使单元格中的内容跨越多行或多列。

8.3.1  对齐方式

　　要改变垂直或水平对齐方式，可以在tr、th或td标记中添加text-align属性以设置水平对齐方式，添加vertical-align属性以设置垂直对齐方式。

• tr：在<tr>标记中添加text-align属性或vertical-align属性，所指定的对齐方式将对该行中的所有单元格有效；
• td、th：在<td>或<th>标记中添加text-align属性或vertical-align属性，所指定的对齐方式仅对该单元格有效。

　　如果想对每一列中的单元格定义一种不同的对齐方式，可以先创建三个CSS类：

1 .left {text-align: left; vertical-align: top;}
2 .right {text-align: right; vertical:bottom;}
3 .center{text-align: center; vertical:middle;}

8.3.2  宽度和高度

　　在table标记中，使用width和height属性来标识整个表格的尺寸。在td或th标记中也可以添加width和height属性，以便指定各个单元格的尺寸。

　　如果无论浏览器窗口的尺寸是多少，都希望所三列具有相同的宽度，则可以在样式表中将th标记的width属性定义为整个表格宽度的三分之一：

1 th {width: 33%;}

 8.3.3  单元格的内边距

　　虽然表格的单元格没有margin属性，但单元格具有padding属性。如果想在单元格内容的四周保留一定的缓冲区域（内边距），只需将padding属性添加到样式表中即可。

1 td {padding: 10px;}

8.3.4  单元格的颜色

　　在表格的样式表中添加background-color属性，就可以改变整个表格的颜色。在tr、td或th中使用background-color属性，可以指定一行或者一个单元格的背景颜色。

1 tr {background-color: green;}

8.3.5  禁止换行

　　有时希望单元格中的内容保持为单行，即中间没有换行。在这种情况下，可以使用white-space属性并将该属性的值设置为“nowrap”，以告诉浏览器尽可能地将该单元格中的内容保持为一行（这并不总是可能，如果浏览器窗口非常小就会导致内容无法显示在单行上）。使单元格不换行的样式定义如下：

1 td {white-space: nowrap;}

8.3.6  使单元格跨越多列

　　到目前为止，所学习的表格都是网状格（grit-like）的表格，其中每一行和每一列中都具有相同数量的单元格。虽然这只是默认情况，但是可以在td或th的开始标记中添加属性，使单元格与其它与之相邻的单元格进行合并。

　　默认情况下，每一个单元格只能跨越一列。使用colspan属性可以改变默认设置，使一个单元格可以跨越两列或多列。

1 <td colspan="2">Hello,world</td>

 　　不仅可以合并单元格使之跨越两列或多列，还可以合并单元格使之跨越两行或多行。用以实现单元格跨越多行的属性是rowspan。

1 <td rowspan="2">Hello,world</td>

8.4  格式化表格的其它技术

8.4.1  行分组

　　在表格中对行进行分组时，以下三个标记特别有用：

• thead：表格头
• tfoot：表格注脚
• tbody：表格主体

　　在创建表格时使用这三个标记，浏览器就可以对表格头、表格脚注信息和表格主体信息进行区分。使用这三个标记的好处是：当用户查看一个包含较长表格的页面时，表格头信息会在每一页（或每一屏视图）的顶部重复显示，打印表格时也是如此。这有助于避免出现在较长的表格中看不到表头的情况。

　　虽然这三个标记并不是必需的，但是在使用这三个标记时，每一个标记中至少应该包含一个用tr标记定义的表格行。此外，如果在表格的定义中包含一个thead或tfoot（或者二者皆有），就必须包含至少一个tbody标记。

 1 <table border="1">
 2     <thead>
 3         <tr>
 4             <th>Age</th>
 5             <th>Height</th>
 6             <th>Weight</th>
 7         </tr>
 8     </thead>
 9     <tfoot>
10         <tr>
11             <td colspan="3">Data Taken from the Corinna Research Society</td>
12         </tr>
13     </tfoot>
14     <tbody>
15         <tr>
16             <td>Birth</td>
17             <td>19.5 inches</td>
18             <td>7 lbs. 9 oz.</td>
19         </tr>
20     </tbody>
21 </table>

　　使用这三个标记的另外一个好处，就是使表格样式的定义更加容易。假如想把表格中的数据行为定义为一种样式，把表格头部定义为另一种样式，再把表格注脚定义为其它样式。只要在创建表格结构时使用thead、tbody和tfoot标记进行分组，只需在样式中引用这三个标记就可以为表头、表格主体和表格注脚分别定义不同的样式。

1 body {font-family: verdanna;}
2 thead {background-color: black; color: white;}
3 tbody {background-color: #ccc;}
4 tfoot {font-size: 10pt; font-style: italic;}

8.4.2  列分组

　　采用类似的办法，可以使用colgroup元素和col元素对列进行分组。理解这些标记的浏览器可以用递增方式呈现表格，而不是一次性呈现全部表格。这样一来就可以更快地加载较长的表格。另外，使用colgroup元素对列进行分组后，可以对整个列组应用样式定义和特征定义，而不必对每一列分别进行设置。

　　<colgroup>和</colgroup>标记将一列或多列定义为一个列组，并且可以定义这些列的呈现样式。在样式表中可以使用colgroup标记作为选择器，将列组中所有的列都定义为相同的样式。还可以在colgroup标记中添加span属性，告诉浏览器该列组中包含多少行。

1 <table border="1">
2 <colgroup span="5" id="group1"></colgroup>
3 <colgroup span="2" ic="group2"></colgroup>
4 <tr>
5     <td>

[HTML/HTML5]8 使用表格