文章目录

表格与表单
- 1、表格
- 2、长表格
- 3、表格的样式
- - HTML 代码
  - CSS 代码
- 4、表单
- - 文本框
  - 密码框
  - 提交按钮
  - 单选框
  - 多选框
  - 下拉列表
- 5、表单补充
- - 按钮

表格与表单

1、表格

在现实生活中，我们经常需要使用表格来表示一些格式化数据：

课程表、人名单、成绩单…

同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

在table中使用tr表示表格中的一行，有几个tr就有几行

在tr中使用td表示一个单元格，有几个 td就有几个单元格

rowspan 纵向的合并单元格
colspan 横向的合并单元格

<table border="1" width="50%" align=" center"><!--在table中使用tr表示表格中的一行，有几个tr就有几行--><tr><!--在tr中使用td表示一个单元格，有几个td就有几个单元格--><td>A1</td><td>B1</td><td>C1</td><td>D1</td></tr><tr><td>A2</td><td>B2</td><td>C2</td><!--rouspan 纵向的合并单元格--><td rowspan="2">D2</td></tr><tr><td>AB</td><td>B3</td><td>C3</td></tr><tr><td>A4</td><td>B4</td><!-- colspan横向的合并单元格 --><td colspan="2">C4</td></tr>
</table>

2、长表格

可以将一个表格分成三个部分：

头部 thead
主体 tbody
底部 tfoot

th 表示头部的单元格

<table><thead><tr><td>日期</td><td>收入</td><td>支出</td><td>合计</td></tr></thead><tbody><tr><td>2000.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2000.1.1</td><td>500</td><td>200</td><td>300</td></tr><tr><td>2000.1.1</td><td>500</td><td>200</td><td>300</td></tr></tbody><tfoot><tr><td></td><td></td><td>合计</td><td>1200</td></tr></tfoot>
</table>

3、表格的样式

HTML 代码

<table><tr><td>学号</td><td>姓名</td><td>性别</td><td>年龄</td><td>地址</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>18</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>28</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>38</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>16</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>18</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>28</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>38</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>16</td><td>女儿国</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>16</td><td>女儿国</td></tr><tr><td>1</td><td>孙悟空</td><td>男</td><td>18</td><td>花果山</td></tr><tr><td>2</td><td>猪八戒</td><td>男</td><td>28</td><td>高老庄</td></tr><tr><td>3</td><td>沙和尚</td><td>男</td><td>38</td><td>流沙河</td></tr><tr><td>4</td><td>唐僧</td><td>男</td><td>16</td><td>女儿国</td></tr>
</table>

CSS 代码

table {width: 50%;margin: 0 auto;border: 1px black solid;/* border-spacing：指定边框之间的距离；边框之间虽然没有距离了，但是实际上是两条边框的和，看起来是变粗了 *//* border-spacing: 0; *//*border-collapse:collapse；设置边框的合并；真正的将两条边框合并成一条边框 */border-collapse: collapse;/* 默认情况下元素在td中是垂直居中的，可以通过vectical-align来修改 */vertical-align: middle;text-align: center;
}/* 如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并且将tr全都放到tbody中所以说，tr不是table的子元素 */
tbody tr:nth-child(odd) {background-color: rgb(211, 216, 188);
}td {border: 1px black solid;
}

其中，

border-spacing：指定边框之间的距离
border-collapse：设置边框的合并

4、表单

表单

在现实生活中表单用于提交数据
在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器

form 的属性

action：表单要提交的服务器的地址

文本框

注意：数据要提交到服务器中，必须要为元素指定一个name属性值

文本框<input type="text" name="username" />

密码框

密码框<input type="password" name="password" />

提交按钮

<input type="submit" value="注册" />

单选框

像这种选择框，必须要措定一个value属性，value属性最终会作为用户填写的值传递给服务器

单选框
<input type="radio" name="hello" value="a" />
<input type="radio" name="hello" value="b" checked />

多选框

多选框
<input type="checkbox" name="test" value="1" />
<input type="checkbox" name="test" value="2" />
<input type="checkbox" name="test" value="3" checked />

下拉列表

下拉列表
<select name="haha"><option value="i">选项一</option><option value="ii" selected>选项二</option><option value="iii">选项三</option>
</select>

5、表单补充

按钮

<!-- 提交按钮 -->
<input type="submit" />
<!-- 重置按钮 -->
<input type="reset" />
<!-- 普通按钮 -->
<input type="button" value="按钮" />
<br /><br />
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>

上面两种写法实际上效果是一致的，区别在于：

input是自闭合标签，不需要</input>就能结束；button不是自闭合标签，跟一般标签一样是成对出现的
button因为不是自闭合标签，所以使用起来更灵活，可以嵌套其他的标签

前端基础入门之css表格与表单相关推荐

CSS——表格与表单的简介
文章目录前言一.什么是表格? 二.什么是表单 1.表单中的常用项与介绍 2.补充点总结前言本文主要介绍了html中表格与表单的相关知识点一.什么是表格? 表格的应用在日常生活中十分的常见, ...
HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签作业分析上一篇<HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签&g ...
一前端基础，http协议，form表单
一,web服务的本质: 浏览器中敲入网站回车发生的几件事? 1.游览器向服务端发送请求 2.服务端接受请求 3.服务端返回相应的响应 4.浏览器接受响应根据特定的规则渲染页面展示给用户看二: HT ...
前端之HTML列表、表格及表单
文章目录 1.表格 table 1.1.创建表格 1.2.表格属性 1.3.表头单元格标签th 1.4.表格标题caption 1.5.合并单元格 1.5.1.合并单元格2种方式 1.5.2.合并单元 ...
CSS — 表格和表单
目录一.表格 1.表格介绍 2.长表格 3.表格的样式二.表单一.表格 1.表格介绍在现实生活中,我们经常使用表格来表示一些格式化的数据,如课程表,人名单等等. 同样,在网页中也需要使用表格, ...
CSS表格和表单设置
表格: 再HTML中使用table标签来创建一个表格:在table标签中使用tr标签来表示表格中的一行:在tr标签中使用td来常见一个单元格.可以用th标签来表示表头(自动加粗和居中):th的用法 ...
前端基础入门之css像素与视口和媒体查询
文章目录像素与视口像素视口(viewport) 手机像素完美视口 vw单位 vw 常见的设计图宽度 vw适配 rem 媒体查询响应式布局媒体查询媒体查询语法媒体类型媒体特性断点像 ...
前端基础入门之css定位 position
定位的简介需求分析按照我们之前所学知识,可以怎么实现呢? 应该来说不难,很容易实现 .box2 {width: 200px;height: 200px;background-color: yell ...
前端基础入门之css字体相关
文章目录字体 1. 字体相关的样式 2. font-family 3. 几种字体手写体艺术体乱码字体中文字体 4. @font-face 5. 图标字体(iconfont) 图标字体简介 f ...
前端学习第一周-计算机基础，html标签的介绍，其中包括列表，表格以及表单的使用
前端学习第一周-HTML基础文章目录前端学习第一周-HTML基础前言 DAY 1 计算机组成计算机网络 DAY 2 vscode快捷方式 HTML骨架 DAY 3 HTML属性 HTML标签 ...

前端基础入门之css表格与表单