【4001】通过html做一个静态页面的表格表单，嘿嘿。
2024-05-11 02:47:52
学习目标：
- [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识，梳理今天的学习知识点；
- [ 2]通过已学知识做静态页面表格表单完成效果，效果图如下：
表单不加颜色是这样的，自己看着设计：嘿嘿！
Document
| 姓名 | 入职企业 | 入职时间 | 技术方向 | 试用期 | 转正 |
|---|---|---|---|---|---|
| 王月 | 东方文化出版社 | 2013-03-06 | UI设计师 | 4200 | 5800 |
| 刘文玉 | 东方文化咔咔出版社 | 2013-03-06 | BENET设计师 | 6000 | 8000 |
| 吕方 | 德莱联盟 | 2013-03-06 | 网络营销师 | 4500 | 5600 |
| 杨亚 | 上海白林广告公司 | 2013-03-06 | java工程师 | 3500 | 4500 |
| 刘文玉 | 东方文化出版社 | 2013-03-06 | BENET设计师 | 6000 | 8000 |
| 吕方 | 北大研究所 | 2013-03-06 | 网络营销师 | 4500 | 5600 |
| 杨亚 | 上海白林广告公司 | 2013-03-06 | java工程师 | 3500 | 4500 |
| 刘文玉 | 东方文化出版社 | 2013-03-06 | BENET设计师 | 6000 | 8000 |
| 吕方 | 哈哈研究所 | 2013-03-06 | 网络营销师 | 4500 | 5600 |
---
知识点学习：
设计表单表格需要的了解的知识点：
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：像素值：单元格与内容之间的距离，默认为1Cellspacing：像素值：单元格与单元格之间的空白，默认为1width：像素值或百分比：表格宽度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">:申报企业名称（盖章） </p><!-- 空格的意思 ></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>
【4001】通过html做一个静态页面的表格表单，嘿嘿。相关推荐
- html页面中写密码修改,html输入密码进入页面 html做一个静态的输入密码跳转页...
如何对一个HTML页面设置密码输入? 我有一个页面,不想给其他人看到,只想给我朋友看. 加个什么代码能让我朋新建index.html页面. 写入HTML文件,任何一个网页式的文件,必须要有HTML文件 ...
- 一个html5页面,html5做一个黑板报页面
html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
- html网页设计板报,html5做一个黑板报页面
html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...
- 用宝塔面板网站php变成静态,宝塔面板可以建立静态网站吗？如何部署一个静态页面？...
大多数情况下我们在服务器上安装宝塔面板后建立的博客网站大多数都是带有数据库的动态网站,如WordPress.ZBlogPHP.Typecho.emlog.Discuz!Q等,很少有建立纯静态网站.所以 ...
- 宝塔面板可以建立静态网站吗？如何部署一个静态页面？
大多数情况下我们在服务器上安装宝塔面板后建立的博客网站大多数都是带有数据库的动态网站,如WordPress.ZBlogPHP.Typecho.emlog.Discuz!Q等,很少有建立纯静态网站.所以 ...
- html期末作业代码网页设计——化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:化妆品电商网站设计--化妆品电商网站(4页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- DIV布局艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个 ...
- HTML5期末大作业：艺术品商城网站设计——艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:艺术品商城网站设计--艺购艺术品商城网页(1页) HTML+CSS+JavaScript 学生DW网页 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个 ...
- HTML+CSS静态页面网页设计作业——洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:洪江市旅游网站设计--洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司. ...
最新文章
- python3操作MySQL：insert插入数据
- 使用caffe训练faster-rcnn时遇到的问题总结
- VC++调用UpdateLayeredWindow实现半透明窗体【转】
- CIO/CTO都应该掌握和了解的EA(企业架构)
- python蟒蛇代码_011 实例2-Python蟒蛇绘制
- mysql 默认sql mode_MySQL的sql_mode模式说明及设置
- 子域名收集常用工具（Layer、subDomainsBrute、sublist3r、dnsenum）
- div 显示滚动条的CSS代码
- 为什么没人种植金丝楠木？
- Atitit 企业战略目标的艺术 目录 1. 企业战略目标 1 2. 特点 ▪ 宏观性 ▪ 长期性 ▪ 全面性 稳定性 1 3. 内容 2 3.1. 彼得·德鲁克在《管理实践》一书中提出了八个
- C#实现基于ffmpeg加虹软的人脸识别
- FusionCharts破解方法
- C++ Web编程实战
- SWUST OJ 492: The Dutch flag problem
- 蒙圣光：2018年IT行业的八大趋势
- html ico在线制作,10款免费图标生成器网页设计师
- 【STM32】中断和事件
- umi路由懒加载和权限验证（基于React）
- Show一下拿的奖杯
- 如何计算每个月有多少天