首页 > 其他分享 >第三章 表格布局与表单交互

第三章 表格布局与表单交互

时间:2024-09-24 14:50:29浏览次数:9  
标签:第三章 表格 标记 单元格 表单 3.4 属性

3.1 表格概述:

表格是网页中的一个重要容器元素,可包含文字和图像。表格使网页结构紧凑整齐,使网页内容的显示一目了然。表格除了用来显示数据外,还用于搭建网页的结构。几乎所有 HTML页面都或多或少地采用了表格。表格以简洁明了和高效快捷的方式将图片、文本、数据和表单的元素有序地显示在页面上,从而可以呈现出漂亮的页面。表格在网页设计中能将网页分成多个任意的矩形区域。


3.1.1 表格的结构:表格是由行和列组成的二维表,而每行又由一个或多个单元格组成,用于放置数据或其他内容。表格中的单元格是行与列的交叉部分,是组成表格的最基本单元。单元格的内容是数据,也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。


3.1.2 表格的基本语法:


3.2 表格属性的设置:表格是网页文件中布局的重要元素,制作网页的过程中常常需要对网页中的表格做一些设置,对表格的设置实质是对表格标记属性的一些设置。


3.2.1 表格边框属性:

(1)border属性。用于设置边框的粗细,单位是像素。
(2)bordercolor属性。用于设置表格边框的颜色,可以使用rgb函数、十六进制数和颜色英文名称。
(3) bordercolorlight属性。用于设置表格亮边框,对表格左上边框生效。(4)bordercolordark 属性。用于设置表格暗边框,对表格右下边框生效。


3.2.2 表格的宽度和高度属性:(1) width。其单位可以是长度单位或百分比,用于定义表格的宽度。(2) height。其单位可以是长度单位或百分比,用于定义表格的高度。


3.2.3 表格背景颜色与表格图像属性:(1)bgcolor。可以用rgb函数、十六进制、英文颜色名称来设置背景颜色。(2)background。设置背景图像,图像的路径可以是绝对路径或相对路径 。(3)同时设置背景颜色和背景图像属性时,背景图像会部分或完全覆盖背景颜色。


3.2.4 表格边框样式属性:


3.2.5 表格单元格间距、单元格边距属性:设置表格标记中的cellspacing属性可以改变表格单元格之间的间隔,使网页中的表格内容稍微松散一些。设置表格标记中的cellpadding属性可以增加表格单元格的内容与内部边框之间的距离。
(1) cellspacing。值的单位为像素或百分比,默认值为2px。(2) cellpadding。值的单位为像素或百分比。


3.2.6 表格水平对齐属性:align属性的取值可以为left(默认居左)、center(居中)和right(居右)。


3.2.7 设置表格的(tr)标记行的属性:

通过tr标记的align属性可以设置行内容的水平对齐方式。水平对齐方式有居左对齐、居中对齐和居右对齐。通过tr标记的valign属性可以设置行内容的垂直对齐方式。垂直对齐方式有顶部对齐、居中对齐和底部对齐。


3.2.8 设置单元格的属性:


3.2.9 表格单元格跨行、跨列属性:


3.2.9.1 单元格跨行:使用单元格td标记的rowspan属性可以设置单元格跨行合并。


3.2.9.2 单元格跨列:使用单元格td 标记的colspan属性可以设置单元格跨列合并。


3.3 表格嵌套:表格嵌套是一种常用的页面布局方式。利用表格嵌套可以设计比较复杂且美观的页面效果。通常情况下,使用表格嵌套时,表格不宜过多使用,否则会降低网站访问速度。表格嵌套一般采用在单元格内嵌套表格。
3.4 表单:HTML中的表单是网页中最常用的元素,是网站服务器端与客户端之间沟通的桥梁。一个完整的交互表单由两部分组成:一是客户端包含的表单页面,用于填写浏览者进行交互的信息;另一个是服务端的应用程序,用于处理浏览者提交的信息,浏览者在表单中输入信息,然后将这些信息提交给服务器;服务器中的应用程序会对这些信息进行处理响应,这样就完成了浏览者和服务器之间的交互。


3.4.1 表单标记:表单form标记为成对标记,以<form>开始和</form>结束。表单定义了采集数据的范围,其所包含的数据内容将被完整地提交给服务器。


3.4.2 定义域和域标题:利用 fieldset标记可以在网页上定义域,在表单中使用域可以将表单的相关元素进行分组,feldset标记将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到Eieldset标记内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D效果,或者可创建一个子表单来处理这些元素。legend标记为fieldset标记定义域标题。


3.4.3 表单信息输入:表单的主要功能是为用户提供输入信息的接口,将输入信息发送到服务器并等待服务器响应。表单中输入信息的标记是input标记,可以输入一行信息。


3.4.3.1 单行文本输入框:设置input 标记的type属性值为text,可以实现向表单中插入一个单行文本框。在单行文本框中可以输入任意类型的数据,但是输入的数据只能单行显示,不能换行。


3.4.3.2 密码输入框:设置input标记的type属性值为password,可以实现向表单中插入一个密码输入框。密码输人框中可以输入任意类型的数据,与单行文本输入框有所不同,这些数据不是实时地显示在页面上,而是被显示字符“·”所取代,这样设计可以保障用户输入的密码不被泄露。


3.4.3.3 复选框:设置input标记的type 属性值为checkbox,可以实现向表单中插人一个复选框,用户科用复选框在网页上设置多项选择。


3.4.3.4 单选按钮:设置input标记的 type 属性值为radio,可以实现向表单中插人一个单选按钮,用户可利用单选按钮在网页上为某一选择设置多个单选项。


