问题：

利用HTML表创建发票设计

洪和平

2023-03-14

我试图在一个简单的HTML表中创建一个发票设计。我尽了最大的努力，但我无法创建HTML的设计。我是HTML的初学者，甚至阅读了W3School中的所有章节。但我不知道我是如何在HTML中设计这个的？我尝试了下面的代码，但它不是预期的。当我附上图像时，html标签设计的代码是什么？

null

<table style="height: 90px; width: 100%; border-collapse: collapse; border-style: solid;" border="1">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">A</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
      <td style="width: 25%; height: 18px;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse; width: 100%; height: 36px;" border="1">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
      <td style="width: 12.5%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
      <td style="width: 12.5%;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" border="1">
  <tbody>
    <tr>
      <td style="width: 100%;">&nbsp;</td>
    </tr>
  </tbody>
</table>

null

HTML中的预期图像表

共有1个答案

蔡弘扬

2023-03-14

下面是一个使用colspan和rowspan的可能示例。

null

/*to show cell's position*/

table,
td {
  border: solid 2px black;
  text-align: center;
  border-collapse: collapse;
}

.bold~tr td {
  border: solid 1px lightgray;
}

td {
  padding: 0.5em;
}

[colspan="4"][rowspan="2"] {
  height: 6em;
}

<table>
  <tr>
    <td colspan="4" rowspan="3">A</td>
    <td colspan="2">D</td>
    <td colspan="2">E</td>
  </tr>
  <tr>
    <td colspan="2">F</td>
    <td colspan="2">G</td>
  </tr>
  <tr>
    <td colspan="2">H</td>
    <td colspan="2">I</td>
  </tr>
  <tr>
    <td colspan="4" rowspan="2">B </td>
    <td colspan="2">J</td>
    <td colspan="2">K</td>
  </tr>
  <tr>
    <td colspan="4" rowspan="2"> L </td>
  </tr>
  <tr>
    <td colspan="4">C</td>
  </tr>
  <tr>
    <td>SL</td>
    <td>Items</td>
    <td>Due DT</td>
    <td>Qty</td>
    <td>Rate</td>
    <td>Per</td>
    <td>Dis%</td>
    <td>Amt</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr class="bold">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="3">AMT IN WORD</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>E. & O.E</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="4" rowspan="4"></td>
  </tr>
  <tr>
    <td colspan="4">COMPAGNY NAME</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

类似资料：

如何用HTML创建表格？

本文向大家介绍如何用HTML创建表格？，包括了如何用HTML创建表格？的使用技巧和注意事项，需要的朋友参考一下要使用HTML创建表，请使用<table>标记。一个表由行和列组成，可以使用一个或多个<tr>，<th>和<td>元素进行设置。表行由<tr>标记定义。要设置表头，请使用<th>标记。对于表单元格，使用<td>标记。请记住，不推荐使用表格属性，例如align，bgcolor，borde
使用材质设计按钮创建HTML

尝试为密码显示/隐藏功能创建角度指令。“显示/隐藏”可以工作，但是当尝试使用材质设计（mat）按钮时，它不会显示mat按钮，而是显示默认的html按钮。在我的指令中在应用程序中。组成部分html我确实有一些按钮作为测试，所以我知道mat正在工作。我的问题是使用一个使用innerHTML的指令如何让材质设计按钮工作？谢谢
使用SQL FOR XML创建HTML表

问题内容：我正在使用SQL Server 2008 R2中的FOR XML语句创建HL7护理连续性文档（CCD）。我已经用这种方法做了很多，但这是我第一次必须在HTML表中表示部分数据，这给我带来了麻烦。因此，我在表中有以下信息：我正在尝试渲染以下内容我正在使用此查询：我不断得到以下信息：任何人有任何建议吗？问题答案：要添加标题，也可以使用。
贝宝网络服务。创建并发送发票

我需要为已更改订单的未付金额创建发票，并从内部web应用程序向客户发送发票。用例：客户在我们的网站上订购并使用快速结帐付款我们的员工需要修改订单并使用内部CRM web应用程序收取差价 2个问题： > 这是用于此目的的正确API吗？创建并发送发票https://developer.paypal.com/webapps/developer/docs/classic/api/invoicing/Cr
从JavaScript对象创建HTML表

问题内容：我是JavaScript的初学者，想显示HTML中的对象数组。数据格式如下：我想使用包含三列（id，名称，相关性）的列表来显示它们。ID可以从1自动增加。谁能告诉我如何编写一个JavaScript代码来显示它？请给我一些材料或示例进行学习。问题答案：说明您想要的是用JavaScript填充HTML中的表（或另一个DOMElement），一旦加载页面并接收到JSON对象，该
发票

作用支持普票、专票抬头获取，及按行程开票、按金额开票和电子发票下载依赖发票抬头需要在滴滴管理后台添加，然后可以通过普票、专票接口获取开普票前需要通过普票抬头列表获取发票抬头开专票前需要通过专票资质列表获取专票资质id 注意所有接口调用时需要严格遵守请求方式(GET/POST) 使用接口前需要仔细阅读每个接口的注意事项接口报错时先阅读通用错误解决方案和当前接口文档下的接口错误解决方案

利用HTML表创建发票设计

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档