专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Web前端开发之表格及表单 web前端table表格设置

ins518 2024-09-29 18:18:21 技术文章 12 ℃ 0 评论

今天我们主要是来了解一下Web前端开发中所用到的一些表格,框架及表单的简单使用方法,如果有一些什么不对的地方,欢迎大家提出来一起讨论。

表格

  • 熟悉表格的常用属性,制作表格

  • 利用表格来容纳表格式数据

  • 利用表格进行页面的排版布局

表格在网站应用中非常广泛,几乎所有的HTML页面中都会或多或少的采用表格来进行布局。表格可以方便灵活地实现对网页的排版,可以把相互关联的信息元素集中定位,使浏览者一目了然,赏心悦目。下面来看看一下基本的表格布局的页面:

上图的简单效果是使用表格布局进行的简单页面设计,下面我们来简单的了解一下表格布局的要素有哪些

结构

表格主要是分为4大结构,分别是:标题、表头、表体、表尾,一个简单的表格通常就是由这4大结构来构成的。

标题:标题主要是用来定义这张表所表示的含义,使人能够直白的理解这张表,就像上图 “学生基本信息”就是标题。

表头:表头所代表的就是所有的列,也就是这张表的属性

表体:表体就是这张表的内容部分,也是对这张表属性的表达

表尾:表尾是整张表最下面的一个部分,一般用来描述制表人,日期等

HTML语言规定了<thead><tbody><tfoot>3个标签分别对应于表格的表首、表主体和表尾,将一个表格分三个部分在网页上显示出来。

基本语法:

<thead>…</thead>

<tbody>…</tbody>

<tfoot>…</tfoot>

表格是网页布局中的重要元素,它有丰富的属性,可以对其进行相关设置

属性

  1. 设置表格的边框属性--border

  2. 设置边框的颜色--bordercolor

  3. 设置亮边框的颜色--bordercolorlight

  4. 设置暗边框的颜色– bordercolordark

  5. 设置背景颜色—bgcolor

  6. 设置背景图像—background

  7. 设置表格宽度与高度—width/heigh

表单

表单可以把来自用户的信息提交给服务器,是网站管理员与浏览者之间沟通的桥梁。表单通常用来做网上调查、注册登记、Web搜索、报名或在线订购等。

表单有几个重要组成部分:表单标记表单域表单按钮

表单的一些重要的属性:

name:给定表单名称,表单命名之后就可以用脚本语言(如JavaScript或VBScript)对它进行控制。

action:指定处理表单信息的服务器端应用程序。

method:用于指定表单处理表单数据方法,method的值(get、post,默认get)。

enctype:规定表单数据在发送到服务器之前进行编码

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,可以定义特殊的边界、3D 效果。

<input>标记主要有六个属性,type,name,size,value,maxlength,checked;

Name:属性的值是相应程序中的变量名。

Type:text、 password、 submit、reset、 button、checkbox、 radio、 image、hidden、file、等十种;

在不同的输入方式下,<input>标记的格式略有不同,其他五种属性因type类型的不同,其含义也不同。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表