html5使用table制作表单

最新推荐文章于 2023-07-06 09:30:39 发布
最新推荐文章于 2023-07-06 09:30:39 发布
阅读量1.5k 收藏 4
点赞数 1
分类专栏： h5 文章标签： html5 tablet css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45289374/article/details/110001999
版权

效果

在这里插入图片描述
代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<!-- 1 rowspan:跨行合并单元格（竖）
     2 colspan:行内合并单元格（行）
     3 td：必须在tr内  
     4 th： 居中加粗显示文本
     5 同一行高度相同
     6 同一列宽度相同
-->

<body>
    <section>
        <table border="1" cellspacing="0" align="center" width="800px">
            <caption>
                <h2>分包工程核算单</h2>
            </caption>
            <thead>
                <!-- 合并后的第一列 -->
                <tr>
                    <th colspan="11">
                        <table width="100%">
                            <tr align="left">
                                <td width="70%"> 经营单位：</td>
                                <td> 核算时间：</td>
                                <td align="right">单位：元</td>
                            </tr>
                        </table>
                    </th>
                </tr>
                <!-- 第二行 三个单元格+一个合并两列单元格+两个三列合并为一个的单元格 -->
                <tr>
                    <th width="40px" rowspan="2">填写要求</th>
                    <th colspan="2">工程名称</th>
                    <th colspan="3">需支付款</th>
                    <th colspan="3">本次支付款</th>
                    <th width="80px" rowspan="2">领导<br>签字</th>
                    <th width="40px" rowspan="2">填写<br>要求 </th>
                </tr>
                <!-- 第三行11列  三个夸行单元格  两个合并成一列单元格  三个合并成一列单元格*2 -->
                <tr>
                    <th width="100px">主项名称</th>
                    <th width="100px">分项名称</th>
                    <th width="80px">完成</br>进度</th>
                    <th width="100px">单价</th>
                    <th width="100px">总价</th>
                    <th width="80px"> 代扣<br>税金</th>
                    <th width="80px"> 扣预<br>付款</th>
                    <th width="80px"> 实际<br>支付</th>
                </tr>
            </thead>
            <!-- 第四行11列  三个单元格夸四列 八个四列空单元格 -->
            <tbody>
                <tr>
                    <th height="40px" width="40px" rowspan="4">涂改作废</th>
                    <th width="100px" rowspan="4"></th>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <th height="80px" width="80px" rowspan="4">无效<br>作废</th>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <!-- 第五行  两个跨两行两列单元格 七个单行单列单元格  -->
                <tr>
                    <th width="120px" colspan="2" rowspan="2">合计</th>
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>

                    <td width="80px" rowspan="2" colspan="2"></td>
                </tr>
                <!-- 一个单行单列单元格  两个夸三行单元格-->
                <tr>
                    <td>其中</td>
                    <td colspan="3">现金</td>
                    <td colspan="3">转账</td>
                </tr>
            </tbody>
            <!-- 和第一步一样 -->
            <tfoot>
                <tr>
                    <th colspan="11">
                        <table width="100%">
                            <tr align="left">
                                <td width="50%"> 领导签字：</td>
                                <td>经办人：</td>
                                <td>审核人：</td>
                            </tr>
                        </table>
                    </th>
                </tr>
            </tfoot>

        </table>
    </section>
</body>

