CSS笔记——表格元素table单元格合并和妙用（利用table-cell实现块级、多行文本元素水平垂直居中）、表单元素form

本文介绍: HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 c apt ion、t head、t body、tfoot、t h 等。是用于收集用户信息的一组元素。form no validate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。：表单的容器(表单域），用于将表单元素组织在一起。

一、表格元素table

HTML中，表格由 table 元素来定义.还有一些用于表格的其他标签，如 ca p t ion、t head、t body、tfoot、th 等。

表格元素标签：

table：定义一个表格。
tr：定义表格中的一行。
td：定义表格中的一个单元格。
th：定义表格中的表头单元格。th 通常用于表格的第一行或第一列，通常会加粗显示。
ca ption：定义表格的标题，显示在表格的顶部。，默认加粗显示
thead：定义表格的表头部分。
tbody：定义表格的主体部分。
tfoot：定义表格的页脚部分。

注意

table创造初始是用来进行布局，可以设置 dis play：table模拟表格；对外显示块级，默认由内部元素撑开。
th、td必须写在tr标签内，有默认的p ad d in g。
table支持m ar gin：0 auto；

table其他设置 css 属性

border–s p a cing，设置单元格之间的缝隙。支持两个值，水平x,垂直y
border–collapse , 可取值：collapse(单元格合并)，sep ar ate（默认，单元格分开）
text–align /verci al-align：可以用来进行调节宽高
table单元格合并

在th / td 元素标签上设置：

跨行合并 row span = ‘n’

跨列合并 col span = ‘n’

单元格合并，将html当中的多余标签删除

表格妙用

块元素水平和垂直居中

{
    display：table-cell;
	Vertical-align: middle;
	margin :0 auto ;
}

文本元素水平垂直居中

单行文本

{
    text-align :center ;
	height:line-height;
}

多段文字水平垂直居中（实现）

{
	text-align：center
	display：table-cell;
	vertical:middle;
}

二、表单元素form

HTML表单是用于收集用户信息的一组元素。以下是常见的HTML表单元素及其相关属性和属性可取值：

<form action = "url地址" method="get/post请求方式" target="_self/_blank"  >
  /*label针对表单元素，扩大鼠标触发范围，提升用户体验*/
  显式：for值和id对应
  <label for="xxx"> </label>男<input  type="radio" id="xxx"/>
  隐式：
    <label> 男<input  type="radio"/></label>
    /*label可以应用做轮播图*/
</form>

form：表单的容器(表单域），用于将表单元素组织在一起。

相关属性：
- action：表单提交的URL地址。
- method：表单提交的HTTP方法，可取值为”get“或”post“。
- target：表单提交后打开的窗口，可取值为”_self“、“_blan k”、“_parent“或”_top“。
input：用于接受用户输入的文本框、单选框、复选框等元素。

相关联CSS设置属性
- outline ,input表单聚焦之后会存在一层边框的效果。
  
  outline–color:(颜色)、outline-offest(轮廓线距离 in put元素的距离)
  
  outline–style（样式）outline–width
- in put属性会有默认padding属性
  padding：0；取消
相关属性：
- **type：**输入框类型，可取值
  1. text，默认值，用于接收单行文本输入，比如用户名、邮件地址等。
  2. password ，用于接收密码输入，输入的字符会被隐藏，以保证输入的安全性。
  3. chec k box，用于接收单个复选框的选中状态，可以设置 chec ked 属性来指定默认选中状态。
  4. radio，用于接收单个单选框的选中状态，需要将相同的单选框用相同的 name 属性来分组。
  5. file，用于上传文件，允许用户选择本地的文件上传到服务器。
  6. submit，用于提交表单数据到服务器，比如用户点击“提交”按钮后，会将表单中的数据发送到指定的 URL。
  7. reset，用于重置表单中的数据，比如用户点击“重置”按钮后，表单中的所有输入框的值都会被清空。
  8. button，用于创建一个自定义按钮，可以使用 JavaSc ript 绑定点击事件，实现自定义功能。
  9. hidden，用于创建一个隐藏的输入框，通常用于存储不需要用户编辑的数据，比如 session id。
  10. date，用于接收日期输入，允许用户选择日期。
  11. time，用于接收时间输入，允许用户选择时间。
  12. datetime-local，用于接收日期和时间输入，允许用户选择日期和时间。
  13. month，用于接收月份输入，允许用户选择月份。
  14. week，用于接收周数输入，允许用户选择周数
  15. search ,搜索框
  16. number，数字输入框
  17. email,邮箱格式
  18. image，图片提交按钮
  19. hiddle ,影藏与，提交但是不会显示
- name: 定义表单元素的名称，用于后台程序处理表单数据。
- value: 定义表单元素的值，例如文本框中的默认文本、默认选中的单选框或复选框等。
- disabled: 禁用表单元素，使其无法接收用户输入，通常用于表单元素不可用的情况。
- read only: 表单元素只读，用户无法修改其值，通常用于展示数据或只读状态的表单元素。
- checked: 表示单选框或复选框是否默认被选中。
- placeholder: 提示用户在表单元素中输入什么，通常在输入框中显示浅灰色的字体。
- size: 定义输入框的显示宽度，以字符为单位。
- max length: 定义输入框中允许输入的最大字符数。
- requi red: 设置为必填项，用户必须填写。
- pattern: 定义一个正则表达式，用于验证输入框中的值是否合法。
- autocomplete: 自动补全 ,可取值 on/off。
- autofocus: 表示该表单元素是否应该自动获取焦点。
- form: 定义表单元素所属的表单 ID。
- form action: 定义提交表单数据时使用的 URL。
- formenc type: 定义提交表单数据时使用的编码类型。
- formmethod: 定义提交表单数据时使用的 HTTP 方法。
- formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。
- form target: 定义在何处打开提交表单数据的结果。
- accept: 定义用户可以上传的文件类型。
- multiple: 表示用户是否可以上传多个文件。
- step: 定义用户可以选择的数字的增量。
- min: 定义输入框中允许输入的最小值。
- max: 定义输入框中允许输入的最大值。
- list: 定义一个 data list 元素的 ID，与输入框关联，提供输入建议。

select：用于创建下拉框。

<select name="xxx" id=""  size="列表可见选项数">
    <optgroup label="xxxxx"></optgroup> //下拉表单的分组
	<option value="a">aaa</option>
	<option value="b">bbb</option>
</select>

一、表格元素table

二、表单元素form

相关文章

发表回复 取消回复

发表回复取消回复