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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/ITXDL123/article/details/102383954

表格在网站中应用得非常广泛,使用它可以方便、灵活地排版,很多动态大型网站也都是借助表格排版的,但现在都使用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表格标签演示结果

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券