【4001】通过html做一个静态页面的表格表单，嘿嘿。

已于 2022-08-16 20:07:47 修改
阅读量1.4k 收藏 6
点赞数 2
分类专栏： 表单表格 文章标签： html 前端 ui
于 2022-08-03 11:06:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Caojian_0/article/details/126133684
版权

学习目标：

  • [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识，梳理今天的学习知识点；
  • [ 2]通过已学知识做静态页面表格表单完成效果，效果图如下：

在这里插入图片描述

在这里插入图片描述
表单不加颜色是这样的，自己看着设计：嘿嘿！

Document
姓名入职企业入职时间技术方向试用期转正
王月东方文化出版社2013-03-06UI设计师42005800
刘文玉东方文化咔咔出版社2013-03-06BENET设计师60008000
吕方德莱联盟2013-03-06网络营销师45005600
杨亚上海白林广告公司2013-03-06java工程师35004500
刘文玉东方文化出版社2013-03-06BENET设计师60008000
吕方北大研究所2013-03-06网络营销师45005600
杨亚上海白林广告公司2013-03-06java工程师35004500
刘文玉东方文化出版社2013-03-06BENET设计师60008000
吕方哈哈研究所2013-03-06网络营销师45005600
---

知识点学习：

设计表单表格需要的了解的知识点：

10.表格表单作用：主要用于显示、展示数据，因为它可以让**数据显示**的非常的规整，可读性非常好！
 **11.1表格的语法：**
         <table>
            <tr>
                <td>单元格内的文字</td>
                <td>单元格内的文字</td>
            </tr>
        </table>
        1.<table> </table> 是用于定义表格的标签。
        2.<tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
        3.<td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
        4.字母 td 指表格数据（table data），即数据单元格的内容。
**11.2表单语法：**
         <table>
            <tr>
                <th>元格内的文字</th>
                <th>元格内的文字</th>
            </tr>
        </table>
        1.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
            <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
        2.一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示.
            <th> 标签表示 HTML 表格的表头部分(table head 的缩写)
 注意表头单元格也是单元格，常用于表格第一行突出重要性，表头单元格里面的文字会加粗居中；
 （公司任务做打印表格用得到，会和css结合一起实现）
 **11.3表单表格规范化格式：**
    1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
    2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
    3.  以上标签都是放在 <table></table> 标签中。
**11.4合并单元格语法：**
跨行合并：rowspan="合并单元格的个数"
   
​	最上侧单元格为目标单元格, 写合并代码

 跨列合并：colspan="合并单元格的个数"

​	最左侧单元格为目标单元格, 写合并代码
比如：<td colspan=“1”></td>。删除多余的单元格=跨列合并单元格
 **11.4表单表格规范化格式：**
    1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
    2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
    3.  以上标签都是放在 <table></table> 标签中。

**12.温馨提示：**
表格的相关标签：
​	table   thead  body  tr  th  td 
表格的相关属性：
​	cellspacing    cellpadding     width  height  border 
合并单元格：
​	  rowspan   collspan
表格浏览器中对齐 ：align   

嘿嘿.1表单表格简介（总）：
表格标签：<table></table> ：大盒子
             <th>表头的标签：作用是加粗字体
             <tr></tr>:定位表格行的标签
             <td></td>(table data):定义表格中的单元格，必须嵌套在<tr></tr>
             <th>表头的标签：作用是加粗字体
嘿嘿.2表格属性：align:left,ceter,right:表格对齐方式
              Border:1或””:规定表格单元是否拥有边框，默认””,没有边框
              Cellpadding：像素值：单元格与内容之间的距离，默认为1
              Cellspacing：像素值：单元格与单元格之间的空白，默认为1
              width：像素值或百分比：表格宽度
              Height: 像素值或百分比：表格高度
嘿嘿.3表格结构标签：
             <thead>：表格的头部区域
             <tbody>:表格的主题区域
嘿嘿.4合并单元格：跨行合并：rowspan=”合并单元格的个数”
               跨列合并：colspan=”合并单元格的个数”
               **合并单元格方式：**

在我正式开始代码之前写一个测试代码（附有代码）：
思路做法：
1.第一行里面是 th 表头单元格
2.第二行开始里面是 td 普通单元格单元格里面可以放任何元素

后书写表格属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <table border="1" width="500px" height="350px " cellspacing="0"  >
        <tr>
            <td></td>
            <td ></td>
            <td></td>
            <td ></td>
           
        </tr>
        <tr >
            <td ></td>
            <td ></td>
            <td></td>
            <td></td>
        </tr>
    </tr>
</body>
</html>

具体代码如下：

1.表单代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;

        }

        tr,/* css的内容，为了让格子看起来更大，更好看，设计tr, td的大小,当然你也可以不适用css，直接写在tr，td标签里：例如：<tr style="width: 30px; height: 30px;"></tr>,但如果每个你都写就很麻烦了，嘿嘿*/
        td {
            width: 30px;
            height: 30px;
            border: solid 0.5px #000;
            border-collapse: collapse;/*合并单元格重叠*/
        }
    </style>
