Web系统与技术学习笔记（2）

最新推荐文章于 2022-10-26 22:28:22 发布

indigo-

最新推荐文章于 2022-10-26 22:28:22 发布

阅读量349

点赞数 1

文章标签： web

本文链接：https://blog.csdn.net/qq_46658480/article/details/105485306

版权

这篇博客详细介绍了HTML中的表格和框架技术。主要内容包括表格的组成、基本属性、单元格属性和行标签，以及框架集的基本结构、属性和嵌套。此外，还探讨了内联框架和框架间的链接操作。

摘要由CSDN通过智能技术生成

表格与框架

学习Web的笔记，用来加深记忆，也方便查找。

表格

表格的组成

表格使用行和列的方式组织信息，表格元素主要由行、列、表头单元格、正文单元格、标题、表头行、正文行、表尾行等构成。
通常通过< table> 标签创建表格元素。

<table>
  <tr>
   <td>单元格内容</td>
   <td>单元格内容</td>
   <!-- 更多单元格内容 -->
  </tr>
  <!-- 更多行 -->
 </table>

表格的各组成部分均包含在< table>标签之内。
单元格是表格的基本元素，使用< td>
标签表示
行是表格的水平元素，使用< tr>标签表示
一行可以由一个或多个单元格构成，而一个表格可以由一行或多行构成。

下面通过< table >标签来创建一个表格。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <table>
  <tr>
   <td>姓名</td>
   <td>年龄</td>
   <td>性别</td>
   <td>学号</td>
   <td>学院</td>
  </tr>
  <tr>
   <td>小红</td>
   <td>18</td>
   <td>女</td>
   <td>123456</td>
   <td>计通</td>
  </tr>
  <tr>
   <td>小王</td>
   <td>19</td>
   <td>男</td>
   <td>123455</td>
   <td>水利</td>
  </tr>
  <tr>
   <td>小明</td>
   <td>18</td>
   <td>男</td>
   <td>123458</td>
   <td>计通</td>
  </tr>
 </table>
</body>
</html>

效果如下，在默认情况下，表格的边框是隐藏的。
在这里插入图片描述

表格的基本属性

通常情况下，表格只是作为布局来使用，不会在页面中显示
出来，但是可以通过设置表格的属性，将表格显示出来。
在这里插入图片描述
表格的frame属性可以对表格边框更灵活的进行设置，只显示表格边框的某一部分或全部显示。

以下为常用属性的显示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <table align="center" bgcolor="pink" border="2px" cellpadding="4px" cellspacing="2px" >
  <tr>
   <td>姓名</td>
   <td>年龄</td>
   <td>性别</td>
   <td>学号</td>
   <td>学院</td>
  </tr>
  <tr>
   <td>小红</td>
   <td>18</td>
   <td>女</td>
   <td>123456</td>
   <td>计通</td>
  </tr>
  <tr>
   <td>小王</td>
   <td>19</td>
   <td>男</td>
   <td>123455</td>
   <td>水利</td>
  </tr>
  <tr>
   <td>小明</td>
   <td>18</td>
   <td>男</td>
   <td>123458</td>
   <td>计通</td>
  </tr>
 </table>
</body>
</html>

效果如下在这里插入图片描述

单元格的属性

在这里插入图片描述
单元格是表的基本元素，可以通过< td>或< th>标签来创建单元格。< td>标签多用来包含表格中的数据部分，而< th>标签用来包含表格的标题部分。colspan、rowspan就是指合并单元格。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <table align="center" bgcolor="pink" border="2px">
  <tr>
   <td colspan="2">俩个单元格</td>
   <td rowspan="2">俩个单元格</td>
   <td>0.0</td>
   <td>0.0</td>
  </tr>
  <tr>
   <td>0.0</td>
   <td>0.0</td>
   <td>0.0</td>
   <td>0.0</td>
  </tr>
  
  </tr>
 </table>
</body>
</html>

效果如下
在这里插入图片描述
< th>标签通常是用来定义表格的头部信息，多用于表格的第一行或者第一列，其内容通常使用粗体并水平居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <table align="center" bgcolor="pink" border="2px">
  <tr>
   <th>头部</th>
   <th>头部</th>
   <td>头部</td>
   <td>头部</td>
  </tr>
  <tr>
   <td>0.0</td>
   <td>0.0</td>
   <td>0.0</td>
   <td>0.0</td>
  </tr>


 </table>
</body>
</html>

在这里插入图片描述

行标签

行是表格的水平元素，一行可以包含一个或者多个单元格。在HTML中，使用< tr>标签进行界定，< td>与< th>标签位于< tr>< /tr>标签之间。行标签的属性如下：

在这里插入图片描述

表格的行分组

除了表格主题（行和列）外，表格还提供了标题、表头和表尾部分，是表格的内容更加丰富，数据的组织更加清晰。
在这里插入图片描述

列表的列分组

即列表的纵向分组，使用< colgroup>标签，以下为它的属性：
在这里插入图片描述演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <table align="center" border="2px">
 <colgroup span="2" align="right" style="background-color: pink"></colgroup>
 <colgroup style="background-color: gray"></colgroup>
  <tr>
   <th>姓名</th>
   <th>年龄</th>
   <th>性别</th>
   <th>地址</th>
  </tr>
  <tr>
   <td>小红</td>
   <td>24</td>
   <td>女</td>
   <td>北京</td>
  </tr>
  <tr>
   <td>小名</td>
   <td>25</td>
   <td>女</td>
   <td>上海</td>
  </tr>
 </table>
</body>
</html>

在这里插入图片描述

表格的嵌套

页面的排版比较复杂，通常使用一个表格从整体上控制布局，但在内部细节也利用该表格进行布局时容易引起行高列宽等冲突，增加页面设计的困难程度，使用表格嵌套布局时，页面排版更加灵活，可以轻松设计出更加复杂而精美的效果。但在页面设计时，嵌套层次不能太多，一般不要超过3~4层，否则不利于搜索引擎对页面内容的检索。