HTML 表格(form/table)

最新推荐文章于 2024-04-20 18:15:46 发布
最新推荐文章于 2024-04-20 18:15:46 发布
阅读量3.3k 收藏 6
点赞数
分类专栏： ※ 前端 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Joovo/article/details/79634079
版权

实现一个表格:
这里写图片描述

3.css:
table,tr,td{
    margin:0 auto;
    border:1px solid;
    border-style:groove;(凹陷效果)
}


input{
    border-style:groove;

    background:lightblue;
    color:red;
}

a:link {color:blue;} /* 未访问的链接 */
a:visited {color:gray;} /* 已访问的链接 */
a:hover {color:red;} /* 鼠标划过链接 */
a:active {color:black;} /* 已选中的链接 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link href="3.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <form action="reg_check.jsp" method="post">
        <table>
            <tr>
                <td colspan="2" align="center">
                    用户注册信息
                </td>
            </tr>
            <tr>
                <td class="left">
                    用户名
                </td>
                <td style="width:250px">
                    <input type="text" name="user" style="width:150px"/>
                </td>
            </tr>
            <tr>
                <td class="left">
                    密&nbsp&nbsp&nbsp码
                </td>
                <td style="width:250px">
                    <input type="password" name="pw" style="width:150px"/>
                    </td>
            </tr>
            <tr>
                <td class="left">
                    校验密码
                </td>
                <td style="width:250px">
                    <input type="password" style="width:150px" maxlengh="16"/>
                </td>
            </tr>
            <tr>
                <td class="left">
                    籍&nbsp&nbsp&nbsp贯
                </td>
                <td>
                    <select name="place">
                        <option>
                            浙江
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    兴趣爱好
                </td>
                <td class="left">
                    <input type="checkbox"/>篮球
                    <input type="checkbox"/>足球
                    <input type="checkbox"/>书法
                    <input type="checkbox"/>音乐
                    <br>
                    <input type="checkbox"/>绘画
                    <input type="checkbox"/>散打
                    <input type="checkbox"/>瑜伽
                    <input type="checkbox"/>其他
                </td>
            </tr>
            <tr>
                <td>
                    政治面貌
                </td>
                <td>
                    <input type="radio"/>党员
                    <input type="radio"/>团员
                    <input type="radio"/>群众
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button type="button">
                        提交
                    </button>
                    <button type="button">
                        重置
                    </button>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <a href="">注册帮助信息请点击这里</a>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

不建议使用的标签:
<center> 不赞成使用。定义居中文本。
<font> 不赞成使用。定义文字的字体、尺寸和颜色。

Joovo
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格table
weixin_58139900的博客
09-15 1974
表格简介 表格由 table 标签来定义。每个表格均有若干行（由tr 标签定义），每行被分割为若干单元格（由 td 标签定义）。 类比：excel表格&网页中的表格 表格的作用 之前：web开发人员过去也常常使用表格来完成整个网页布局，结构嵌套复杂修改维护困难被DIV+CSS取代 现在：用于显示、展示数据,(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系) 注意：现在HTML 表格应该用于表格数据，而不是来实现网页布局 表格基本标签 ..
HTML 之 CSS form 表单和 table 表格
有时想得太简单的博客
03-14 3304
form 表单 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;form 表单&lt;/title&gt; &lt;style type="te
form和table的区别
weixin_55391257的博客
07-08 2547
html中form表示一个表单，用来把一系列的控件包围起来，然后再统一发送这些数据到目标。比如最常见的注册，你说需要填写的资料，都是被封装在form里的，填写完毕后，提交form内的内容，如果不在form内则不会提交。 而table则是用来布局的，当你填写资料的时候，你有没有发现页面所提供的文本框,文字,按钮之类的都摆放的非常整齐?这就是table的作用，一行一行的以表格的形式展示内容，table仅仅只是用来布局用的,form则是用来封装数据的。 二者在概念上是不同的,通常发挥作用的是form，但是fo
关于文本换行
weixin_30539835的博客
07-22 153
word-wrap:break-word;截断数字或者单词，换行显示； white-space:nowrap;强制不换行； word-break:break-all;强制英文单词换行； overflow:hidden;text-overflow:ellipsis;white-space:nowrap; word-break:break-all和word-w...
前端css中table表格的属性使用
最新发布
小蜗牛764号的博客
04-20 1259
今天学习到关于table（表格）的css属性，为了让学习更有趣以及回顾往日的学习内容，笔者除了描写关于基本的宽、高、间距等属性外，还添加了前几天的博文提到“:hover”伪类选择器的使用，transition(过渡)的使用，以及给表格添加背景颜色或图片，模糊和阴影效果等。有时候自己对于某个知识了解后，要自己描写把它写出来真不容易。本文是在学习table表格中的css属性的同时，还结合了前面几天学到的知识transition、hover等。
form与table的混合用法
BeautifulApple的博客
08-24 8350
通常是一个form里嵌套table 比如： &lt;form action='xx.php'&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;用户名：&lt;/td&gt; &lt;td&gt; &lt;input type='text' /&gt; &lt;/td&gt; &lt;tr&gt; &lt;/table&g
vue实现form表单与table表格的数据关联功能示例
10-17
在Vue.js中，实现表单（form）与表格（table）的数据关联是一项常见的需求，它涉及到数据双向绑定、事件监听以及动态操作数组等核心概念。本示例将详细讲解如何在Vue环境中完成这一功能。 首先，HTML部分创建了一个...
网站开发之HTML基础表格Table和表单Form（三）1
08-03
在网站开发中，HTML表格（Table）和表单（Form）是构建网页内容和交互的重要元素。本篇主要介绍HTML表格的基础知识，包括如何创建表格、合并单元格以及表格的对齐方式。同时，也会简要提及HTML表单的基础概念。 ...
通过html表格发电子邮件
01-20
 /****************************************************************************** Description: This is a simple script to send emails via a html-form to different users Date : 1999-02-25 Author ...
html表单（表格）
07-15
表单标签 table form
layui table 表格模板按钮的实例代码
01-19
@page pageEncoding=UTF-8 contentType=text/html; charset=UTF-8 %> <html> <link rel=icon href=../../../static/images/favicon.png rel=external nofollow > <title>会员列表</title> &...
HTML table、form表单标签的介绍
#维多利亚的秘密#
08-07 768
1. 标签 1.1说明： 在HTML 中定义表格布局。 1.2格式： table> 　　caption>caption> 　　tr> th>th>tr> 　　tbody> 　　　　tr>td>td>tr> 　　　　tr>td>td>tr> 　　tbody> table> 1.3包含的元素有： ：表头信息。 ：定义一个表格行；
js的form表单的table操作
GDYG5的博客
07-16 1073
table操作： 1、删除行 行对象.rowIndex//返回行对象的角标 表格对象.deleteRow(要删除的行对象的角标); 2、添加行 表格对象.insertRow(添加行的角标); 行对象.insertCell(添加列的角标); 3、复制行 先添加行 把要复制的行信息添加到所添加的行中 ...
html怎么让form弄成一个表,创建一个HTML表,其中每个TR是一个FORM
weixin_42391580的博客
06-16 295
如果你想要一个“可编辑的网格”，即一个表结构，允许你使任何行的形式，使用CSS模仿TABLE标记的布局：display：table，display：table-row和display：table-cell 。没有必要将整个表格包装在一个表单中，并且不需要为表格的每个表面行创建单独的表单和表格。试试这个：DIV.table{display:table;}FORM.tr, DIV.tr{display...
html中form表单的使用方法和介绍
热门推荐
王永存
10-04 8万+
form表单的使用方法 第1节、表单赏析 第2节、了解表单 功能：用于搜集不同类型的用户输入的内容   有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。 第2节、常用的表单元素 ü  form   表单 ü  input   表单元素，表单项 ü  select和option  下拉菜单 ü  tex
table 的form序列化提交 ,及json 处理list<对象>
goodlook0123的专栏
07-20 2300
table 的form序列化提交 ,json 处理list<对象>
html表格表单
哇塞
06-12 2319
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <table border="1" width="500" height="200" cellspacing="...
table表格中使用layui-form
06-08
若你想在layui中使用表格，需要先引入layui框架，并且加载layui.form模块。在HTML中，你需要构建一个table元素，并为其添加lay-filter属性，用于layui识别。接着，你需要在JavaScript代码中使用layui.table.render()方法来渲染表格，同时需要将lay-filter属性与表格ID传入。 示例代码如下： HTML: ``` <table class="layui-hide" id="demo" lay-filter="test"></table> ``` JavaScript: ``` layui.use(['table', 'form'], function(){ var table = layui.table; var form = layui.form; //渲染表格 table.render({ elem: '#demo', url: '/api/table', toolbar: '#toolbarDemo', page: true, cols: [[ {type: 'checkbox'}, {field: 'id', title: 'ID', width: 80}, {field: 'username', title: '用户名', width: 120}, {field: 'email', title: '邮箱', minWidth: 150}, {field: 'sex', title: '性别', width: 80, sort: true}, {field: 'city', title: '城市', width: 100}, {field: 'sign', title: '签名', minWidth: 120}, {field: 'experience', title: '积分', width: 80, sort: true}, {field: 'score', title: '评分', width: 80, sort: true}, {field: 'classify', title: '职业', width: 100}, {field: 'wealth', title: '财富', sort: true}, {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] }); //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'detail'){ layer.msg('ID：'+ data.id + ' 的查看操作'); } else if(obj.event === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); layer.close(index); }); } else if(obj.event === 'edit'){ layer.alert('编辑行：<br>'+ JSON.stringify(data)) } }); //监听复选框 table.on('checkbox(test)', function(obj){ console.log(obj) }); //监听单元格编辑 table.on('edit(test)', function(obj){ console.log(obj) }); //监听排序 table.on('sort(test)', function(obj){ console.log(obj) }); }); ``` 上述代码中，我们使用了layui.form模块来监听表格的复选框、单元格编辑和排序功能。同时，在HTML中也定义了一个toolbar，用于添加表格中的操作按钮。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值