</head>

<body>
    <h1 align="center">武隆区中小微企业贷款贴息项目申请表</h1>
    <table width="500px" height="350px " cellspacing="1" align="center">
        <tr>
            <td>统一社会信用代码</td>
            <td colspan="2"></td>
            <td>企业所在地</td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td>法人代表</td>
            <td></td>
            <td>联系方式</td>
            <td></td>
            <td>上年年度业收入（）元</td>
            <td></td>
        </tr>
        </tr>
        <tr>
            <td colspan="2">上年度实交税金(万元)</td>
            <td></td>
            <td colspan="2">企业缴纳社保人数</td>
            <td></td>
        </tr>
        <!--4-->
        <tr>
            <td>贷款所用项目名称</td>
            <td colspan="2"></td>
            <td>申请贴息金额（万元）</td>
            <td colspan="2"></td>

        </tr>
        <tr>
            <td rowspan="3">贷款银行名称</td>
            <td></td>
            <td rowspan="3">贷款金额</td>
            <td></td>
            <td rowspan="3">已支付金额</td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2">银行开户许可证信息</td>
            <td colspan="2" align="center">账单名称</td>
            <td align="center">开户行</td>
            <td colspan="2" align="center">账号</td>

        </tr>
        <tr>
            <td colspan="2"></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
        <tr>
            <td colspan="3">是否列入国家信用系统严重失信企业名单和重大税收违法案件信息公布名单</td>
            <td colspan="3"></td>
        </tr>
    </table>
    <br />
    <br />
    <p align="right">:申报企业名称（盖章）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    <!-- &nbsp;空格的意思 >


</body>

</html>

