关于table标签创建不规则表格的流程

最新推荐文章于 2024-05-13 08:14:10 发布
最新推荐文章于 2024-05-13 08:14:10 发布
阅读量4.4k 收藏 15
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42283462/article/details/80526422
版权

1、<table border="1" width="1000" style = "border- text-align:margin: 0 auto;">

指定table宽度、边框、以及边框合并

2、给td加高度table tr td {height:50px}

3、接下来说明一个思路，如果第一行的标题td不添加colspan直接写了宽度为100%的话，会规定第一行只有一列，接下来的几行不管写了多少列，规定了多少宽度，都不会生效，因此这里在第一行就规定td的colspan  = "10" width = "100%"

4、接下来的每一行，如果不相同，那就按照第一行的列数，自定义列数分配给每一个格子，并且指明每一个格子的宽度，总数要与第一行相匹配。

5、如果和之前定义的格式相同，那只需要给每一个td指定与之前相同的列数colspan即可

代码如下：

<!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-Type" content="text/回头ml; charset=utf-8" />
    <title>付款申请单</title>
    <link rel="stylesheet" href="css/table.css">
</head>
<body>
<style>
    h2{
        margin:0 auto;
        text-align: center;
        width: 1000px;
    }
    table{
        border-collapse:collapse;
        text-align: center;
        margin: 0 auto;
    }
    table span{
        display: inline-block;
        width: 180px;


    }
    table tr td {
        height: 50px;
    }
    #time span{
        width: 30px;
    }
     .s1 span{
        width: 70px;
    }
</style>
<h2>付款申请单</h2>
<table border="1" width="1000">
    <tr>
        <td width="100%" colspan="10">
            <span>申请付款部门：</span>
            <span style="text-align: right">年</span>
            <span style="text-align: center">月</span>
            <span style="text-align: left">日</span>
            <span style="text-align: center">经办人：</span>
        </td>
    </tr>
    <tr>
        <td width="10%" colspan="1">收款单位</td>
        <td width="20%" colspan="2"></td>
        <td width="10%" colspan="1">账号</td>
        <td width="20%" colspan="2"></td>
        <td width="10%" colspan="1">开户银行</td>
        <td width="30%" colspan="3"></td>
    </tr>
    <tr>
        <td colspan="1">收款单位</td>
        <td colspan="2"></td>
        <td colspan="1">账号</td>
        <td colspan="2"></td>
        <td colspan="1">开户银行</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td colspan="1">付款金额</td>
        <td colspan="9">
        </td>
    </tr>


    <tr>
        <td colspan="1">收款单位</td>
        <td colspan="2"></td>
        <td colspan="1">账号</td>
        <td colspan="2"></td>
        <td colspan="1">开户银行</td>
        <td colspan="3"></td>
    </tr>
    <tr>
        <td rowspan="2" width="10%" colspan="1">审批</td>
        <td colspan="1" width="10%">总经理</td>
        <td colspan="2" width="20%"></td>
        <td colspan="1" width="10%">分管副总</td>
        <td colspan="2" width="20%"></td>
        <td colspan="1" width="10%">财务经理</td>
        <td colspan="2" width="20%"></td>
    </tr>


    <tr>
        <td colspan="1">总经理</td>
        <td colspan="2"></td>
        <td colspan="1">分管副总</td>
        <td colspan="2"></td>
        <td colspan="1">财务经理</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td colspan="1">收款单位</td>
        <td colspan="2"></td>
        <td colspan="1">账号</td>
        <td colspan="2"></td>
        <td colspan="1">开户银行</td>
        <td colspan="3"></td>
    </tr>
</table>

</body>

效果图如下：


