html如何运用表格，表单

最新推荐文章于 2024-04-27 09:14:44 发布
最新推荐文章于 2024-04-27 09:14:44 发布
阅读量340 收藏 5
点赞数 15
文章标签： html css web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zqq277/article/details/117469646
版权

示例如图的任务做一个表格表单

 1、了解相关表格，表单标签

拿到任务第一步先熟悉表格表单相关标签

表格相关标签

首先<table></table>

<tr>设置行
<th>设置表头
<td>设置表格单元

这三者遵循先设置行，行里设置表头，第二行开始设置表格单元
colspan合并行
cowspan合并列

<td cowspan="4"></td>合并四个单元格为一列
<caption>表头标题

表单标签

<form></form>表单：提交数据到服务器

action表示提交服务器的地址，跳转页面

<form action="biaodan.html">//这里是跳转到的地址

        <input type="submit" value="跳转">

 </form>

       method提交数据方式

       表单项

        type:表单项的类型

        text:文本

        email:邮箱

        password:密码框

        month:月份

        submit:提交

        reset:重置按钮

        button:普通按钮

        color颜色选择器

        radio:单选框

        checkbox:复选框

        number:数字选择框

输入文本：<input type="text"> 
<input type="radio"> 定义单选按钮
<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

示例：

<action="biaodan.html"method="get">

            邮箱：<input type="text" name="123">

            密码：<input type="password" name="password">

            男：<input type="radio"name="sex"value="男">

             女：<input type="radio"name="sex"value="女">

             <input type="checkbox">

             <input type="checkbox">

             <input type="checkbox">

             <select name="university">

                 <option value="云南师范大学">

                    云南师范大学

                 </option>

                 <option value="昆明理工大学">

                    昆明理工大学

                 </option>

                 <option value="云南大学">

                    云南大学

                 </option>

             </select>

 

        </action>

结果如图所示：

 2、现在开始创建表格，表单

源代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    input{

        width: 100%;

        border-color:white;

    }

td{

    overflow: hidden;

    text-align: center;

width: 95px;

}

</style>

<body>

    <h2 style="text-align: center">个人简历</h2>

    <table border="1" align="center" bordercolor="grey">

<tr>

    <td>姓名</td>

    <td><input type="text"></td>

    <td>性别</td>

    <td><input type="text"></td>

    <td>出生年月</td>

    <td><input type="text"></td>

    <td rowspan="4"><input type="file"></td>

</tr>

<tr>

    <td>民族</td>

    <td><input type="text"></td>

    <td>政治面貌</td>

    <td><input type="text"></td>

    <td>身高</td>

    <td><input type="text"></td>

  

</tr>

<tr>

    <td>学制</td>

    <td><input type="text"></td>

    <td>学历</td>

    <td><input type="text"></td>

    <td>户籍</td>

    <td><input type="text"></td>

    

</tr>

<tr>

    <td>专业</td>

    <td><input type="text"></td>

    <td colspan="2" style="text-align: center">毕业学校</td>

    <td colspan="2"><input type="text"></td>

    

</tr>

<tr>

    

    <td colspan="7"><b>技能，特长或爱好</b></td>

 

</tr>

<tr>

    <td>外语等级</td>

    <td colspan="2"><input type="text"></td>

    <td>计算机</td>

    <td colspan="3"><input type="text"></td>

</tr>

<tr>

    

    <td style="text-align: center;" colspan="7">个人履历</td>

 

</tr>

<tr>

    <td >时间</td>

    <td colspan="2">单位</td>

    <td colspan="4">经历</td>

</tr>

<tr>

    <td><input type="text"></td>

    <td colspan="2"><input type="text"></td>

    <td colspan="4"><input type="text"></td>

</tr>

<tr>

    <td><input type="text"></td>

    <td colspan="2"><input type="text"></td>

    <td colspan="4"><input type="text"></td>

</tr>

<tr>

    <td><input type="text"></td>

    <td colspan="2"><input type="text"></td>

    <td colspan="4"><input type="text"></td>

</tr>

<tr>

    

    <td style="text-align: center;" colspan="7">联系方式</td>

 

</tr>

<tr>

    <td>通讯地址</td>

    <td colspan="2"><input type="text"></td>

    <td>联系电话</td>

    <td colspan="3"><input type="text"></td>

</tr>

 

<tr>

    <td>E-mail</td>

    <td colspan="2"><input type="text"></td>

    <td>邮编</td>

    <td colspan="3"><input type="text"></td>

</tr>

<tr>

    <td style="text-align: center;" colspan="7">自我评价</td>

</tr>

    </table>

</body>

</html>

结果如图：

 总结笔记：

有问题可私聊，喜欢请点赞关注哦~ 

