CODEWITHSUNDEEP
htmlcsshtml-tablecss-tables
clg
clg

Reputation: 25

How to convert a single table row to two columns?

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>

Upvotes: 0

Views: 1248

Answers (1)

DCR
DCR

Reputation: 15698

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>

Upvotes: 1

Related Questions