Несколько элементарных вопросов по HTML

111

15 декабря 2020, 06:10

Делаю отчёт в чистом html и у меня возникли небольшие трудности.

вот к примеру первая проблема, очень большие отступы margin по всем фронтам, пытался фиксить таким кодом (который ничего не делает) :

 <h6 style="width: 1px; height: 1px; margin-right: 0px; margin-top: 0px;">

Код таблицы:

<table width="100%" height="10%" border-top ="solid" border ="solid" height="2>
<td rowspan="2">
<img src="Z:\12.bmp width="100" height="90" style="margin-left: 0px; margin-top: 0px">
</td>
<td>
<h6  style="width: 0px; margin-right: 0px; font-size: 20px" >БОРЬКАНСКИЙ</h6>
</td>
<td style="font: bolder;">
<p> 
<h2> Испытания </h2>
<h6> нижний текст  </h6>
</p>
</td>
<tr>
<td> <p> <h6 align="center" style="border-top:solid;" > 432 </h6>
<h6 align="center"> 123) </h6> </p>
</td>
</tr>
</table>

и второй пример, как сделать этот интервал (от i до 123) не быдлокодом (я это делал при помощи белого текста в <.h1>)

Answer 1

Если я правильно понял задумку... (или исправьте в комментарии)

<table> 
  <tr> 
    <td rowspan="2" style="border: 1px solid #555; padding: 5px;"> 
      <img src="https://i.gyazo.com/03fcf3c9a86b00f85f98fa343149e740.png" > 
    </td> 
    <td style="border: 1px solid #555; padding: 5px; vertical-align: top;"> 
      <span  style="font-size: 20px;" >БОРЬКАНСКИЙ</span> 
    </td> 
    <td rowspan="2" style="border: 1px solid #555; padding: 5px; vertical-align: top; width: 100%; max-width: 900px;"> 
      <div style="font-size: 30px; margin-bottom: 10px;"><b>Испытания</b></div> 
      <span>нижний текст</span> 
    </td> 
  </tr> 
  <tr> 
    <td style="border: 1px solid #555; vertical-align: top;"> 
      <div style="margin-bottom: 60px;">432</div> 
      <div>123</div> 
    </td> 
  </tr> 
</table>

Теги заглавлений созданы для того, чтобы быстро записать заглавление, с заранее известным размером!) Если хочется манипулировать шрифтом, размером и т.п., то их запросто может заменить span или div / p, в зависимости от ситуации.

Здесь использованы div, потому что у них по дефолту стоит display: block; width: 100%; — display: block заставляет элемент расположиться на новой строке, отдельно от всего что до или после него.

У вас было куча отступов из-за ненужной высоты таблицы и ширины 100%. Можно не задавая строгую ширину, дать каждому блоку таблицы получить свой размер в зависимости от его внутренностей (или ограничить max-width), а только последнему блоку выдать width: 100%, он уже займет всё свободное место, которое осталось уже после остальных td.

P.s. есть удобные редакторы для кода, сразу указывающие на ошибки, незакрытую кавычку и т.п. — LiveWeave, JsFiddle, Playcode