表格与表单

简介: 表格与表单

表格


table标签(表格)、tr标签(行)、td标签(标准单元格)、caption标签(标题)、th标签(表头单元格)。

为了更深一层对表格进行语义化,HTML引入了thead、tbody和tfoot这三个标签。这三个标签把表格分为三部分:表头、表身、表脚。

标签  说明

table   表格

caption 标题

thead   表头(语义划分)

tbody   表身(语义划分)

tfoot   表尾(语义划分)

tr  行

th  表头单元格

td  表格单元格

<table>
    <caption>考试成绩表</caption>
    <thead>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>英语</th>
        <th>数学</th>
    <tr>
    </thead>
    <tbody>
    <tr>
        <td>小明</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
    <tr>
        <td>小红</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    <tr>
        <td>小杰</td>
        <td>100</td>
        <td>100</td>
        <td>100</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td>平均</td>
        <td>90</td>
        <td>90</td>
        <td>90</td>
    </tr>
    </tfoot>
</table>


image.png

表格样式美化

<style>
table, th, td {
     border: 1px solid black;
     border-collapse: collapse;
}
th, td {
     padding: 6px;
    color: blue;
}
</style>

给表格添加边框,设置字体颜色,

以及给单元格设置一些padding


image.png


练习制作商品表格


image.png


表单


image.png


表单就是收集用户信息的,就是让用户填写的、选择的。

<div> <h3>欢迎注册本网站</h3>
    <form> 所有的表单内容,都要写在form标签里面</form>
</div>

form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

1.文本框

<input type="text" value="默认值" />

2.密码框

<input type="password"/>

3.单选按钮

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

input的type的值如果是radio就是单选按钮。

需要注意的是必须要有相同的name属性,单选按钮才能互斥。

label标签

<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label>

input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框

4.复选框

<input type="checkbox" name="aihao"/> 睡觉 
<input type="checkbox" name="aihao"/> 吃饭

复选框,最好也是有相同的name(便于服务器端收集用户选中的信息)。

5.下拉列表

<select>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>

select就是“选择”,

select标签和ul、ol、dl一样,都是组标签

option“选项”。

6.文本域

<textarea cols="20" rows="10"></textarea>

cols属性表示columns“列”,

rows属性表示rows“行”。

值就是数字,表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字,一般不需要写字。

7.按钮

普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击,表单会提交到服务器。

重置按钮

<input type="reset" />

reset就是“复位”“重置”的意思,可以重置前面各个表单元素中填写的值。

只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly">
<input type="submit "  disabled="disabled"  value="保存" >


练习制作调查问卷


image.png

项目实战

制作商品搜索表单


image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .search{
            width: 409px;
            margin: 0 auto;
            margin-top: 60px;
            height: 40px;
        }
        .search .input{
            width: 300px;
            height: 36px;
            border: 3px solid red;
            font-size: 20px;
        }
        .search .btn{
            vertical-align: top;
            height: 44px;
            width: 100px;
            margin-left: -3px;
            border: 0px solid black;
            background-color: red;
            color: white;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 6px;
        }
    </style>
</head>
<body>
<div class="search">
    <form>
        <input type="text" class="input" placeholder="书名">
        <input type="button" value="搜索" class="btn">
    </form>
</div>
</body>
</html>


课后作业


1.制作搜索框(表单样式)

2.制作个人信息( 表单)

3.制作课程表(表格)

目录
相关文章
|
SQL NoSQL 数据可视化
玩转Tablestore:使用Grafana快速展示时序数据
Grafana 是一款采用 go 语言编写的开源应用,主要用于大规模指标数据的可视化展现,是网络架构和应用分析中最流行的时序数据展示工具,可以通过将采集的数据查询然后可视化的展示,实现报警通知;Grafana拥有丰富的数据源,官方支持以下数据源:Graphite,Elasticsearch,InfluxDB,Prometheus,Cloudwatch,MySQ
1888 0
玩转Tablestore:使用Grafana快速展示时序数据
|
IDE 搜索推荐 编译器
使用esp8266使用小爱同学实现开灯与关灯操作
使用esp8266使用小爱同学实现开灯与关灯操作
412 0
|
自然语言处理 监控 语音技术
STM32 使用SYN6288语音模块
STM32 使用SYN6288语音模块
1480 0
|
4月前
|
资源调度 Kubernetes 调度
网易游戏 Flink 云原生实践
本文分享了网易游戏在Flink实时计算领域的资源管理与架构演进经验,从Yarn到K8s云原生,再到混合云的实践历程。文章详细解析了各阶段的技术挑战与解决方案,包括资源隔离、弹性伸缩、自动扩缩容及服务混部等关键能力的实现。通过混合云架构,网易游戏显著提升了资源利用率,降低了30%机器成本,小作业计算成本下降40%,并为未来性能优化、流批一体及智能运维奠定了基础。
229 9
网易游戏 Flink 云原生实践
|
机器学习/深度学习 人工智能 自然语言处理
人工智能平台PAI使用问题之如何将PAI预测结果导出
阿里云人工智能平台PAI是一个功能强大、易于使用的AI开发平台,旨在降低AI开发门槛,加速创新,助力企业和开发者高效构建、部署和管理人工智能应用。其中包含了一系列相互协同的产品与服务,共同构成一个完整的人工智能开发与应用生态系统。以下是对PAI产品使用合集的概述,涵盖数据处理、模型开发、训练加速、模型部署及管理等多个环节。
|
安全 Java 编译器
springboot @resource与private final声明式的有何区别??
【6月更文挑战第3天】在Spring Boot中,@Resource 和 private final 常用于依赖注入,但它们的用途和行为有一些重要的区别。
394 1
|
NoSQL 算法 Java
Redis入门到通关之BitMap实现签到
Redis入门到通关之BitMap实现签到
196 2
|
JavaScript Java
若依框架 --- 主表和明细表批量添加
若依框架 --- 主表和明细表批量添加
533 0
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
872 0
VUE element-ui之table表格勾选复选框动态合计某列的值