Блог

Главная - Вопросы по программированию - Создание дизайна счета-фактуры с помощью HTML-таблицы

Создание дизайна счета-фактуры с помощью HTML-таблицы

#html #css #html-table

Вопрос:

Я пытаюсь создать дизайн счета-фактуры в простой HTML-таблице. Я старался изо всех сил, но мне не удалось создать этот дизайн в HTML. Я новичок в HTML и даже прочитал все главы в w3school. Но я не знаю, как я это оформляю в HTML? Я попробовал приведенный ниже код, но он оказался не таким, как ожидалось. Каким будет код для дизайна вкладки html, когда я прикреплю изображение?

 <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;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 50%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;nbsp;</td>
      <td style="width: 25%; height: 18px;">amp;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;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
      <td style="width: 12.5%; height: 18px;">amp;nbsp;</td>
    </tr>
    <tr>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
      <td style="width: 12.5%;">amp;nbsp;</td>
    </tr>
  </tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" border="1">
  <tbody>
    <tr>
      <td style="width: 100%;">amp;nbsp;</td>
    </tr>
  </tbody>
</table>

изображение, как и ожидалось, таблица в HTML

Комментарии:

1. Вы должны использовать colspan rowspan атрибуты и для объединения ячеек. С помощью этого вы сможете составить единый <table> и соответствующий вашим ожиданиям стол

2. Пожалуйста, помогите мне, я попробовал закончить с 1 дня, но со мной этого не происходит..

3. Как только вы получите свой ответ, вам также необходимо подумать о том, что произойдет, если счет-фактура выйдет за рамки одной страницы.

Ответ №1:

Вот возможный пример использования colspan и rowspan.

 /*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. amp; 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>

учебные пособия вы можете найти в своей поисковой системе :

https://html.com/tables/rowspan-colspan/

Ответ №2:

 <style>
  table{
 height: 90px;
  width: 100%; 
  border-collapse: collapse; 
  border-style: solid;
  
}
tr{height: 18px;}
.s1-l{height:120px}
.s1{width: 50%; height: 18px;}
.s2{width: 25%; height: 18px;}
.s3{width: 12.5%; height: 18px;}
.c1{border: 1px solid black}
</style>
<table border="1" style="width:100%">
  <tbody class="c1">
    <tr><th rowspan="3" colspan="4">A</th><th colspan="2">D</th><th colspan="2">E</th></tr>
    <tr><th  colspan="2">F</th><th colspan="2">G</th></td></tr>
    <tr><th colspan="2">H</th><th colspan="2">I</th></tr>
    <tr><th colspan="4" rowspan="2">B</th><th colspan="2">J</th><th colspan="2">K</th></tr>
    <tr><th colspan="4" rowspan="4">L</th></tr>
    <tr><th colspan="4" rowspan="3">C</th></tr>
  </tbody>
<ttbody>
  <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><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
  </tbody>
<tbody>
   <tr><td colspan="3">AMT IN WORD</td><td></td><td></td><td></td><td></td><td>E.amp; 0.E</td></tr>

   <tr><td></td><td></td><td></td><td></td><td colspan="4" rowspan="4"></td></tr>
   <tr><td colspan="3">COMPANY NAME</td></tr>
   <tr><td></td><td></td><td></td><td></td></tr>
   <tr><td></td><td></td><td></td><td></td></tr>
   </tbody>
</table>

Здесь я переделал код. С таблицей вы должны заранее знать размер таблицы. Итак, этот стол был 24 на 8. Затем вы должны пройти строку за строкой(tr), а затем пометить их. Используйте colspan и диапазон строк, чтобы изменить его размер в зависимости от того, что вы хотите. tbody можно использовать для быстрого оформления многих ячеек в нем.
Также я добавляю блок стилей, чтобы показать вам, что вы можете использовать класс вместо этого, чтобы быстро обновить стиль для всего, что имеет этот класс. В итоге я перестал использовать ваши стили. Также я использую тег th вместо td, потому что по умолчанию он имеет стиль по центру и полужирный.

Комментарии:

1. Почему вы должны использовать обычную разметку и гибкую разметку, когда эти данные заслуживают HTML-разметки ? кроме того , для охвата строк и столбцов потребуется сетка, а не гибкая 😉

2. @леви, пожалуйста, не голосуй против меня… Я не знаю, как использовать ваш ответ.. Пожалуйста, помогите мне создать дизайн счета-фактуры в html

3. @JustinParker Оглядываясь назад, я пересмотрел счет и дал объяснение. ПОДДЕРЖИ МЕНЯ, ПОЖАЛУЙСТА

4. @G-Кирилл, Ты прав, использование CSS на столе-это на самом деле кошмар. Я переделал, пожалуйста, взгляните и поддержите меня, если хотите. Кстати, первый пост.

Метки: