Web前端表格制作

已于 2024-02-29 14:00:53 修改
阅读量1.3k 收藏 25
点赞数 28
文章标签： 前端
于 2023-12-10 19:56:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62448081/article/details/134913374
版权

目标样式

代码：

仅使用tr和td做法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>作业</title>
        <style>
            table{
                border-width: 100%;
                border-collapse: collapse;
                border-spacing: 0;
                margin: 0%;
                padding: 0%;
            }
        </style>
    </head>
    <body>
        <h1>工商银行电子汇款单</h1>
        <table border="1" cellspacing='0'>
                <tr>
                    <td colspan="2"><b>回单类型</b></td>
                    <td width='300'>网上转款汇款</td>
                    <td colspan="2"><b>指令序号</b></td>
                    <td width='300'>HQH0000000000000013878172</td>
                </tr>
                <tr>
                    <td rowspan="4" width='25'><b>收款人</b></td>
                    <td width='40'>户名</td>
                    <td width='300'>老牟</td>
                    <td rowspan="4" width='25'><b>付款人</b></td>
                    <td width='40'>户名</td>
                    <td width='300'>老刘</td>
                </tr>
                <tr>
                    <td width='40'><b>卡号</b></td>
                    <td width='300'>000000000001</td>
                    <td width='40'><b>卡号</b></td>
                    <td width='300'>000000000002</td>
                </tr>
                <tr>
                    <td width='40'>地区</td>
                    <td width='300'>南京</td>
                    <td>地区</td>
                    <td width='300'>杭州</td>
                </tr>
                <tr>
                    <td width='40'><b>网点</b></td>
                    <td width='300'>工商江苏南京业务处理中心</td>
                    <td><b>网点</b></td>
                    <td width='300'>江苏徐州业务中心</td>
                <tr>
                    <td colspan="2"><b>币种</b></td>
                    <td>人名币</td>
                    <td colspan="2"><b>钞汇标志</b></td>
                    <td>钞票</td>
                </tr>
                <tr>
                    <td colspan="2"><b>金额</b></td>
                    <td>1.00元</td>
                    <td colspan="2"><b>手续费</b></td>
                    <td>0.57元</td>
                </tr>
                <tr>
                    <td colspan="2"><b>合计</b></td>
                    <td colspan="4">人名币（大写）：壹圆整</td>
                </tr>
                <tr>
                    <td colspan="2"><b>交易时间</b></td>
                    <td>2017年6月1日</td>
                    <td colspan="2"><b>时间戳</b></td>
                    <td>2017-06-01-13.00.00，00000</td>
                </tr>
        </table>
        <p>票据打印时间：2017-06-0115.00.12</p>
        <p><del>票据打印单位：江苏徐州业务中心</del></p>
        <p>操作员：大曾</p>
    </body>
</html>

使用table嵌套做法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>作业</title>
        <style>
            table{
                border-collapse: collapse;
            }
        </style>
    </head>
    <body>
        <h1>工商银行电子汇款单</h1>
        <table border="1">
            <thead>
                <tr>
                    <td><b>回单类型</b></td>
                    <td width='300'>网上转款汇款</td>
                    <td><b>指令序号</b></td>
                    <td width='300'>HQH0000000000000013878172</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">
                    <table border=1 cellspacing='0'>
                    <tr>
                        <td rowspan="5" width='20'><b>收款人</b></td>
                    </tr>
                    <tr>
                        <td width='40'>户名</td>
                        <td width='300'>老牟</td>
                    </tr>
                    <tr>
                        <td><b>卡号</b></td>
                        <td width='300'>000000000001</td>
                    </tr>
                    <tr>
                        <td>地区</td>
                        <td width='300'>南京</td>
                    </tr>
                    <tr>
                        <td><b>网点</b></td>
                        <td width='300'>工商江苏南京业务处理中心</td>
                    </tr>
                    </table>
                    </td>
                    <td colspan="2">
                        <table border=1  cellspacing='0'>
                        <tr>
                            <td rowspan="5" width='20'><b>付款人</b></td>
                        </tr>
                        <tr>
                            <td width='40'>户名</td>
                            <td width='300'>老刘</td>
                        </tr>
                        <tr>
                            <td><b>卡号</b></td>
                            <td width='300'>000000000002</td>
                        </tr>
                        <tr>
                            <td>地区</td>
                            <td width='300'>杭州</td>
                        </tr>
                        <tr>
                            <td><b>网点</b></td>
                            <td width='300'>江苏徐州业务中心</td>
                        </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td><b>币种</b></td>
                    <td>人名币</td>
                    <td><b>钞汇标志</b></td>
                    <td>钞票</td>
                </tr>
                <tr>
                    <td><b>金额</b></td>
                    <td>1.00元</td>
                    <td><b>手续费</b></td>
                    <td>0.57元</td>
                </tr>
                <tr>
                    <td><b>合计</b></td>
                    <td colspan="3">人名币（大写）：壹圆整</td>
                </tr>
                <tr>
                    <td><b>交易时间</b></td>
                    <td>2017年6月1日</td>
                    <td><b>时间戳</b></td>
                    <td>2017-06-01-13.00.00，00000</td>
                </tr>
            </tbody>
        </table>
        <p>票据打印时间：2017-06-0115.00.12</p>
        <p><del>票据打印单位：江苏徐州业务中心</del></p>
        <p>操作员：大曾</p>
    </body>
