利用HTML表创建发票设计
我试图在一个简单的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;"> </td>
<td style="width: 25%; height: 18px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 50%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </td>
<td style="width: 25%; height: 18px;"> </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;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
</tr>
<tr style="height: 18px;">
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
<td style="width: 12.5%; height: 18px;"> </td>
</tr>
<tr>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
<td style="width: 12.5%;"> </td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 100%;"> </td>
</tr>
</tbody>
</table>null
HTML中的预期图像表
共有1个答案
下面是一个使用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创建表，请使用<table>标记。一个表由行和列组成，可以使用一个或多个<tr>，<th>和<td>元素进行设置。表行由<tr>标记定义。要设置表头，请使用<th>标记。对于表单元格，使用<td>标记。 请记住，不推荐使用表格属性，例如align，bgcolor，borde
-
尝试为密码显示/隐藏功能创建角度指令。“显示/隐藏”可以工作，但是当尝试使用材质设计（mat）按钮时，它不会显示mat按钮，而是显示默认的html按钮。在我的指令中 在应用程序中。组成部分html我确实有一些按钮作为测试，所以我知道mat正在工作。 我的问题是使用一个使用innerHTML的指令如何让材质设计按钮工作？ 谢谢
-
问题内容： 我正在使用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中的对象数组。 数据格式如下： 我想使用包含三列（id，名称，相关性）的列表来显示它们。ID可以从1自动增加。 谁能告诉我如何编写一个JavaScript代码来显示它？ 请给我一些材料或示例进行学习。 问题答案： 说明 您想要的是用JavaScript填充HTML中的表（或另一个DOMElement），一旦加载页面并接收到JSON对象，该
-
本文向大家介绍如何在HTML中创建表头？，包括了如何在HTML中创建表头？的使用技巧和注意事项，需要的朋友参考一下 要使用HTML创建表头，请使用<th>…</ th>标记。表标题标签被表行<tr>…</ tr>包围。<tr>标记被<table>标记包围。表格由行和列组成，可以使用一个或多个<tr>，<th>和<td>元素进行设置。使用style属性添加CSS属性，以向表添加边框。 表行由<tr>