当前位置: 开发笔记 > 编程语言 > 正文

三、表格与表单

作者：mobiledu2502886833 | 来源：互联网 | 2023-10-12 10:04

表格标记创建表格要想创建表格，就需要使用表格相关的标记单元格内的文字包含三对HTML标记，分别为

表格标记

创建表格

要想创建表格，就需要使用表格相关的标记

...

...

单元格内的文字

包含三对HTML标记，分别为

、、，他们是创建表格的基本标记，缺一不可

：用于定义一个表格。
：用于定义表格中的一行，必须嵌套在

标记中，在

中包含几对，就有几行表格。
：用于定义表格中的单元格，必须嵌套在标记中，一对中包含几对，就表示该行中有多少列（或多少个单元格）。

注意:
学习表格的核心是学习标记，他就像一个容器，可以容纳所有的元素，中甚至可以嵌套表格

。但是中只能嵌套，直接在标记中输入文字的做法是不被允许的。

标记的属性

属性名
含义
常用属性值
border
设置表格的边框（默认border="0"无边框）像素值
cellspacing
设置单元格与单元格边框之间的空白间距
像素值（默认为2像素）
cellpadding
设置单元格内容与单元格边框之间的空白间距
像素值（默认为1像素）
width
设置表格的宽度
像素值
height
设置表格的高度
像素值
align
设置表格在网页中的水平对齐方式
left、center、right
bgcolor
设置表格的背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background
设置表格的背景图像
url地址
1、border属性
用于设置表格的边框，默认为0

2、cellspacing属性
用于设置单元格与单元格边框之间的空白间距，默认为2px

3、cellpadding属性
用于设置单元格内容与单元格边框之间的空白间距，默认为1px

注意:
cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子模型的内外边距理解cellpadding与cellspacing的不同。
4、width与height属性
默认情况下，表格的宽度和高度靠其自身的内容来支撑。要想更改表格的尺寸，就需对其应用宽度属性width或高度属性height
当为表格标记
同时设置width、height和cellpadding属性时，cellpadding的显示效果将不太容易观察，所以一般在未给表格设置宽高的情况下测试cellpadding属性。
5、align属性
align属性用于定义元素的水平对齐方式，其可选属性值为left、center、right。值得一提的是，当对
标记应用align属性时，控制的为表格的水平对齐方式，单元格中的内容不受影响。
6、bgcolor属性
在
标记中，bgcolor属性用于设置表格的背景颜色。
7、background属性
在
标记中，background属性用于设置表格的背景图像。

标记的属性

制作网页时，有时需要表格中的某一行特殊显示，这时就可以为行标记定义属性
属性名
含义
常用属性值
height
设置行高度像素值
align
设置一行内容的水平对齐方式
left、center、right
valign
设置一行内容的垂直对齐方式
top、middle、bottom
bgcolor
设置行背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background
设置行背景图像
url地址

注意
标记无宽度属性width，其宽度取决于表格标记
。
可以对标记应用valign属性，用于设置一行内容的垂直对齐方式。
虽然可以对
标记应用background属性，但是在标记中此属性兼容问题严重。

替代相应的单元格标记即可。

表格的结构

在使用表格进行布局时，可以将表格划分为头部、主体和页脚
：用于定义表格的头部，必须位于
标记的属性

在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这时就可以为单元格标记定义属性
属性名
含义
常用属性值
width
设置单元格的宽度
像素值
height
设置单元格的高度
像素值
align
设置单元格内容的水平对齐方式
left、center、right
valign
设置单元格内容的垂直对齐方式
top、middle、bottom
bgcolor
设置单元格的背景颜色
预定义的颜色值、十六进制#RGB、rgb(r,g,b)
background
设置单元格的背景图像
url地址
colspan
设置单元格横跨的列数（用于合并水平方向的单元格）
正整数
rowspan
设置单元格竖跨的行数（用于合并竖直方向的单元格）
正整数

注意:
1、在标记的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。
2、当对某一个标记应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。
3、当对某一个
标记应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。

标记及其属性

