HTML таблица разное количество столбцов в разных строках

Question

Как в листе Excel можно

1. 2 столбца в 1-м ряду
2. 1 длинный столбец во 2-м ряду

это возможно в HTML?

Answer 1

С осознанием того, что вы незнакомы с colspan Я предположил, что вы тоже незнакомы с rowspan Я решил добавить это бесплатно.

Важно отметить, что при использовании rowspan: следующие tr элементы должны содержать меньше td элементы, из-за использования клеток rowspan в предыдущем ряду (или в предыдущих строках).

table {
  border: 1px solid #000;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #000;
}

<table>
  <thead>
    <tr>
      <th colspan="2">Column one and two</th>
      <th>Column three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2" colspan="2">A large cell</td>
      <td>a smaller cell</td>
    </tr>
    <tr>
      <!-- note that this row only has _one_ td, since the preceding row
                     takes up some of this row -->
      <td>Another small cell</td>
    </tr>
  </tbody>
</table>

Answer 2

Colspan:

<table>
   <tr>
      <td> Row 1 Col 1</td>
      <td> Row 1 Col 2</td>
</tr>
<tr>
      <td colspan=2> Row 2 Long Col</td>
</tr>
</table>

Answer 3

Да, просто используйте colspan.

Answer 4

Если вам нужна другая ширина столбца, сделайте следующее:

      <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="9">
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </td>
</tr>