IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格

表格在网站中应用得非常广泛，使用它可以方便、灵活地排版，很多动态大型网站也都是借助表格排版的，但现在都使用DIV+CSS进行页面布局。表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然。在HTML文档中，表格需要通过表格标记<table>、行标记<tr>、单元格标记<th>或<td>等标记按一定的关系嵌套共同完成，<tr>、<td>必须定义在<table>之间。表格的基本结构如下所示：

1．<table>标签

该标签用于定义一张表格。在一张最基本的表格中，必须包含一组<table>标签、一组<tr>标签和一组<td>或<th>标签。在<table>标签中，可以使用表4中给出的一些常用的可选属性。

表4  HTML中<table>标签的常用属性

2．<caption>标签

该标签用于定义表格标题的位置，可以由align和valign属性来设置。align属性设置标题位于文档的左、中或右；valign属性设置标题位于表格的上方或下方。默认属性是标题位于表格的上方中间位置。该标签应放在<table>标签内，在表格行标签<tr>之前。

3．<tr>标签

该标签定义一行标签。表格是按行和列组成的，一张表格由几行组成就要有几个行标签<tr>，一组行标签内可以建立多组由<td>或<th>标签所定义的单元格。行标签用它的属性值来修饰，属性都是可选的。例如，align属性设置行内容的水平对齐；valign属性设置行内容的垂直对齐；bgcolor属性设置行的背景颜色。

4．<th>和<td>标签

<th>和<td>都是插入单元格的标签，这两个标签必须嵌套在<tr>标签内，是成对出现的。<th>用于表头标签，表头标签一般位于首行或首列，标签之间的内容就是位于该单元格内的标题内容，其中的文字以粗体居中显示。数据标签<td>就是该单元格中的具体数据内容。<th>和<td>标签的属性都是一样的，可以使用表5中给出的一些常用的可选属性。

表5  表格列标签的常用属性

5．综合实例

在本例中使用表格在网页中输出一个学员信息列表，包括学员基本信息和学员成绩信息，代码如下所示：

本例在浏览器中的显示效果如图5所示。

图5  HTML表格标签演示结果