首页 > 其他分享 >表格和表单

表格和表单

时间:2024-03-24 17:14:02浏览次数:24  
标签:控件 定义 表格 标签 表头 表单

table表格标签

【1】定义和用法

  • <table>用来定义一个表格

  • 一个表格由一个或者多个tr,td组成

  • tr为一行

  • td为一行里面的一个个数据

  • th是表头,通常用来定义第一行的数据

  • thead用来装表头的那一行,tbody用来装其他行,可写可不写,写上可以让代码看起来更加美观,更加具有可读性

  • 标签里面的border属性是表格线条的粗细,cellpadding是表格与内容的间距,cellspacing是表格与表格自建的间距。

【2】例子

<table border="2" cellpadding="20" cellspacing="0" align="center">
    <thead>
    <tr>
        <th>用户名</th>
        <th>密码</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>hqq</td>
        <td>123123</td>
        <td>男</td>
        <td>打游戏</td>
    </tr>
    <tr>
        <td>green</td>
        <td>123456</td>
        <td>男</td>
        <td>洗脚</td>
    </tr>
    </tbody>
</table>

form表单标签

【1】介绍

  • 表单是网页中用于收集用户输入信息的一种方式

【2】表单的组成

  • 表单由表单域,表单控件,提示信息组成

【3】表单域

  • 表单域是一个包含表单元素的区域

  • 在html标签中,

    标签用于定义表单域,以实现用户信息的收集和传递

  • 会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>
  • 常用属性

标签:控件,定义,表格,标签,表头,表单
From: https://www.cnblogs.com/Hqqqq/p/18092667

相关文章

  • react我需要在表格数据变化后,下一次渲染结束后,执行表单校验逻辑
    在React中,要在表格数据变化后且下一次渲染完成后执行表单校验逻辑,可以考虑在useEffect钩子中处理这个问题。useEffect会在每次渲染完成后的DOM更新之后执行指定的回调函数。以下是一个简化的示例:importReact,{useState,useEffect}from'react';functionYourComponent({......
  • 文本内容如何插入excel表格中的一列,如其他列空自动填充!
    主要功能是从文本文件中读取内容,并插入到Excel文件的特定列中(这里假设是第三列,名称为’Column3’)。以下是代码功能的具体描述:创建一个Tk窗口,布局包含两个标签分别对应Excel文件路径和文本文件路径,以及两个输入框和两个浏览按钮让用户选择文件路径。定义load_excel_file和l......
  • wps 根据值 自动复制另一个表格 多行过来
    表格输入机种和数量后,右边自动出现此机种下所有的物料和新,算出需求量和欠料情况,负数变红色, B1中输入机种名或者下拉选择,填入数量,  BOM表中,A1输入公式   =跑欠料2!B1B2=IF(C2=$A$1,1,"") 算出相等的为1A2=IF(B2="","",SUM(B2:B990))累计1 转换成序列号,这里......
  • 快看过来,这么详细的easyexcel导出excel表格
    准备工作准备依赖,这期导出使用easyexcel <!--excel导入导出功能--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version>&l......
  • 浮木云学习日志(12)---表格设计(二)
    上次做了一个包括表格的页面设计,个人认为关于表格设计的内容介绍比较笼统,可能没办法直接对这个组件进行透彻的了解,本次我就来详细介绍一下如何通过高级表格设计玩转表格设计。感兴趣的小伙伴可以去他们官网https://www.fumucloud.com/一起体验一下这个高级表格组件。本次记录我们......
  • Ant Design Vue 修改表格头部样式
    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。首先用到的是customHeaderRow这个API,类型是一个函数1.HTML部分<a-tablesize='small'//样式大小:columns="columns":data-source="data"bordered:pagination="false"//不显示页数:c......
  • ruoyi-nbcio-plus基于vue3的flowable增加开始节点的表单绑定修改
    更多ruoyi-nbcio功能请看演示系统gitee源代码地址前后端代码:https://gitee.com/nbacheng/ruoyi-nbcio演示地址:RuoYi-Nbcio后台管理系统http://122.227.135.243:9666/更多nbcio-boot功能请看演示系统 gitee源代码地址后端代码:https://gitee.com/nbacheng/nbcio-boot......
  • vue入门小案例(表单收集单页面)
    实例在Vue中创建一个表单收集页面,可以使用v-model来实现双向数据绑定,以便收集和处理用户输入的数据。以下是一个简单的示例,包含文本输入、选择框和单选按钮的表单页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"conten......
  • vue入门小案例(编写一个可编辑的表格)
    案例:要在Vue中创建一个可编辑的表格,你可以使用Vue的双向数据绑定功能。以下是一个简单的示例。首先,确保你已经在项目中引入了Vue。接下来,创建一个HTML文件,并在其中添加以下代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewpor......
  • antd 表单聚焦
    antd表单聚焦在AntDesign(antd)中,要实现表单的聚焦,你可以使用Form组件的getFieldDecorator方法来绑定一个Input组件,并通过ref属性引用这个Input组件,然后调用其focus()方法来聚焦。以下是一个简单的例子:  importReactfrom'react';import{Form,Input,Button......