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

时间:2022-04-19 15:27:50

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

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

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

1.<table>标签

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

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

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

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  表格列标签的常用属性

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

5.综合实例

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

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

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

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

图5  HTML表格标签演示结果