3.4.3.5 图像按钮:设置 input 标记的 type属性值为image,可以实现向表单中插入一个图像按钮,用户可利用图像按钮在网页中插入一张图像,通过src属性加载图像。


3.4.3.6 提交按钮:设置input标记的type属性值为submit,可以实现向表单中插入一个提交按钮,提交按钮用于将表单的信息提交至服务器进行处理。


3.4.3.7 重置按钮:设置input 标记的type 属性值为reset,可以实现向表单中插入一个重置按钮,重置按钮用于将表单中所有的输入信息清空,然后让用户可以重新填写。


3.4.3.8 普通按钮:设置input 标记的type 属性值为button,可以实现向表单中插入一个普通按钮。普通按注册件代码来实现所需的功能。


3.4.3.9 文件选择框:设置input标记的type属性值为file,可以实现向表单中插入一个文件选择框。


3.4.3.10 隐藏框:设置input标记的type属性值为hidden,可以实现向表单中插入一个隐藏框,用户提交表单时,隐藏框的信息也会一起提交到服务器,但隐藏框在网页中是不可见的。


3.4.4 多行文本输入框:textarea标记可以向表单中插入多行文本输人框。多行文本输人框可以用来输入较多的文字信息,而且可以换行,并将这些信息提交到服务器。


3.4.5 下拉列表框:下拉列表可以在表单中接收用户的输人。下拉列表通常需要同时使用select 和option标的自动换行,并以这种记来在表单中插入下拉菜单和列表项。


 

标签:第三章,表格,标记,单元格,表单,3.4,属性
From: https://blog.csdn.net/2401_84288452/article/details/142367586

相关文章

  • UIOTOS示例:自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis gov
    目标对话框作为容器组件,可以隐藏掉默认的窗体头和脚,完全由内嵌页自定义,参见对话框自定义外观。并且也能获取弹窗纯表单数据,如下所示: 步骤内嵌页1.新建略。2.拖放组件拖放三个输入框,标识分别施志伟id、name、phone;两个按钮标识分别设置为cancel和ok 主页面1.新......
  • 快速循环切换Excel表格数据筛选器
    工作表中数据如下图所示。现在需要添加按钮,实现C列的循环筛选,如下图所示。如果当前表格未启用筛选功能,则首次筛选值为KB-L。示例代码如下。SubCycleFilter()DimaCrit,iAsLong,oTabAsListObject,iColAsLongDimsCritAsStringConstKEYS="......
  • 好用的js表格组件tabulator使用
    偶然中看到了这个功能强大的表格组件,不仅支持分页、过滤、排序、树形表格等常见的功能,且支持分组显示、表格内编辑、统计计算、读本地文件、拖拽表格改变行列顺序、下载、像在excel文件中操作一样的编辑等多种功能。常用配置项及表格实例化查看代码<linkhref="../plugins/tab......
  • c++实现链表单双环链表
    数据结构链表1.链表实质上是一个结构体,包含数据域和指针域,这两个实际上都是一个变量而已,只不过数据域存放的是节点的数据,指针域存放的是下一个节点的地址2.我们新建一个链表节点的时候通常采取的语句类似于NumList*head=(NumList*)malloc(sizeof(NumList)),要注意,......
  • 第3章 表格布局与表单交互
    3.1表格概述在HTML中,表格是用来展示数据的一种有效方式,特别是当数据是结构化的,比如行和列的形式时。表格由 <table> 标签定义,并通过一系列的行 <tr>、单元格 <td>(tabledata)以及表头 <th>(tableheader)来构建。3.1.1表格的结构一个基本的 HTML表格由以下几个部分......
  • JavaWeb -Servlet对表单数据的处理 例:登录系统
    一、创建html文件并添加框架内容<tr></tr>是表格标签<td></td>是单元格标签1.添加用户名和密码<inputtype="text"name="username">文本格式(text),函数名是username。<inputtype="password"name="password">密码格式(password),函数名......
  • c# winform 以excel形式导出表格中的数据
    1.需要安装EPPlus插件2.引入usingOfficeOpenXml;usingOfficeOpenXml.Style; 3.代码publicvoidExportDataGridViewToExcel(DataGridViewdgv,stringfilePath)    {      //设置EPPlus的许可证上下文      ExcelPackage.Licens......
  • Axure原型设计:多层级动态表格
    多层级表格又成为树形表格,是在后台常用的一种表格形式,当表格数据存在多层级关系是,可以通过多层级表格,从而更加清晰的呈现数据内容,帮助人们更好地理解和分析数据之间的关系,从而更加有效地传递信息。所以今天作者就教大家怎么在Axure里制作多层级动态表格,包括展开、折叠、增加、修......
  • NX绘图第三章之抽壳工具的使用
    利用抽壳工具绘制下图器件1.新建文件首先在文件中点击新建,选择如图模型,文件夹中可包含中文,老版的NX可能存在不能包含中文的情况。2.进入草图模式首先点击图一左上角的拉伸工具,弹出下图对话框。本次图像绘制要先确定基于某个界面,随后鼠标点击xy平面即可,然后点击弹窗的确定......
  • 第三章-(六)高速缓冲存储器(Cache)
    1.Cache基本原理基本概念1.1程序访问的局部性原理空间局部性:在最近的未来要用到的信息(指令和数据),很可能与现在正在使用的信息在存储空间上是邻近的时间局部性:在最近的未来要用到的信息,很可能是现在正在使用的信息基于局部性原理,不难想到,可以把CPU目前访问的地址“周围”......