Почему он переносит сложную ячейку с двумя строками (2; 5 и 6) в следующую строку, а не располагает по порядку?

Question

Мне кажется, что это просто, но я не могу понять почему он переносит сложную ячейку с двумя строками (2; 5 и 6) в следующую строку, а не располагает по порядку? Мне надо две ячейки по порядку: одна с единицей, а вторая сложная... Html я только начал.

<table border="1" cellpadding="15" cellspacing="0">
  <tr>
      <td align = "center" width = "50">1</td>
      <td>
        <tr align="center"><td width = "100" colspan = "2">2</td></tr>
        <tr> 
          <td>5</td>
          <td>6</td>
        </tr>
      </td>
  </tr>
</table>

Answer 1

tr нельзя вкладывать в td - Grundy

Я хочу дополнить, что стоит ещё использовать что-то такое для лучшего "слияния":

        table {
        border-collapse: collapse;
    }
    
    td {
        margin: 0; /* Убираем внешние отступы ячеек */
        padding: 0; /* Убираем внутренние отступы ячеек */
    }

Answer 2

Вы упустили table внутри ячейки. Так tr не может быть дочерним по отношению к td, то для разметки внутри ячейки нужна новая таблица со своими tr/td. Такое, конечно тоже иногда надо, но если раскладка сводится к приведённой в вопросе, это можно решить через rowspan/colspan. Привожу оба варианта:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

<table>
  <tr>
    <td align="center" width="50">1</td>
    <td>
      <table>
        <tr align="center">
          <td width="100" colspan="2">2</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<br>
<table>
  <tr align="center">
    <td align="center" width="50" rowspan=2>1</td>
    <td width="100" colspan="2">2</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

БЛОГ НА HUSL

Почему он переносит сложную ячейку с двумя строками (2; 5 и 6) в следующую строку, а не располагает по порядку?

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