Как преобразовать одну строку таблицы в два столбца?

Question

У меня есть <table></table>, который отображает элементы в одной строке. Я хочу, чтобы элементы отображались в виде двух столбцов: один столбец с первыми тремя элементами, а другой - с двумя последними. Можно ли это сделать через прямой HTML или мне нужно CSS? Кодовые предложения? `` `

     <div id="mapControls" class="container">
        <table>
            <tr>
                <td><input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</td>
                <td><input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</td>
                <td><input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</td>
                <td><input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</td>
                <td><input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</td>
            </tr>
        </table>
    </div>

Answer 1

первый способ делает это в таблице. Вам просто нужно использовать 3 ряда и переставить свои клетки. Второй способ, вероятно, предпочтительнее и использует flexbox

<div id="mapControls" class="container">
  <table>
    <tr>
      <td><input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</td>
      <td><input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</td>
      <td><input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</td>
    </tr>
    <tr>
      <td><input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</td>

      <td> </td>
    </tr>
  </table>
</div>

#container {
  display: flex;
  justify-content: space-evenly;
}

#left,
#right {
  display: flex;
  flex-direction: column;
}

<div id='container'>
  <div id='left'>
    <span>    <input type="checkbox" id="births" checked="checked" onclick="toggleMarkerGroup('births')">Births</span>
    <span>    <input type="checkbox" id="marriages" checked="checked" onclick="toggleMarkerGroup('marriages')">Marriages</span>
    <span>   <input type="checkbox" id="deaths" checked="checked" onclick="toggleMarkerGroup('deaths')">Deaths</span>
  </div>

  <div id='right'>


    <span>  <input type="checkbox" id="burials" checked="checked" onclick="toggleMarkerGroup('burials')">Burials</span>
    <span>  <input type="checkbox" id="migration" checked="checked" onclick="toggleMigration(migrations)"> Migrations</span>
  </div>
</div>