HTML表格与表单

article/2025/1/25 15:07:42

目录

  • HTML表格与表单
    • HTML表格
      • 表格常用标签
      • 表格常用属性
      • 表格demo
        • 实现效果
        • 实现代码
    • HTML表单
    • html表格与表单综合demo
      • 实现效果
      • 代码

HTML表格与表单

HTML表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

 

表格常用标签

标签描述
table定义表格
th定义表格的表头
tr定义表格的行
td定义表格的单元
caption定义表格的标题
thead定义表格的页眉
tbody定义表格的主体
tfoot定义表格的页脚

 

表格常用属性

属性描述
bordernpx设置表格的边框
widthnpx, n%设置表格的宽度
colspannumber合并表格的列
rowspannumber合并表格的行
alignright
left
center
justify
表格在文档中的水平对齐方式
valigntop
middle
bottom
baseline
表格在文档中的垂直对齐方式
cellpaddingnpx内容和边框之间的间距
cellspacingnpx单元格之间的间距
bgcolor颜色值设置表格背景颜色
framevoid
border
above
below
hsides
lhs
rhs
vsides
不显示外边框
四周都显示
显示上部的外边框
显示下部的外边框
显示上下的外边框
显示左部的外边框
显示右部的外边框
显示左右的外边框
rulesnone
rows
cols
all
内边框将不被显示
内边框将在行之间显示
内边框在列之间显示
内边框将被显示

 

表格demo

实现效果

在这里插入图片描述

 

实现代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格页面</title>
</head>
<body><table border="1" width="500px"><caption>角色信息表</caption><tr><td align="left" rowspan="4">学生</td><th align="center">序号</th><th align="center">姓名</th><th align="center">性别</th><th align="center">年龄</th><th align="center">电话</th></tr><tr><td>1</td><td>李白</td><td></td><td>18</td><td>5201314</td>				</tr><tr><td>2</td><td>干将莫邪</td><td></td><td>23</td><td>5201314</td>				</tr><tr><td>3</td><td>云中君</td><td></td><td>16</td><td>5201314</td>				</tr></table></body>
</html>

 

HTML表单

表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等,这些元素,统称“控件”。

用于收集用户信息,进行人机交互操作。

表单使用表单标签 <form>来设置。

属性描述
name指定控件的名称,可重复
id指定标签的唯一标识
value输入(收集、设置)控件的值
checked复选框(单选)组默认被选中的项目
selected列表框组默认被选中的项目
src图片框的图片来源
onclick鼠标单击事件
disabled禁用该控件
multiple允许多选(适合普通列表框)

 

html表格与表单综合demo

实现效果

实现效果如图所示:

在这里插入图片描述

 

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>注册页面</title>
</head>
<body><form action="" method=""><table border="0" width="500px"><tr><td align="right">请输入用户名:</td><td><input type="text" name="" id=""></td></tr><tr><td align="right">请输入密码:</td><td><input type="password" name="" id=""></td></tr><tr><td align="right">再次输入密码:</td><td><input type="password" name="" id=""></td></tr><tr><td align="right">性别:</td><td><input type="radio" name="xb" id="" checked="checked"><input type="radio" name="xb" id=""></td></tr><tr><td align="right">兴趣爱好:</td><td><input type="checkbox" name="" id="">游泳<input type="checkbox" name="" id="">爬山<input type="checkbox" name="" id="">看书<input type="checkbox" name="" id="">思考</td></tr><tr><td align="right">生日:</td><td> <select><option value="2017">2017</option><option value="2018">2018</option><option value="2019">2019</option><option value="2020">2020</option></select><select>					<option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option></select><select>					<option value="01">01</option><option value="02">02</option><option value="03">03</option><option value="04">04</option></select></td></tr><tr><td align="right">头像:</td><td><img src="d:Sublime/html/image/headLogo/13.gif"><select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>	</select></td></tr><tr><td align="center	" colspan="2"><input type="submit" value="注册"></td></tr></table></form>
</body>
</html>
文章来源:https://blog.csdn.net/whhcs/article/details/123036799
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://chatgpt.dhexx.cn/article/ZgFAjHUk.shtml

相关文章

HTML学习 —常用表单及简单实例

文章目录 常用表单介绍简单实例 常用表单介绍 show code&#xff1a; <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta…

html form 表单

定义 form 表单在网页中主要负责数据采集功能&#xff0c;属于一个容器标记。 表单组成 一个表单由 form元素、表单控件 和 表单按钮 组成。 &#xff08;1&#xff09; form元素 form元素用来创建表单&#xff0c;语法格式如下&#xff1a; <form action""…

html表单制作选择,html表单(html表单制作及实例)

html表单 HTML表单用于收集不同类型的用户输入。HTML5Input具有多种新的表单输入类型&#xff0c;可提供更好的输入控制和验证。 html表单制作及实例 表格标签&#xff1a;表格 表单标签的主要功能是在HTML页面中创建表单&#xff0c;并在用户填写表单信息后将数据提交到服务器…

HTML基础之form表单

目录 一&#xff1a;表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二&#xff1a;表单对象 1 input标签 2 多行文本textarea 3 下拉列表select 4 表单控件&#xff08;元素&#xff09;button 5 表单控件&#xff08;元素&#xff…