2.表格代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th {
            height: "50";
            text-align: center;/*文本居中，也可以在标签中直接写，例如：<table align="center"></table>*/
        }

        tr,
        td {
            height: "30";
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- border=1""-->
    <table align="center" cellpadding="2" cellspacing="1" width="900">
        <thead>
            <tr>
                <th style="background-color:rgb(67, 242, 67);">姓名</th>
                <th style="background-color: red;">入职企业</th>
                <th style="background-color:purple">入职时间</th>
                <th style="background-color:blue">技术方向</th>
                <th style="background-color:yellow">试用期</th>
                <th style="background-color:orange">转正</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王月</td>
                <td>东方文化出版社</td>
                <td>2013-03-06</td>
                <td>UI设计师</td>
                <td>4200</td>
                <td>5800</td>
            </tr>
            <tr style="background-color: rgb(213, 205, 205);">
                <td>刘文玉</td>
                <td>东方文化咔咔出版社</td>
                <td>2013-03-06</td>
                <td>BENET设计师</td>
                <td>6000</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>吕方</td>
                <td>德莱联盟</td>
                <td>2013-03-06</td>
                <td>网络营销师</td>
                <td>4500</td>
                <td>5600</td>
            </tr>
            <tr style="background-color:rgb(213, 205, 205);">
                <td>杨亚</td>
                <td>上海白林广告公司</td>
                <td>2013-03-06</td>
                <td>java工程师</td>
                <td>3500</td>
                <td>4500</td>
            </tr>
            <tr>
                <td>刘文玉</td>
                <td>东方文化出版社</td>
                <td>2013-03-06</td>
                <td>BENET设计师</td>
                <td>6000</td>
                <td>8000</td>
            </tr>
            <tr style="background-color: rgb(213, 205, 205);">
                <td>吕方</td>
                <td>北大研究所</td>
                <td>2013-03-06</td>
                <td>网络营销师</td>
                <td>4500</td>
                <td>5600</td>
            </tr>
            <tr>
                <td>杨亚</td>
                <td>上海白林广告公司</td>
                <td>2013-03-06</td>
                <td>java工程师</td>
                <td>3500</td>
                <td>4500</td>
            </tr>
            <tr style="background-color: rgb(213, 205, 205);">
                <td>刘文玉</td>
                <td>东方文化出版社</td>
                <td>2013-03-06</td>
                <td>BENET设计师</td>
                <td>6000</td>
                <td>8000</td>
            </tr>
            <tr>
                <td>吕方</td>
                <td>哈哈研究所</td>
                <td>2013-03-06</td>
                <td>网络营销师</td>
                <td>4500</td>
                <td>5600</td>
            </tr>
        </tbody>
    </table>

</body>
</body>

</html>
快乐的数据库
关注
专栏目录
01.第一个html文件.html
ablmnuk的博客
06-29 1万+
HTML , 一、HTML 简介 1.HTML是什么 HTML : Hyper Text Markup Language超文本标记（标签）语言 各种标签组成 ，用来制作网页 ，告知浏览器该如何显示页面 2.作用 制作网页 ，控制网页和内容的显示 插入图片 、音乐 、视频 、动画等多媒体 通过链接检索信息 使用表单获取用户的数据 ，实现交互 3.版本 W3C : World Wide Web Consortium互联网联盟 ，制定web技术的相关标准和规范的组织 ，HTML就是由W3C制定的标准 有两个版
html案例
ho622的博客
03-10 249
DAY1的案例 案例1 01.第一个HTML文件.html <html> <head> <title>第一个HTML文件</title> <meta charset="utf-8"> </head> <body> 欢迎学习HTML </body> </html> [外链图...
html静态网页（导航条、表格、表单、音视频插入、照片框等）
03-29
该静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页，代码很基础，非常适合初学者。该静态网页包括主页、表单、表格、导航条、圆角、音视频、动态图片等子页
HTML静态网页中的表格table
xiahang1121的博客
05-04 6021
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> <table border="10px" width="800px" cellpadding="2px" cellspacing="2" >cellpaddi...
前端入门：静态网页内不规则表格的编写
最新发布
全栈学习ing
08-27 502
对于这种表格的编写，在没有深入学习前端的基础下，想通过行内样式，内部和外部样式的编写达到这种效果是较为困难的。作为在内部样式中插入的。
HTML网页表格标签,HTML静态网页（标签、表格）
weixin_31222161的博客
06-16 392
HTML静态网页： 打开DREAMWEAVER，新建HTML，如下图： body的属性： bgcolor 页面背景色 background 背景壁纸、图片 text 文字颜色 topmargin 上边距 leftmargin 左边距 rightmargin 右边距 bottommargin 下边距 body属性用法示例： font color="" face="" sHTML静态网页：打开DREA...
html表格设置静态数据,构建静态页面 之 [ 表格 ]
weixin_35391606的博客
06-04 603
表格描述以网格的形式来呈现数据，并且以二维数据表(有行有列)来显示数据内容表格元素元素 - 表示定义表格元素 - 表示定义表格中的行元素 - 表示定义表格中的表头元素 - 表示定义表格中的单元格元素 - 表示定义表格中的标题元素 - 表示定义表格的页眉元素 - 表示定义表格的主体元素 - 表示表格的页脚表格元素元素属性border属性表示设置表格的边框属性值为数字值会同时设置表格和单元格rowsp...
HTML静态网页：表格、表单
weixin_30273175的博客
12-03 987
一、表格table table的属性 width 宽度，可以用百分比或者像素，像素常用960 border 边框，常用值是0 cellpadding 表格内容与单元格边框的边距，常用值0 cellspacing 单元格之间的间距，常用值0 align 单元格里面内容的对齐方式 bgcolor 背景色 background 背...
HTML5笔记+案例
sumuqi的博客
06-29 3188
HTML 一 . html简介 1.HTML是什么？ HTML:hyper text makrup language超文本标记（标签）语言由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 通过链接来检查信息 使用表单获取用户数据，实现交互 3.版本 W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准 两个版本：HTML 4.0.1、
一.HTML简介
weixin_46377209的博客
02-28 2514
一.HTML简介 1.HTML是什么？ HTML:hyper text markup language超文本标记（标签）语言 由各种标签组成，用来制作网页，告诉浏览器该如何显示页面 2.作用 制作网页，控制网页和内容的显示 插入图片、音乐、视频、动画等多媒体 phs 通过链接来检索信息 使用表单获取用户的信息，实现交互 graphs 3.版本 W3C:world wide web consor...
html全部实例
wangqazwsxedc的博客
03-22 958
1.欢迎来到html <meta charset="UTF-8"> <title>HTML学习</title> welcome to html! ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200322123310612.png?x-oss-process=image/watermark,type...
用 HTML 做一个表单模板
01-20
目录HTML1. 模板案例2. 常用标签a. 标题 hnb. 水平线 hrc. 段落 br p alignd. 超链接 a hrefe. 图片 img src width height altf. 列表 ul ol lig. 容器标签 div spanh. 实体字符   &emsp & × ¥ $i. 基本表格 table caption tr th td border cellspacing cellpadding bgcolorj. 表格合并 td colspan rowspan3. HTML 表单a. 表单控件 action method name value type select
用html代码制作一个表单页面,HTML网页表单制作详细讲解
weixin_39747975的博客
06-04 5600
表单是一个网站和访问者开展互动的窗口，我们现在就给大家介绍一下表单的一些基本知识和表单美化方法。初识表单表单可以用来在网页中发送数据，特别是经常被用在联系表单-用户输入信息然后发送到Email中。表单本身是没有什么用的。这需要编一个程序来处理输入表单中的数据。这也超出了本站指南的范围。如果使用网络服务器来放置HTML，你能够自助地找到一些简单的教程，开发一个服务器端的程序使一个发送到Email的表...
HTML—表单页面制作
YWQ13447969的博客
04-19 1376
大学生HTML练习之表单页面制作
使用html表单制作简单网页（加表单详细知识点）
weixin_54107527的博客
04-01 4408
表单也是html非常重要的一块，常用于输入信息，进行信息的收集和提交 属性： action：信息提交地址 method：提交方式 get 信息拼接在地址中，不安全 post 信息打包发送，安全 select：下拉菜单 option：下拉菜单中的选项 textarea：多行文本域 可以加样式resize：none取消调整大小 input： 标签<input type=" " name=" ...
使用HTML创建表单
weixin_65905274的博客
03-18 2286
<form></form>标记被用于定义表单域，即创建一个表单。action、method、name为表单标记<form>的常用属性。 action属性用于指定接收并处理表单数据的服务程序的。 method属性用于设置表单数据的提交方式，其取值为get或post。 name属性用于指定表单的名称，以区分一个页面中的多个表单。 autocomplete属性用于指定是否自动完成功能。“自动完成”是指表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个
HTML表单制作
jxcklfn的博客
05-25 2285
为什么写表单？（目的是为了收集用户信息） 表单的组成：表单域、表单控件（也称表单元素）和提示信息3个部分构成。 在HTML中，<form>标签用于定义表单域，以实现用户信息的收集和传递 <form>会把它范围内的表单元素信息提交给服务器 <form action=''url地址'' methid=''提交方式'' name=''表单域名称''> 各种表单元素的控件 </form> input输入表单元素 <input>标签.
html制作表单
guosq124的博客
07-31 418
主要是为了了解<form>里面的子元素<input>、<textarea>、<select>。 <input>里面的子元素有：type、name、value、placeholder、checked； <select>里面的子元素有：option <!DOCTYPE html> <html lang="...
2020年Web前端工程师需要掌握的10款H5开发工具推荐
weixin_43703144的博客
12-01 897
正所谓“工欲善其事必先利其器”，一名合格的Web前端开发工程师自然会用到不少能使其工作高效的工具。下面，就给大家分享Web前端开发需要掌握的10款H5开发工具！ 1、Lungo Lungo是一款基于HTML5的开发框架，专为想要设计、构建和共享跨设备应用的开发者而准备。支持开放的Web标准，如HTML5、CSS3和JavaScript；支持手机、电视以及桌面设备。拥有强大的JavaScript API：开发WebAPP应用有很多种方式，而不是一味的优化。Lungo提供了一个强大的API，这样你可以完全掌控自
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值