1. 首页
  2. 问题列表
  3. 利用HTML表创建发票设计
提问者：小点点

利用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;">&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个答案

匿名用户

下面是一个使用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>

相关问题