服务时间:8:30-18:00

首页 >web前端网

HTML中的容器标签

发布时间:2023-02-27 09:50 字数:3056字 阅读:185

HTML中的容器标签,所谓容器类标签,就是指该类标签内可以放置其他的标签或者数据,可以作为其他元素的容器使用。

1.div标签

div标签表示一个块,该元素本身并无实际语义上的意义,但是用户可以通过CSS样式为其赋予不同的表现,从而实现布局的需要。除了id之外,div标签本身也没有其他的重要属性。

该标签成对出现,开始标签是<div>,结束标签是</div>,两者之间是div容器里面的内容。该标签在当前的网页布局当中发挥了举足轻重的作用,div元素结合CSS是目前网页布局的标准。

2.table标签

table标签定义HTML文档中的表格。该标签成对出现,开始标签是<table>,结束标签是</table>。

因为table标签有很多的属性,易于排版布局,所以在以前的网页里面,很多都是使用table标签来布局整个网页的。但是,这样带来了一些问题,例如浏览器的兼容性、搜索引擎的优化等。

table标签的最初目的是展示数据,而不是用来布局。所以,现在提倡用div结合CSS来实现布局,而用table标签来把数据罗列出来。table标签的常用属性如下。

◆ width:该属性定义表格的宽度,可以使用像素或者百分比。

◆ height:该属性定义表格的高度,可以使用像素或者百分比。

◆ border:该属性定义表格的边框的宽度,单位是像素。

◆ cellspacing:该属性定义单元格之间的空间,单位是像素。

◆ cellpadding:该属性定义单元格内部内容与单元格边框之间的空白,单位是像素。

◆ align:该属性定义表格的对齐方式,取值有left、center和right,分别表示左对齐、居中和右对齐。关于表格的属性,可以参考图1,图中最外面的深色部分代表border属性,浅灰色部分代表cellspacing属性,白色部分代表cellpadding属性,深灰色部分代表单元格的内容。

表格的属性

图1 表格的属性

以下代码定义了一个如图2所示的表格。

表格

图2 表格

    01 <table width="46%" height="180" border="1" align="center" cellpadding="1"
    cellspacing="1" >
    02   <tr>
    03      <td align="center">姓名</td>
    04      <td align="center">成绩</td>
    05   </tr>
    06   <tr>
    07      <td width="32%" align="center">张三</td>
    08      <td width="68%" align="center">92</td>
    09   </tr>
    10   <tr>
    11      <td align="center">李四</td>
    12      <td align="center">76</td>
    13   </tr>
    14   <tr>
    15      <td align="center">王五</td>
    16      <td align="center">78</td>
    17   </tr>
    18 </table>

3.thead、tbody和tfoot标签

thead标签用于对HTML表格中的表头内容进行分组;tbody标签定义表格主体(正文),该标签用于组合HTML表格的主体内容;tfoot标签用于对HTML表格中的表注(页脚)内容进行分组。

这3个标签使得用户有能力对表格中的行进行分组。当用户创建某个表格时,希望拥有1个标题行,若干带有数据的行,以及位于底部的1个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。

由于浏览器对该标签的支持问题,实际上这3个标签很少使用。以下代码定义了一个含有这3个标签的表格。

    01 <table border="1">
    02   <thead>
    03    <tr>
    04      <th>月份</th>
    05      <th>收入</th>
    06    </tr>
    07   </thead>
    08   <tfoot>
    09    <tr>
    10      <td>三</td>
    11      <td>7200</td>
    12    </tr>
    13   </tfoot>
    14   <tbody>
    15    <tr>
    16      <td>一</td>
    17      <td>5000</td>
    18    </tr>
    19    <tr>
    20      <td>二</td>
    21      <td>5300</td>
    22    </tr>
    23   </tbody>
    24 </table>

4.tr标签

该标签定义表格中的1行。tr在HTML文档中成对出现,开始标签是<tr>,结束标签是</tr>。该标签常用的属性如下。

◆ align:该属性定义行的水平对齐方式,取值有left(左对齐)、center(居中对齐)、right (右对齐)及justify(两端对齐)。

◆ valign:该属性定义行的垂直对齐方式,取值有top(顶部对齐)、middle(中部对齐)、bottom (底部对齐)及baseline(基线对齐)。

5.td标签

该标签定义HTML表格中的1个单元格。td标签是成对出现的,以<td>开始,</td>结束,两者之间是要显示的数据。该标签常用属性如下。

◆ colspan:该属性定义1行跨越多少列。取值为整数。

◆ rowspan:该属性定义1列跨越多少行。取值为整数。

◆ align:该属性与tr的align用法相同。

◆ valign:该属性与tr的valign用法相同。

6.th标签

该标签定义HTML表格中的表头。该标签成对出现,以<th>开始,以</th>结束,两者之间是表头的内容。该标签的常用属性与td完全相同。

以下代码定义了一个课程表。

    01 <table width="60%" border="0" align="center">
    02   <tr>
    03      <th>星期一</th>
    04      <th>星期二</th>
    05      <th>星期三</th>
    06      <th>星期四</th>
    07      <th>星期五</th>
    08      <th>星期六</th>
    09   </tr>
    10   <tr>
    11      <td align="center">语文</td>
    12      <td align="center">数学</td>
    13      <td align="center">英语</td>
    14      <td align="center">政治</td>
    15      <td align="center">化学</td>
    16      <td align="center">生物</td>
    17   </tr>
    18   <tr>
    19      <td align="center">地理</td>
    20      <td align="center">英语</td>
    21      <td align="center">政治</td>
    22      <td align="center">数学</td>
    23      <td align="center">数学</td>
    24      <td align="center">语文</td>
    25   </tr>
    26   <tr>
    27      <td align="center">数学</td>
    28      <td align="center">英语</td>
    29      <td align="center">政治</td>
    30      <td align="center">化学</td>
    31      <td align="center">语文</td>
    32      <td align="center">生物</td>
    33   </tr>
    34   <tr>
    35      <td align="center">语文</td>
    36      <td align="center">生物</td>
    37      <td align="center">化学</td>
    38      <td align="center">政治</td>
    39      <td align="center">地理</td>
    40      <td align="center">数学</td>
    41   </tr>
    42 </table>

  • 上一篇.iframe标签