HTML, таблицы HTML, объединение ячеек

Question

Нужно сделать таблицы на 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>

Answer 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>

БЛОГ НА HUSL

HTML, таблицы HTML, объединение ячеек

Ответы (1 шт):