VT柯里昂
关注
  • 5
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
不规则表格
COOLYUAN的博客
12-15 813
不规则表格
bootstrap插件_table可编辑表格_demo
05-25
Bootstrap表格的基本结构是通过HTML的`<table>`标签来创建，通常配合`<thead>`（表头）、`<tbody>`（主体内容）和`<tfoot>`（表脚）来组织数据。在可编辑表格中，我们通常会使用`<td>`（单元格）和`<th>`（表头...
不规则table
CoderHu的专栏
01-26 1227
${i.name} ${un.name } ${sub.name } ${sub.orders} value="${(sub.orders/totalSubItemOrders)*100}" maxFractionDigits="2" />%
不规则table表格th,td可编辑
最新发布
m0_65228384的博客
05-13 178
给表格中添加 :contenteditable="!isEdit" ，isEdit默认为false。如果部分单元格中不需要可输入，可以单独设置 :contenteditable="isEdit"在项目中需要类似自由报表的单元格如下。如若想要每个单元格都可输入，则如下。
使用table2excel导出不规则table
qq_38101304的博客
11-16 660
项目需要导出不规则数据，根据他的js改完后，发现table的列并未对齐， 所以想了一下，一般合并单元格有两种，一种是自身合并，一种是依据其他列合并，这两种结合使用才能让表格完美呈现，贴下代码:一个是根据自身，一个是根据前列 function mergeCells(data,fieldName,colspan,target){ //声明一个map计算相同属性值在data对象出现的次数和 var sortMap = {}; for(var i = 0 ; i < data.le
HTML5 table表格属性以及简单实例不规则表格colspan rowspan
08-02 942
<!-- border设置边框 cellspacing 设置单元格之间间距 cellpadding 设置内容和单元格间距 --> <!-- align 设置相对于上级元素位置 此实例中table上级元素为body 所以相对于整个浏览器居中 --> <table border="1" cellspacing="0" cellpadding="0" ali...
CSS表格斜线.rar
07-05
标签“JS特效-表格图层”可能意味着除了CSS之外，还可能包含JavaScript实现的表格特效。JavaScript可以用来动态改变表格的样式、添加交互性，或者创建更复杂的动画效果。例如，可以使用JavaScript监听表格的事件，当...
微信小程序表格合并demo
11-21
在这个“微信小程序表格合并demo”中，我们可以学习到如何在微信小程序中实现表格的合并功能，这对于创建数据展示或者用户交互界面来说是非常重要的。 首先，我们要了解的是`index.js`文件，这是小程序的逻辑层，它...
dbhelper table扩展
05-30
`dbhelper table扩展`可能是指对`dbhelper`进行了特定的优化和增强，使其在处理表格数据时具有更强大的功能。下面将深入探讨`dbhelper`的基本概念、其在数据库操作中的作用以及可能的扩展点。 1. **`dbhelper`基础*...
reg-form:注册和授权表格
03-20
在这个场景中，标签"SCSS"提示我们可能需要使用Sass（Syntactically Awesome Style Sheets）的预处理器语法来提升CSS的效率和可维护性。 SCSS是一种CSS预处理器，它扩展了CSS语言，增加了变量、嵌套规则、混合、...
不规则的Table选项卡
03-14
Table自作的选项卡，获取更好、更方便的选项卡。给您以跟好的帮助。试试···很棒的
table标签的不规则布局
个人网站：https://www.longzipeng.online
08-13 644
引入 利用table标签中td的rowspan合并列，colspan合并行 简单案例 aa cc bb 代码如下： <table border="1"> <tr> <td>aa</td> <td rowspan="2">cc</td> </tr> <tr>
python简单爬虫 使用pandas解析表格,不规则表格
weixin_30321449的博客
04-25 3328
url = http://www.hnu.edu.cn/xyxk/xkzy/zylb.htm 部分表格如图： 部分html代码： <table class="MsoNormalTable" style="width:353.0pt;margin-left:4.65pt;border-collapse:collapse;border:none; mso-bord...
HTML快速入门5——不规则表格、表格背景、边框颜色
热门推荐
雨中怡然
03-24 2万+
不规则表格例子： 1,11,21,3 colspan=2>2,1 2,22,3 显示： 1,1 1,2 1,3 2,1 2,2 2,3
html 不规则table表格
木子小姐
08-10 6489
table table{ border-collapse: collapse; } 11 13 21 22 32
使用vue和element-ui开发，如何实现一个看起来像不规则表格的效果
coinisi_li的博客
06-29 1187
组件是用来展示描述性的信息，而不是传统意义上的表格。它更适合于展示一些简单的键值对或者描述性的文本。但如果你的数据结构比较复杂，或者需要更多的表格功能，那么还是建议使用。如果需求是展示真正的表格数据，并且需要更多的表格功能，例如排序、分页、编辑等，那么使用。如果数据结构是固定的、简单的键值对，或者你只是想展示描述性的信息，那么使用。组件来实现一个类似不规则表格的效果。标签代表表格中的一行，并且通过设置。属性来控制每个项目所占的列数。
html - table制作复杂表格
Little_naive的博客
08-19 5109
注意不要直接给td或者th全局设置宽度和高度(像以上表格)-------------需要单独给class设置--(一般只给"有需要"td或者tr设置宽高度就可以了,其他的表格会自动适应的) 1.使用两个Table表格制作,会方便一些 2.使用单个Table一定要先分好,行和列,以上图为例子,上半部分可以利用一个tbody来制作,下半部分可以分为9列,一个td就是一列,然后行看情况而定 ...
vue element ui table表格有相同数据单不规则合并单元格
qq_41531475的博客
02-01 878
element ui table表格有相同数据单不规则合并单元格
python如果没有table标签,怎么抓取表格数据
09-09
如果网页中没有使用table标签来标识表格数据，但页面上有其他HTML元素来表示表格数据的话，可以通过以下方法来抓取表格数据： 1. 使用BeautifulSoup解析网页内容：首先，使用Python的requests库获取网页的HTML源码。然后，使用BeautifulSoup对HTML源码进行解析，并找到包含表格数据的HTML元素。 2. 分析HTML结构：通过查看网页源码，找到包含表格数据的HTML元素以及其父元素，尽量找到具有唯一标识的元素，如class、id等。 3. 使用xpath或CSS选择器定位元素：根据上一步的分析结果，使用xpath或CSS选择器定位表格数据的HTML元素，获取到该元素的标签、属性等信息。 4. 提取表格数据：根据定位到的HTML元素，提取其中的文本内容。可以使用BeautifulSoup提供的find_all()或find()等方法来进一步筛选和提取数据。 5. 格式化数据：根据具体需求，对提取到的数据进行处理和格式化，如转换为列表、字典等数据结构，或者保存到文本文件、数据库等。 总结：没有table标签的情况下，可以通过分析HTML结构，找到包含表格数据的HTML元素，并使用相应的方法来定位和提取数据。虽然没有table标签会增加一些复杂度，但通过合理分析和处理，仍然可以成功抓取表格数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值