zqq277
关注
  • 15
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
如何实现html 表格居中
2201_75489485的博客
04-16 1573
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + S
html在表格中建立表单
qq_37694877的博客
04-13 559
html表单
【VUE】ant-design-vue table 初级应用：column中通过DataIndex与data中的项关联；让列值变成超链接；添加action列
u014458962的专栏
06-15 1万+
磕磕绊绊才（大概）搞懂官网的例子。简单记录一下 例子： https://www.antdv.com/components/table-cn/#components-table-demo-ellipsis-column <template> <a-table :columns="columns" :data-source="data"> <a slot="name" slot-scope="text">{{ text }}</a> .
HTML 表格 表单的制作
m0_60045654的博客
10-21 6562
表格是一种二维结构，横行纵列。表格由单元格组成。每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高。从服务器角度讲，收集用户的输入数据。从客户端角度来讲，向服务器提交数据的位置。本站搜索<input type="submit" name="button" id="button" value="搜索"></form>
前端基础篇-深入了解 HTML 表格标签、表单标签和表单项标签
最新发布
java_dazhuzhu的博客
04-27 856
学号姓名性别专业
HTML中表格与表单的使用
SE_FUE_的博客
02-09 865
•table标签：表格整体上下合并→只保留最上的，删除其他•左右合并→只保留最左的，删除其他。•th标签：表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示（替换掉td）②：1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来。•caption标签：表格整体大标签，默认在表格整体顶部居中位置显示。（表格结构标签写在table标签内部，表格标签内部用于包裹tr标签）①：1.使用label标签把内容（如：文本）包裹起来。•select标签：下拉菜单的整体。
HTML总结之form表单和table表格
m0_74385608的博客
03-30 3382
因为最近在学习html所以就来聊聊两个比较重要的标签table与form。一、HTML是什么？HTML 全称为 HyperText Mark-up Language，翻译为超文本标签语言，标签也称作标记或者元 素。HTML 是目前网络上应用最为广泛的技术之一，也是构成网页文档的主要基石之一。HTML文本是 由 HTML 标签组成的描述性文本，HTML 文本可以说明文字、图形、动画、声音、表格、链接等。超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。
HTML系列之表格、表单综合案例
StayAlive1887的博客
07-01 1371
要求：用HTML实现下面的效果。要求：用HTML实现下面的效果。
html表格表单.pptx
11-20
介绍html表格表单元素，这也是前端比较重要的内容。学了之后你可以用标签简单做一个课程表。还有调查问卷等等
表格表单的嵌套.html
09-18
比较简单的表单与表格的嵌套，只是做一个引导作用，实际意义不大，
实验三HTML表格与HTML表单优质资料.doc
12-02
HTML 表格与 HTML 表单优质资料 本资源为实验三 HTML 表格与 HTML 表单优质资料，涵盖了 HTML 表格和 HTML 表单的相关知识点。通过本资源，读者可以掌握网页中插入表格数据的标记的用法、不规则表格的创建方法、...
html表单（表格）
07-15
表单标签 table form
HTML表格布局实际使用详解
09-28
HTML表格布局是网页设计中的一种基础元素，尤其适用于数据展示和表单输入。虽然现代网页设计倾向于使用CSS布局，但在特定场景下，表格仍然具有其不可替代的优势。本篇文章将深入探讨HTML表格的实际使用和布局计算。 ...
HTML中的表格和表单（含有示例代码）
热门推荐
weixin_57197500的博客
05-20 4万+
表格 表格的基本构成标签 table标签：表格标签 caption标签：表格标题 tr标签：表格中的行 th标签:表格的表头 td标签：表格单元格 表格的基本结构 <table>定义表格 <caption>表格标题</caption> <tr>定义表行 <th>定义表头</th> </tr> <tr&g...
HTML表格与表单
whhcs的博客
02-20 2566
目录HTMl表格与表单HTML表格表格常用标签表格常用属性表格demo实现效果实现代码HTML表单html表格与表单综合demo实现效果代码 HTMl表格与表单 HTML表格 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。   表格常用标签
Html表单与表格结合
weixin_45742613的博客
11-16 1510
表单、表格 html表单与表格的结合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body&gt
HTML（三） -- 表单设计
PUYALEI的博客
04-29 4856
目录1. 基本语法 2. 表单控件2.1 input控件input 常用属性：input type的表单项：2.2 select 控件2.3 textarea控件2.4 label 控件示例演示： 结果展示：示例演示： 结果展示：示例演示： 结果展示：代码演示： 结果展示：
HTML的学习 Day02（列表、表格、表单）
m0_74154295的博客
09-26 674
（1）1：指定项目编号为阿拉伯数字（2）a: 指定项目编号为小写英文字母（3）A: 指定项目编号为答谢英文字母（4）i: 指定项目编号为小写罗马数字（5）I: 指定项目编号为大写罗马数字li这意味着您可以在整个列表级别上指定项目编号样式，同时也可以在单个列表项级别上进行自定义。
1.table表格
qq_42743223的博客
01-30 1110
创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基
html表格镶嵌表单报名表
03-14
HTML表格是一种用于展示数据的标记语言，而表单则是用于收集用户输入的一种HTML元素。你可以将表单嵌套在表格中，以创建一个包含报名表的表格。 以下是一个示例的HTML代码，展示了如何在表格中嵌套一个报名表的表单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值