表头一般位于表格的第一行或第一列，其文本加粗居中
设置表头非常简单，只需用表头标记
标记中，一般包含网页的logo和导航等头部信息。
：用于定义表格的页脚，位于
标记中标记之后，一般包含网页底部的企业信息等。
：用于定义表格的主体，位于
标记中标记之后，一般包含网页中除头部和底部之外的其他内容。

CSS控制表格样式

标记的属性在网页制作过程中，有时仅仅需要对某一个单元格进行控制，这时就可以为单元格标记	定义属性属性名含义常用属性值 width 设置单元格的宽度像素值 height 设置单元格的高度像素值 align 设置单元格内容的水平对齐方式 left、center、right valign 设置单元格内容的垂直对齐方式 top、middle、bottom bgcolor 设置单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b) background 设置单元格的背景图像 url地址 colspan 设置单元格横跨的列数（用于合并水平方向的单元格）正整数 rowspan 设置单元格竖跨的行数（用于合并竖直方向的单元格）正整数注意: 1、在	标记的属性中，重点掌握colspan和rolspan，其他的属性了解即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个	标记应用width属性设置宽度时，该列中的所有单元格均会以设置的宽度显示。 3、当对某一个	标记应用height属性设置高度时，该行中的所有单元格均会以设置的高度显示。	标记及其属性表头一般位于表格的第一行或第一列，其文本加粗居中设置表头非常简单，只需用表头标记

CSS控制表格边框

使用CSS边框样式属性border可以轻松地控制表格的边框

注意:
1、 border-collapse属性的属性值除了collapse（合并）之外，还可以为separate（分离），默认为separate。
2、当表格的border-collapse属性设置为collapse时， HTML中设置的cellspacing属性值无效。
3、行标记无border样式属性，本书不再做具体的演示，初学者可以自己测试加深理解。

CSS控制单元格边距

使用标记的属性美化表格时，可以通过cellpadding和cellspacing分别控制单元格内容与边框之间的距离以及相邻单元格边框之间的距离。

注意:

行标记

无内边距属性padding和外边距属性margin

CSS控制单元格的宽高

单元格的宽度和高度，有着和其他元素不同的特性，主要表现在单元格之间的互相影响上。
对同一行中的单元格定义不同的高度，或对同一列中的单元格定义不同的宽度时，最终的宽度或高度将取其中的较大者

认识表单

在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成
表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域：他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

表单控件是表单的核心，常用的表单控件

表单输入控件（可定义多种表单项）

定义多行文本框

定义一个下拉列表（必须包含列表项）

创建表单

在HTML中，标记被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，中的所有内容都会被提交给服务器

各种表单控件

与之间的表单控件是由用户自定义的，action、method和name为表单标记的常用属性
Action：请求路径，确定表单提交到服务器的地址（路径）

在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址

method：请求方式

method属性用于设置表单数据的提交方式，其取值为get或post。

get：默认值
提交时数据追加在请求路径上
数据格式k/v，追加使用？连接，之后每一对数据使用&连接
请求长度有限所以get请求提交的数据有限
如:/1.html?username=jack&password=1234

post:
提交数据不再请求路径上追加（即不显示在地址栏上）

提交是的数据大小不显示

name

name属性用于指定表单的名称，以区分同一个页面中的多个表单。
注意：要想让一个表单有意义，就必须在与之间添加相应的表单控件

表单控件

input控件(输入域标签)

标记为单标记，type属性为其最基本的属性，用于获取用户输入信息，type属性值不同，搜集方式不同。其取值有多种，用于指定不同的控件类型。

属性
属性值
描述
type

text
单行文本输入框（默认宽度为20）
password
密码输入框
radio
单选按钮
checkbox
复选框
button
普通按钮
submit
提交按钮
reset
重置按钮
image
图像形式的提交按钮
hidden
隐藏域
file
文件域
image:图形提交按钮
name
由用户自定义
控件的名称。元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获取提交的数据
value
由用户自定义
input控件中的默认文本值
size
正整数
input控件在页面中的显示宽度
readonly
该控件内容为只读（不能编辑修改）
disabled
第一次加载页面时禁用该控件（显示为灰色）
checked
定义选择控件默认被选中的项

maxlength
正整数
控件允许输入的最多字符数