html表单最全详解,初学必看

大家去面试&#xff0c;去开户都要填各式各样的表单&#xff0c;填好之后给工作人员&#xff0c;他们会按照表单项目与你填的内容来帮你完成业务。 同样的&#xff0c;在互联网冲浪也需要填各种各样的表单&#xff0c;比如用户问卷调查&#xff0c;新注册账号等。那么我们填好的…

HTML中的表单

一、网页中为什么需要表单 表单是为了收集用户信息(与用户进行交互&#xff0c;收集用户资料) 表单就是你在打王者时弹出的实名认证 二、表单的组成 在HTML标签中&#xff0c;一个完整的表单一般由表单域、表单控件(表单元素)和提示信息3个部分组成。 注:接着拿王者荣耀的实…

html 表单

input类型 用户框&#xff1a; // input 默认是text maxlength 表示可输入的最大字符数 // size 表示表单的初始元素 name 表示表单元素的名称 value 表示初始值&#xff08;type值为radio 必须指定一个值&#xff09; 密码框&#xff1a; //密码框 类型为password 密码框…

HTML---表单详解

目录 一、表单介绍 二、表单元素 1&#xff1a;input输入表单元素 &#xff08;1&#xff09; text和password &#xff08;2&#xff09;radio和checkbox &#xff08;3&#xff09;button 2&#xff1a;label标签 3&#xff1a;select下拉表单元素 4&#xff1a;textar…

HTML --- 表单

目 录 1.表单的用途 2.表单的工作原理 3.表单中的各种标签 表单标签 form 输入标签 input 文本文框标签 textarea 下拉框标签 select 按钮标签 button 4.表单实例 1.表单的用途 表单在网页上用来 给访问者填写信息 的&#xff0c;从而获得用户信息&#xff0c;使用网…

Html的表单

目录 一、表单基础内容&#xff1a; 表单示例1&#xff1a; 表单示例2&#xff1a; 二、下拉列表和fieldset的使用 表单示例三&#xff1a; 表单示例四&#xff1a; 一、表单基础内容&#xff1a; 表单一般使用form标签包裹&#xff0c;其中&#xff1a; action"url…

java中css js是什么_js、jsp、css都是什么意思?

js、jsp、css都是什么&#xff1f;下面本篇文章就来给大家简单介绍一下js、jsp、css。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 js是什么意思&#xff1f; js全称Javascript&#xff0c;是一种高级的、解释型、直译式脚本语言&a…

css画圆和三角

1. css画园 代码&#xff1a; .circle {width: 100px;height: 100px;background: #C6E2FF;border-radius: 50px; }效果&#xff1a; 2. css画三角 代码&#xff1a; .triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transp…

HTML+CSS画圆、半圆、扇形、三角形

使用border-radius&#xff1a;____px代码实现圆&#xff0c;半圆&#xff0c;扇形&#xff0c;三角形 1、圆 html中设定一个盒子 css中盒子样式 代码实现图 2、半圆 html中设定一个盒子 css中盒子样式 代码实现效果图 3、扇形 html中设定一个盒子 css中盒子样式 代码实现效…

以下css属性可以用来画圆的是,css3 如何画圆

css3画圆的实现方法&#xff1a;首先创建一个HTML示例文件&#xff1b;然后定义一个div&#xff0c;并命名为“circle”&#xff1b;最后通过css属性“border-radius”使div实现圆的效果即可。 本教程操作环境&#xff1a;Dell G3电脑、Windows7系统、HTML5&&CSS3版本。…

【css】用css画圆,半圆和三角形

用css画圆&#xff0c;半圆和三角形 圆&#xff0c;半圆三角形 圆&#xff0c;半圆 // 圆 宽高相等&#xff0c; border-radius大于宽度的一半 .circle{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px…

使用CSS画圆

如何使用CSS画圆&#xff1f; <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>Title</title> <style .circle{width:100px;height:100px;background-color:#f00;border-radius:50%;-moz-b…

如何用CSS画圆 以及添加阴影

圆形的画法&#xff1a; 先画一个矩形&#xff0c;然后添加 border-radius属性&#xff0c;设置值为正方形的一半。 #content{width: 200px;height: 200px;border-radius: 100px;box-shadow:20px 20px 30px gray;background-color: pink;position: relative;left: 100px;top:10…

CSS画圆和三角形

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS画图形</title><style>#circle{width: 200px;height: 200px;background-color: grey;border-radius: 100px;}#half-circle{width: 200p…

用CSS画圆和三角形

圆形的原理不必多说&#xff0c;三角形的原理是使用border&#xff0c;border呈扇形向外展开&#xff0c;当width为0时&#xff0c;就是三角形&#xff0c;可以给四个方向的border设置不同的颜色&#xff0c;查看效果图就能一目了然。 <!DOCTYPE html> <html lang&qu…

CSS画圆、三角形、品字、骰子

CSS画圆、三角形、品字、骰子 前言&#xff1a;这篇文章主要是本人正在看面试题&#xff0c;面试题当成八股文来背&#xff0c;太难了。所以&#xff0c;通过写笔记&#xff0c;并自己实践来加深印象。如果这篇文章对你有帮助&#xff0c;请不要吝啬你的赞。 圆 让 border-rad…