CSS中表格以及表单的属性以及运用

不立373

已于 2022-10-21 18:58:42 修改

阅读量1.5k

点赞数

文章标签： html 前端 css

于 2022-10-21 09:00:35 首次发布

本文链接：https://blog.csdn.net/qq_65841721/article/details/127438937

版权

一.表格（按照一定的顺序摆放数据，表格是由一些单元格组成）

1属性

border边框

cellspacing 单元格与单元格之间的距离

cell padding 单元格边框和内容之间的距离

align 表格水平的位置

**tr行**

align 调整一整行内容的水平位置

valign 调整内容的垂直位置(top middle bottom)

height 调整本行的高度

bgcolor 调整本行的颜色

**注意 tr中width是不生效的**

**td 单元格**

width，height（只要有任何一个单元格发生改变的时候，他所在的那一行或者那一列宽度和高度都会发生变化）

align调整的自身内容的水平位置

valign调整自身内容的垂直位置

bgcolor 调整的是自身的颜色

2.表格的结构

caption表格标题

1，必须跟随在table标签之后

2，表格标题只能存在一个（人为约定）

th表格的表头

thead表格的页眉

tbody表格的主体

tfoot表格的页脚

3.表格的高级运用

**跨列合并colspan**

从指定单元格的位置处开始，横向向右合并，几个单元格（包含自己）被合并掉的单元格应从tr中删除

属性：td的colspan属性

取值：合并单元格的数量

**跨行合并rowspan**

从指定单元格的位置处开始，纵向向下合并，几个单元格（包含自己）被合并掉的要删除

属性：td的rowspan属性

取值：合并单元格的数量

代码：

<!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>第一个表格</title>
</head>

效果图：

二.表单form(用于显示，收集用户信息，并且提交给服务器)

1.组成

表单元素：将信息提交给服务器

表单控件：负责接收用户的数据

表单提交：点了提交按钮就会跳转到新的页面

属性：

action 设置提交表单的地址

method 设置表单的提交方式

get 显示传输

post 隐式传输

get与post的区别：

1.提交方式

get 显示传输

post 隐式传输

2.安全性

post 相对安全

get 不安全

3.数据大小

get（提交数据大小一般都是1024字节）

post（理论上没有限制但实际上根据内存大小和服务器的设置）

2.表单控件

input属性：

type类型

text 普通文本输入框

password 密码框

file 文件上传

radio 单选

textarea cols=“5” row=“5” 评论区（宽五行长五行）

checkbox 多选

submit 提交

reset 重置

image 图片（默认是提交属性）

button 按钮

value 值

name 名称

placeholder 文本占位符

checked 默认选中

disabled 禁用

readonly 只读

注意：checked只适用于单选按钮和复选框，checked和disabled设置时可以直接写属性名也可以写成checked = "checked"、checked = "true"

代码：

<!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>第一个表格</title>
</head>

<body>
<from action="这里写服务器地址" method="get">
用户名<input type="text" placeholder="请输入您的用户名或者电话号码">
密码<input type="password" placeholder="请输入您的密码">
地址<input type="text" value="湖南省岳阳市" name="adress">
<br/>
性别<input type="radio" name="sex" checked="true">男<input type="radio" name="sex">女<input type="radio" name="sex">其他
<br/>
上传头像<input type="file">
<br/>
阅读<textarea cols="3" rows="3" type="readonly">wrryxujxfght</textarea>
<br/>
请你选择你喜欢的运动：
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">兵乓球
<br/>
<input type="submit">
<input type="reset">
</from>
</body>
</html>