Structuring planet data

by elishamutang

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Table template</h1>

    <table>
      <col>
      <col>
      <col style="border: 4px solid black;">
      <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>).</caption>
      <thead>
        <th colspan="2"></th>
        <th scope="col">Name</th>
        <th scope="col">Mass (10<sup>24</sup>kg)</th>
        <th scope="col">Diameter (km)</th>
        <th scope="col">Density (kg/m<sup>3</sup>)</th>
        <th scope="col">Gravity (m/s<sup>2</sup>)</th>
        <th scope="col">Length of day (hours)</th>
        <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
        <th scope="col">Mean temperature (°C)</th>
        <th scope="col">Number of moons</th>
        <th scope="col">Notes</th>
      </thead>
      <tbody>
        <tr>
          <th rowspan="4" colspan="2" scope="rowgroup">Terrestial planets</th>
          <th scope="row">Mercury</th>
          <td>0.330</td>
          <td>4,879</td>
          <td>5427</td>
          <td>3.7</td>
          <td>4222.6</td>
          <td>57.9</td>
          <td>167</td>
          <td>0</td>
          <td>Closest tot he Sun</td>
        </tr>
        <tr>
          <th scope="row">Venus</th>
          <td>4.87</td>
          <td>12,104</td>
          <td>5243</td>
          <td>8.9</td>
          <td>2802.0</td>
          <td>108.2</td>
          <td>464</td>
          <td>0</td>
          <td></td>
        </tr>
        <tr>
          <th scope="row">Earth</th>
          <td>5.97</td>
          <td>12,756</td>
          <td>5514</td>
          <td>9.8</td>
          <td>24.0</td>
          <td>149.6</td>
          <td>15</td>
         ...

CSS

html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

caption {
  padding: 10px;
}