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

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第1张图片

 

表格在网站中应用得非常广泛,使用它可以方便、灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用DIV+CSS进行页面布局。表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然。在HTML文档中,表格需要通过表格标记

、行标记、单元格标记、
等标记按一定的关系嵌套共同完成,
必须定义在之间。表格的基本结构如下所示:

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第2张图片

 

1.

标签

该标签用于定义一张表格。在一张最基本的表格中,必须包含一组

标签、一组标签和一组
标签。在标签中,可以使用表4中给出的一些常用的可选属性。

表4  HTML中

标签的常用属性

 

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第3张图片

   

 

2.

标签

该标签用于定义表格标题的位置,可以由align和valign属性来设置。align属性设置标题位于文档的左、中或右;valign属性设置标题位于表格的上方或下方。默认属性是标题位于表格的上方中间位置。该标签应放在

标签内,在表格行标签之前。

 

3.

标签

该标签定义一行标签。表格是按行和列组成的,一张表格由几行组成就要有几个行标签

,一组行标签内可以建立多组由标签内,是成对出现的。
标签所定义的单元格。行标签用它的属性值来修饰,属性都是可选的。例如,align属性设置行内容的水平对齐;valign属性设置行内容的垂直对齐;bgcolor属性设置行的背景颜色。

 

4.

标签

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

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

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第4张图片

5.综合实例

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

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第5张图片

 

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

IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格_第6张图片

图5  HTML表格标签演示结果

你可能感兴趣的:(IT兄弟连 HTML5教程 HTML5文字版面和编辑标签 使用HTML表格)