财务报表页HTML结构应以语义化表格为核心,含thead/th、tbody/td、日期data属性、金额右对齐与正负标识、income/expense类、筛选form+select、响应式卡片布局及caption/tfoot/data属性扩展位。
财务报表页的HTML结构设计,核心是让收支明细可读、可筛、可访问、可导出。不是堆样式,而是用语义和层级把“谁在什么时候做了什么、花了多少、还剩多少”一次性说清楚。
htmlppt.skill
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件(幻灯片风格)。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本,并且希望生成演示用的 HTML 时触发。支持任意内容来源:iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区,并通过企微直接发送给用户。触发词示例:帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
下载
收支明细用
做主干,不绕弯
别用div模拟表格。浏览器和屏幕阅读器靠
识别行列关系,Excel导出也依赖它。结构必须包含:
里放表头行,每列用,比如“日期”“摘要”“类型”“金额”“余额”
放所有明细行,每行中用填充数据
日期字段必须带2024-05-20 属性,方便排序与程序解析
金额列统一右对齐,负数前置符号(如-¥120.00 ),不依赖颜色区分收支
支出行加class="expense",收入行加class="income",CSS中分别控制颜色与图标
筛选功能放在表格上方,用原生+
筛选不是装饰,要轻量、可用、无障碍:
用实现时间范围筛选,选项值为"this-month"、"last-quarter"等语义化字符串
用筛选收支类型,选项含“工资”“餐饮”“交通”等业务词,避免纯数字编码
筛选按钮用刷新,不依赖JS也能提交表单;若需无刷新,再用fetch增强
所有和外层包
响应式布局:桌面保持表格,手机转为垂直卡片
小屏不是缩小字体,而是重构信息流:
立即学习 “前端免费学习笔记(深入) ”;
桌面端用@media不干预结构,仅微调边框、内边距和字体大小
移动端(max-width: 480px)用CSS将转为块级堆叠:tr设display:block,td设display:block,再用:before伪元素注入标签名(如“日期:”“金额:”)
“余额”列在移动端display: none,但保留在HTML中,供辅助技术读取
每条明细用包裹,内部用
、等语义类,便于JS操作或后续扩展
结构上预留扩展位,不硬编码业务逻辑
财务页常需叠加功能,结构得留缝:
写明报表名称与统计周期,如“2024年5月收支明细(截至2024-05-31)”
预留合计行位置,内容由后端或JS注入,避免前端计算误差
每行添加data-id、data-timestamp等属性,方便筛选、排序、导出时精准定位
不把“微信转账”“支付宝收款”等渠道名写死在HTML里,而用data-channel="wechat"等属性标记,样式与行为解耦