</html>
少女总裁、
关注
专栏目录
学习笔记之HTML5-设计表格
feng_en_t的博客
12-26 698
1. 表格结构 表格所用到的标签汇总 ① &lt;table&gt;：定义表格。在&lt;table&gt;标签内部，可以放置表格的标题、行、列、单元以及其他的表格。 ② &lt;caption&gt;：定义一个表格标题。&lt;caption&gt;标签必须紧随&lt;table&gt;标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 ③ &lt;colgroup&...
HTML中用table标签做表单,【html】02--使用table表格标签
weixin_35910783的博客
06-28 1384
文章导读：我们做表格使用table标签来承载1、其中table标签中的属性tr(table row)：表示行td: 表示列border 表示边框，表示一个像素cellpadding 表示单元格边距cellspacing 表示单元格间距2、优化代码，建立代码结构-------优化一下，一般我们正常的是情况是，头部不会修改，修改的是身体部分，所以用到下面俩，更方便thead:表示列表的头tbody：表...
HTML5-表格table
weixin_55062570的博客
01-06 1596
很多人说，表格已经过时了，当然比起很流行的div布局相比，table的使用频率确实很少，但是在一些特定的场景下，用表格来进行装填，是很方便的，会极大减少我们的代码量 table标签和我们div，p,h等标签一样，自定义是看不见边框的 如果我们想要看见它可以利用css样式来给它定义 我们来看一看我们的表格吧 语法 <table> <tr> <td>姓名</td> &...
uniapp 小程序 H5 移动端 写 table 表格 组件
来了波，兄嘚
07-21 3079
uniapp 写table
h5页面编写原生table表格，并调整表格样式？
最新发布
SM_Cute的博客
07-06 1566
h5页面编写原生table表格，并调整表格样式？
使用table表格设计调查表
huzijia888的博客
11-17 540
#table1{ } #table1{ background-color:#B0C4DE; } .td1{ border-top:1px solid; border-right:1px solid; text-align:right; } .td2{ width:500px; border-top:1px solid; }
HTML的dl、dt、dd标记制作表格对决Table制作表
12-08
与传统的`<table>`标签相比，它们在某些场景下可以提供更语义化的解决方案，尤其是在创建小型数据列表或表单时。 在传统的`<table>`标签中，创建数据列表需要包含`<tr>`（表格行）和`<td>`（表格数据单元格）标签。...
html制作table表单大小
05-12
可以通过CSS来设置table表单的大小，具体方法如下： 1. 设置表格宽度 可以使用CSS属性width来设置表格的宽度，例如： ```css table { width: 100%; } ``` 这样可以让表格的宽度充满整个容器。 2. 设置单元格...
HTML表单滚动文本框,table表格，form表单，select下拉列表，textarea文本域
weixin_34125314的博客
06-03 1446
表格标签table：1. 表格的作用：按照一定的格式摆放数据。2.表格的组成：表格是由一系列的单元格(矩形框)组成。按照从左到右，从上到下的顺序排列到一起组成的。3.用于创建表格的标记：用于标记一个表格的开始,用于标记一个表格的结束。一个表格中，只允许出现一对table标签。表格的标题，可以省略，表格标题必须跟在 table后面 ，tr标签前面，而且最多只能有一个。用于标记表格一行的开始，标记一...
h5 表单
weixin_42595284的博客
09-03 1368
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; fieldset{ width: 50
H5自适应登录和注册表单
03-27
H5编写的登录和注册表单，带验证、页面能切换，页面自适应
table制作表表格应用
qq_40945903的博客
11-09 195
Document
html中利用table标签来制作表格
zhansan的博客
01-04 1094
table.html 日 月 火 水 木 金 土 日 月 火 水 木 金 土 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
table表单的制作
weixin_44540285的博客
02-22 1373
开发工具与关键技术：DW与CSS 作者：刘华叶 撰写时间：2019年2月10日 表单是我们经常用到的，里面会应用到一些知识点，下面就和大家分享一下。 首先设置属性定义表格，在定义表格标题，然后在定义表格的页眉，在定义表格的行和单元，在定义表格主体，这些表格属性就定义完了。 最后在设置CSS属性，首先给表格设置边框和上边距，下面也是一样，在设置个文字居中就可以了。 表格到这里就完成了。 ...
十个最简单实用的Table设计模板
雾塔晨钟
12-31 844
  表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说， 标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。   准备 想必大家都知道 xhtml 1.0...
table 元素使用案例（设置工单表格）
侯春强的博客
09-07 559
代码： 项目增补单 span { float: left; margin-right: 160px; } 项目增补单 序号 维持项目及更换配件 单价 数量 小价
html5 表格 在线生成图片格式,2020-05-28HTML表格基本格式
weixin_42584758的博客
06-02 294
表格的格式1.table表格 tr行 td列 th表头2.表格加边框border“1px”cellspacing单元格间距=“0”消除默认边距cellpadding=“5px”单元格填充 单元内容与边框的距离3.height=“40px”行高width列宽=“120px”给td设置宽度 对于同一列的单元格，最终宽度取决于最宽的单元格，行高同样。4.bgcolor背景颜色，可以给单元格和行列设置。5...
Vue+Element 实现订单列表【管理端】02
不同场景下的水平居中
01-28 2775
效果图： 代码实现： <template> <div class="merchantOrderManage"> <el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName" :header-cell-style="isCenter">
Laravel学习- 订单表-商品表-创建订单-事务的处理
TO_Web的博客
10-15 963
创建商品表goods $table->bigIncrements('id'); $table->integer('user_id', false)->comment('创建者id'); $table->integer('category_id', false)->comment('分类id'); $table->string('title',200)->comment('商品标题'); $table->integer('price', false)-&gt
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值