表格 table

table标签，display值为table。作用对于整个表格而言，像一个容器。里面包含了tr标签（表格行）、td（单元）等，由于表格中没有列的分类，所以每行中以单元的个数划分列。

table本身有一些默认的css样式，没有重置过的表格如下：

<table><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></table>

给table加上一个边框（注意边框添加时的位置与语法），就会变成这样：

<table border="1"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></table>

消除每个单元格之间有的一个间隙，需要在table的css样式中使用border-collapse属性，值为collapse。

table{border-collapse: collapse;text-align: center;}

在table中有一个默认存在的tbody标签，它是自动生成的，不会对定义的table样式产生影响。

合并单元格

单元格的合并分为横向合并（colspan）与纵向合并（rowspan），两者用法相同，遵循“1找2合3删除”的规律。

<table border="1"><tr><td rowspan="2">1</td><!-- 2个是包括自己本身和下一个 --><td >2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><!-- rowspan合并的是这个 --><td>2</td><td>3</td><td>4</td><td>5</td></tr><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></table>

如果没有删除，合并之后的单元格会占据被合并单元格的位置，从而依次向后，最终会多出一排或一列。

这时只要删掉被合并的单元格即可。

表单 form

form是一个块标签，其中包含标签如input，是行块标签。

form中的action代表信息/数据提交到的地址，这个地址需要写成URL地址，其格式为：

协议+域名（如www.baidu.com）或者 IP：port（IP地址：端口号）+路径或路由。

表单提交的特点：提交数据之后原页面会跳转到数据提交到的页面。

form中的method代表提交方式，默认值为get。

get：信息拼接在地址栏中，不安全

post：信息打包发送，安全

<form action="https://www.baidu.com/s" method="get"></form>

<form action="https://www.baidu.com/s" method="get"><div class="search"><input type="text" id="search" name="wd"><input type="submit" id="submit" value="百度一下"></div></form>

使用get提交方式，信息全部暴露在地址栏中，非常不安全，所以现在多使用post打包提交的方式，将信息打包传输，提高了安全性。

表单元素

表单元素包括input、select/option、textarea。

input

name：划定作用域，作为关键词提交数据给后台。

type种类很多：

text文本框 placeholder 提示文本 required 必填项

password 密码框

radio 单选框如果没有同一个name做约束，可以同时选择多个 checked 默认选项

checkbox 多选框也可以用checked作默认选择

button 按钮

submit 提交

reset 重置

file 提交文件

hidden 隐藏在页面中不显示，用来收集当前所使用的设备的信息提交到指定的服务器，以获取其他信息。

textarea

textarea多行文本域 resize：none表示不可以调整大小

【html】表格table与表单form相关推荐

html创建一个四行三列表单,HTML（三）表格table与表单form的基本使用
table的基本使用表格的作用除了可以显示一个表格外,有的时候还可以用于辅助排版.以前的网页都是使用表格进行排版的,不过现在都不流行了,因为表格排版不利于网页结构. 1.新建表格 table就是表格 ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
HTML标签-排版标签、媒体标签、列表标签、表格标签、表单标签、语义化标签、字符实体
一.排版标签 1.标题标签在新闻和文章的页面中都离不开标题,用来突出显示文章主题. h系列标题 <body><h1>1级标题</h1> <h2>2级标 ...
HTML5 列表、表格、常用表单、基本标签
学习目标: 了解常用浏览器掌握WEB标准理解标签语义化掌握常用的排版标签掌握常用的文本格式化图像链接等标签掌握三种列表标签掌握表格标签掌握表格标签掌握表单标签掌握H5新增表单和表单属 ...
Element-UI组件之表单Form
Element-UI组件之表单Form Radio 单选框基础用法禁用状态单选框组按钮样式带有边框 Checkbox 多选框基础用法禁用状态多选框组 indeterminate 状态 ...
Web学习第二天——HTML的基本标签（媒体标签、链接标签、列表标签、表格标签、表单标签）
第二天 HTML的常用标签(媒体标签.链接标签.列表标签.表格标签.表单标签) 一.媒体标签 (一).图片标签(img) 标签格式及属性介绍 (二).音频标签(embed.audio) embed标签 ...
HTML 列表标签、表格标签、表单标签
HTML 列表标签.表格标签.表单标签一.列表标签二.表格标签三.表单标签四.综合练习一.列表标签 <!DOCTYPE html> <html lang="en& ...
使HTML中的表单Form实现居中效果
使HTML中的表单Form居中之前碰到一个作业,给了一张图片,让按照图片样式做一个表单,但在所有功能都实现后,发现无法让表单居中,一直缩在左上角,看起来很难看.在经过了各种修改后,终于成功将表单居中 ...
DHTMLX 前端框架建立你的一个应用程序教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

【html】表格table与表单form