</html>

运行结果：

寻959
关注
  • 28
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
servlet中生成提供下载的excel文档的例程和说明
11-02 1761
相信大家会经常遇到需要在web页面上给用户生成excel报表的情况。我刚好在最近的工作中遇到了，下面是一个使用jxl包（一个开源的包）的实例。  //servlet中生成提供下载的excel文档的例程，这里用的是jxl包，当然也可以用apache的poi包试试。    public void doPost(HttpServletRequest request,HttpServletResponse
前端开发简历表格模板
07-24
6. **荣誉与证书**：如果有任何前端开发相关的奖项、认证（如谷歌开发者认证、MDN Web开发证书等）或在线课程的学习成果，可以在这里列出。 7. **自我评价**：简短地总结自己的优点、特点和对未来的规划，展示自己...
web登录表格制作
2301_80177550的博客
12-16 439
自己可以参考上面代码，尝试着练习完成，如下界面。
Web版Excel制作过程分享
weixin_30621711的博客
12-17 524
由于项目需要制作一个Web版本Excel用于表单、报表在线绘制，网上搜了一圈没有找到合适的资源，根据搜到的一些零散信息决定自己动手做一个，本文分享这个制作过程，主要包含表格布局、表头固定、动态调整行高列宽、单元格选中、合并与拆分单元格等功能，供大家交流分享。废话少说先上个效果图如下： 一、技术选型 1. 本例基于Jquery库和Vue框架实现，其中Vue并不是必须，仅仅因为项目需要而...
Web前端——表格及课表实例
EWQOR的博客
02-19 1092
table元素及课表实例
web前端表格制作
2301_80177550的博客
12-11 386
1.电子汇款单的制作2.源代码及效果展示​​​​​。
web前端表格实现
wangleihubin的博客
12-10 904
回单类型</b></td><td colspan="2"><b>指令序号</b></td><td colspan="2"><b>手续费</b></td><td colspan="2"><b>时间戳</b></td><td colspan="2"><b>币种</b></td><td colspan="2"><b>金额</b></td><td colspan="2"><b>合计</b></td><tr><td><b>卡号江苏徐州业务中心
web前端创建表格
qq_40301211的博客
02-18 5860
1.1创建表格  &lt;table&gt;        &lt;tr&gt;          &lt;td&gt;&lt;单元格&lt;/td&gt;          &lt;td&gt;&lt;单元格&lt;/td&gt;          &lt;td&gt;&lt;单元格&lt;/td&gt;        &lt;/tr&gt
Web前端html表格制作
weixin_45742613的博客
11-16 3478
html表格制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <
web前端基础知识:表格
m0_62181310的博客
03-31 3788
一.表格 1.表格的基本标签 标签组成: table 表格整体 tr 行 td 单元格 嵌套关系:tabel>tr>td 2.表格的相关属性 border 边框粗细 width 宽度 height 高度 cellspacing 单元格与单元格之间的距离 cellpadding 单元格内容距离边框的距离 <table border="1" width="500".
Web前端之表格
花&败
10-29 5631
同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格在table中使用tr表示表格中的一行，有几个tr就有几行在tr中使用td表示一个单元格，有几个td就有几个单元格rowspancolspan。
前端教程：10 简单表格制作
08-30
千锋Web前端教程_10_简单表格制作
Web前端开发技术-综合案例（制作年历）.pptx
07-07
在Web前端开发中，制作一个年历是一个典型的综合实践项目，它涵盖了JavaScript语言的基础知识以及HTML和CSS的布局技巧。以下是对这个综合案例的详细解释： 1. **用户交互**： - 利用`prompt()`函数：在浏览器环境...
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
纯前端实现的webExcel
05-07
在IT行业中，Web应用程序的发展日新月异，其中“纯前端实现的webExcel”是一种创新技术，它允许用户在浏览器中直接操作Excel表格，而无需借助后端服务器或安装额外软件。这种技术大大提升了用户体验，使得数据处理变...
Node多版本管理器NVM安装使用
最新发布
GongWeiBuQi的博客
07-11 174
安装node很方便，只需要一条命令可以轻松切换node版本可以多版本node并存。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 736
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Javafx利用fxml变换场景的小细节
2301_80311013的博客
07-09 854
在这个代码中，在JavaFX中，FXMLLoader是用来加载FXML文件并将其转换为Java对象（例如控制器类）的工具。当您使用FXMLLoaderFXMLLoader在整个过程中，FXMLLoader是使用JavaFX的后台线程（也称为JavaFX线程）来执行这些操作的，这是为了保持UI线程的响应性。这意味着在用户界面（UI）线程中，您不会看到任何阻塞，即使FXMLLoader正在执行耗时的操作。当FXMLLoader完成加载并调用load()方法时，它会返回一个Parent。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 1008
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
web前端实现制作课程表
06-09
// 遍历数据，将课程信息填充到表格中 courses.forEach(course => { for (let i = course.start; i ; i++) { const cellId = `${course.day}-${i}`; const cell = document.getElementById(cellId); cell....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值