HTML Table formatting for three column layout

Question

I have a HTML table i'm making that I want to display data with a three column layout. I have something close here: https://jsfiddle.net/j89cttva/1/

But I'd like for the gaps to be erased up top to condense all of the empty whitespace. Could anyone assist?

  <table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Comfort_Features:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>Rear Center Folding With Storage and Pass-Thru Armrests</li>
        <li>Carpet Floor Mats</li>
        <li>Carpet Floors</li>
        <li>Front Floor Mats</li>
        <li>Chrome Interior Accents</li>
        <li>Simulated Alloy Shift Knob Trim</li>
        <li>Urethane Steering Wheel Trim</li>
      </ul>
    </td>
  </table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Drivetrain:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>4.11 Axle Ratio</li>
      </ul>
    </td>
  </table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Engine:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>140 Amps Alternator</li>
        <li>600 Cca Battery Rating</li>
        <li>Battery Saver</li>
        <li>Maintenance-Free Battery</li>
        <li>50 State Emissions</li>
        <li>Auxiliary Oil Cooler</li>
      </ul>
    </td>
  </table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>In_Car_Entertainment:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>Uconnect Infotainment</li>
      </ul>
    </td>
  </table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: left;display: inline-block;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Instrumentation:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>Clock</li>
        <li>Digital Odometer</li>
        <li>Driver Information System</li>
        <li>External Temperature Display</li>
        <li>Tachometer Gauge</li>
        <li>Multi-Function Display</li>
        <li>Trip Computer</li>
        <li>2 Trip Odometer</li>
        <li>Low Fuel Level Warnings and Reminders</li>
      </ul>
    </td>
  </table>
  <table style="width: 30%; margin-bottom: 5px;font-size:12px;float: up;display: inline-block;">
    <tr>
      <td style="width: 10%; vertical-align: top;">
        <div class="accent-color2" style="width: 100px; padding: 0px 10px;"><b>Lights:</b></div>
      </td>
    </tr>
    <td style="width: 30%; padding-right: 5px; vertical-align: top;">
      <ul style="padding-left: 10px;">
        <li>Daytime Running Lights</li>
        <li>Auto Delay Off Headlights</li>
        <li>Led Taillights</li>
      </ul>
    </td>
  </table>
</table>

Answer 1

Is this for an assignment where you have to use tables? If not, tables are not the right tool here.

I wanted to practice flexbox so I put this together. The height on the flex container is a hack to make it wrap but I don't know your surrounding code, maybe you are already height constrained.

https://jsfiddle.net/dgrogan/ua4cn5d8/

And I wanted to practice multicol -- https://jsfiddle.net/dgrogan/jLsgpxy1/

This code is flex:

body {
  font-size: 12px;
}

#container {
  outline: 1px solid pink;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:300px; /* otherwise this container can grow down indefinitely*/
}

.section {
  outline: 1px solid lightblue;
  width: 30%;
}

<div id="container">
  <div class="section">
    <b>Comfort_Features:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Rear Center Folding With Storage and Pass-Thru Armrests</li>
      <li>Carpet Floor Mats</li>
      <li>Carpet Floors</li>
      <li>Front Floor Mats</li>
      <li>Chrome Interior Accents</li>
      <li>Simulated Alloy Shift Knob Trim</li>
      <li>Urethane Steering Wheel Trim</li>
    </ul>
  </div>
  <div class="section">
    <b>Drivetrain:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>4.11 Axle Ratio</li>
    </ul>
  </div>
  <div class="section">
    <b>Engine:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>140 Amps Alternator</li>
      <li>600 Cca Battery Rating</li>
      <li>Battery Saver</li>
      <li>Maintenance-Free Battery</li>
      <li>50 State Emissions</li>
      <li>Auxiliary Oil Cooler</li>
    </ul>
  </div>
  <div class="section">
    <b>In_Car_Entertainment:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Uconnect Infotainment</li>
    </ul>
  </div>
  <div class="section">
    <b>Instrumentation:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Clock</li>
      <li>Digital Odometer</li>
      <li>Driver Information System</li>
      <li>External Temperature Display</li>
      <li>Tachometer Gauge</li>
      <li>Multi-Function Display</li>
      <li>Trip Computer</li>
      <li>2 Trip Odometer</li>
      <li>Low Fuel Level Warnings and Reminders</li>
    </ul>
  </div>
  <div class="section">
    <b>Lights:</b>
    <br>
    <ul style="padding-left: 10px;">
      <li>Daytime Running Lights</li>
      <li>Auto Delay Off Headlights</li>
      <li>Led Taillights</li>
    </ul>
  </div>
</div>