<table class="table">
  <caption>
    10 most populous countries (April, 2021)
  </caption>
  <colgroup>
    <col class="bg_primary numbers">
    <col span="2" class="bg_primary">
    <col class="bg_secondary">
  </colgroup>
  <thead>
    <tr>
      <th>Rank</th>
      <th>Country</th>
      <th>Population</th>
      <th scope="col">% of world</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>China</td>
      <td>1,407,547,760</td>
      <td>17.9%</td>
    </tr>
    <tr>
      <td>2</td>
      <td>India</td>
      <td>1,375,835,428</td>
      <td>17.5%</td>
    </tr>
    <tr>
      <td>3</td>
      <td>United States</td>
      <td>331,515,314</td>
      <td>4.22%</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Indonesia</td>
      <td>269,603,400</td>
      <td>3.43%</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Pakistan</td>
      <td>220,892,331</td>
      <td>2.81%</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Brazil</td>
      <td>213,013,653</td>
      <td>2.71%</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Nigeria</td>
      <td>206,139,587</td>
      <td>2.62%</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Bangladesh</td>
      <td>170,509,800</td>
      <td>2.17%</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Russia</td>
      <td>170,509,800</td>
      <td>2.17%</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Mexico</td>
      <td>127,792,286</td>
      <td>1.63%</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>&nbsp;</td>
      <td>Total</td>
      <td>4,493,359,359</td>
      <td>57.16%</td>
    </tr>
  </tfoot>
</table>

</body>

</html>

.table caption {
  caption-side: bottom;
}

.table {
  width: 100%;
  font-family: Arial, sans-serif;
  border: 3px solid black;
  border-collapse: collapse;
  border-spacing: 10px;
}

.table thead,
.table tfoot {
  background-color: #121e42;
  color: white;
}

.table thead {
  color: orange;
}

.table tfoot {
  font-weight: bold;
}

.table th,
.table td {
  padding: 4px;
  border: 1px solid lightgray;
}

.table tr td:nth-child(1),
.table tr td:nth-child(3),
.table tr td:nth-child(4) {
  text-align: right;
}

.numbers {
  width: 16px;
}
.bg_primary {
  background-color: #f4f6b9;
}

.bg_secondary {
  background-color: lightgrey;
}