How to convert a single table row to two columns?

Question

I have a <table></table> that displays items in a single row. I want the items to display as two columns, one column with the first three items and the other one with the last two items. Can this be done through straight HTML or do I need CSS? Code suggestions?```

     <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

the first way does it in a table. You just need to use 3 rows and rearrange your cells. The second way is probably preferred and uses 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>