0

Нужно сделать таблицы на HTML введите сюда описание изображения введите сюда описание изображения

введите сюда описание изображенияpng

<table border=1>
<tr height=30>
<th width=100 height=30 colspan=5></th>
</tr>

<tr>
<th width=100 rowspan=3></th>
</tr>

<tr>
<th width=100 height=30 ></th>
<th width=100></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
</tr>

<tr >
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
</tr>

<tr height=30>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>
<th width=100 height=30></th>

</table>
4
  • 4
    нужно использовать атрибуты colspan и rowspan
    – Grundy
    10 июн 2020 в 4:13
  • Я использовал, но не получилось(
    – VeNNoM
    10 июн 2020 в 4:29
  • 1
    Прорисовываешь все линии полностью - там, где они отсутствуют, пунктиром. И на основании этого смотришь, где использовать спаны - добавляешь соотв. спан самой левой верхней ячейке, а остальные - удаляешь вообще.
    – Akina
    10 июн 2020 в 4:40
  • В вопросе скинул код, попробовал первый столбец объединить, но не получилось
    – VeNNoM
    10 июн 2020 в 4:50

1 ответ 1

1

Вам необходимо использовать свойства rowspan и colspan

пример для 2 таблицы:

table {
    border-collapse: collapse;
    border-spacing: 0;
    border: solid 1px #000;
    width: 100%;
}

td {
   padding: 8px;
}
<table border=1>
      <tr>
        <td colspan="5"></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td></td>
        <td rowspan="3"></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td rowspan="3"></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

пример для 3 таблицы:

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: solid 1px #000;
  width: 100%;
}

td {
  border-collapse: collapse;
  border-spacing: 0;
  border: solid 1px #000;
  padding: 8px;
}
<table>
  <tr>
    <td colspan="8"></td>
  </tr>
  <tr>
    <td rowspan="6"></td>
    <td colspan="6"></td>
    <td rowspan="6"></td>
  </tr>
  <tr>
    <td rowspan="4"></td>
    <td colspan="4"></td>
    <td rowspan="4"></td>
  </tr>
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
    <td rowspan="2"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="4"></td>
  </tr>
  <tr>
    <td colspan="6"></td>
  </tr>
  <tr>
    <td colspan="8"></td>
  </tr>
</table>

4
  • 1
    Сделайте, пожалуйста, сниппет для бОльшей информативности)
    – DaemonHK
    10 июн 2020 в 5:09
  • Вставил код, вообще ничего не выводит
    – VeNNoM
    10 июн 2020 в 5:09
  • таблица формируется правильно, единственное не указывал границы таблиц, добавил стили стили и сниппет 10 июн 2020 в 5:19
  • Всем спасибо, выручили!
    – VeNNoM
    10 июн 2020 в 5:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.