二级Web基础操作题练习（5）——表格类

kukuwawu

已于 2024-06-09 20:53:15 修改

阅读量1.4k

点赞数 37

分类专栏：计算机二级Web 文章标签：前端 web 笔记 html 学习

于 2024-06-09 20:44:02 首次发布

本文链接：https://blog.csdn.net/weixin_68085527/article/details/139565635

版权

计算机二级Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

-----要求----

完成如图所示效果：

-----代码示例-----

<html>

<body>

<!-- 表格开始，用于显示学生信息 -->
<table border="1" width=500px>
<caption>学生信息表</caption>
<tr>
<!-- 第一行的表格列，显示“姓名”和“教育信息” -->
<th>姓名</th>
<th colspan=2>教育信息</th>
</tr>
<tr>
<!-- 姓名部分，包含张三及其曾用名（在此案例中无曾用名） -->
<td rowspan=2 align=center>
   张三
   <p>（无曾用名）</p>
</td>
<!-- 学校列表开始，<ol>建立有序列表 -->
<td>
<ol>
    <!-- 列出张三的学校经历 -->
    <li>幸福小学</li>
    <li>和平中学</li>
    <li>北京第一高中</li>
<!-- 学校列表结束 -->
   </ol>
</td>
<!-- 毕业状态列 -->
<td>正常毕业</td>
</tr>
<tr>
<!-- 最后一行，包含当前学习状态和处理异常的链接 -->
<td>   
	2022.3.1日入学——至今
</td>
<!-- 异常状态提示 -->
<td>信息<font color=red>异常</font><br>  
<!-- 联系管理员的电子邮件链接 -->
<a href = mailto:admin@sample.com>请邮件联系</a>
</td>
</tr>
<!-- 表格结束 -->
</table>

</body>
</html>

-----HTML表格Table常用元素和属性----

表格元素（Table Elements）：

<table>：定义表格的开始和结束。
<caption>：定义表格的标题。
<tr>：定义表格中的行。
<th>：定义表格中的表头单元格（标题单元格）。
<td>：定义表格中的数据单元格。

表格属性（Table Attributes）：

border：指定表格边框的宽度。通常的值为0（无边框）或1（有边框）。
cellpadding：指定单元格内容与单元格边框之间的空白距离。
cellspacing：指定单元格之间的间距。
width：指定表格的宽度。
height：指定表格的高度。
align：指定表格在页面中的水平对齐方式（left、right、center）。
valign：指定表格在页面中的垂直对齐方式（top、middle、bottom）。
bgcolor：指定表格的背景色。
bordercolor：指定表格边框的颜色。
summary：提供关于表格内容的摘要信息，可供屏幕阅读器使用。

行和单元格属性（Row and Cell Attributes）：

rowspan：指定单元格横跨的行数。
colspan：指定单元格横跨的列数。
headers：指定与当前单元格相关联的表头单元格的ID。

表头和表格体（Table Head and Table Body）：

<thead>：定义表格的表头部分。
<tbody>：定义表格的主体部分。
<tfoot>：定义表格的页脚部分。

文字格式设置（Text formatting）：

<font>：定义文本格式。

由于HTML5的出现，现代网页设计中不推荐使用此标签，因为它不是语义化的，并且CSS提供了更强大的样式控制。

face：这个属性用于设置文本的字体类型。例如，<font face="Arial"> 会将文本显示为Arial字体。
size：这个属性用于设置文本的相对大小。它接受一个介于1到7之间的数字，其中1是最小，7是最大。例如，<font size="3"> 会显示中等大小的文本。也可以使用百分比值进行绝对尺寸设定，如 size="20%"。
color：这个属性用于设置文本的颜色。可以使用英文颜色名称（如 "red"），或者十六进制颜色代码（如 "#FF0000”）。例如，<font color="#00FF00"> 会显示绿色文本。

-----HTML表单Form常用元素和属性-----

表单元素（Form Elements）：

<form>：定义一个表单，用于包裹表单中的各个元素。
- action：指定表单数据提交的目标URL。
- method：指定表单数据提交的HTTP方法，常见的有GET和POST。
- enctype：指定在表单数据提交时编码方式，常见的有application/x-www-form-urlencoded和multipart/form-data。
<input>：定义表单中的输入控件。
- type：指定输入控件的类型，如文本框、密码框、单选框、复选框等。
- name：指定输入控件的名称，用于在表单提交时标识该控件的值。
- value：指定输入控件的默认值。
- placeholder：指定输入控件的占位符，用于在输入框为空时显示提示信息。
- readonly：指定输入控件为只读状态，用户无法修改其中的内容。
- disabled：指定输入控件为禁用状态，用户无法与之交互。
<textarea>：定义多行文本输入框。
- name：指定文本框的名称。
- rows：指定文本框的行数。
- cols：指定文本框的列数。
<select>：定义下拉菜单（下拉框）。
- name：指定下拉菜单的名称。
- <option>：定义下拉菜单中的选项。
  - value：指定选项的值。
  - selected：指定默认选中的选项。
<button>：定义按钮。
- type：指定按钮的类型，如submit、reset、button。
- name：指定按钮的名称。
- value：指定按钮的值。
- disabled：指定按钮为禁用状态。
<label>：定义表单元素的标签。
- for：指定与之相关联的表单元素的id。
<fieldset>：定义一组相关的表单元素，用于将它们组织在一起。
- <legend>：定义fieldset元素的标题。