<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Planets data</title>
        <link href="minimal-table.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <h1>Planets data</h1>
        <table>
            <colgroup>
                <col>
                <col>
                <col style="border: 2px 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>
                <tr>
                    <td colspan="2">&nbsp;</td>
                    <th scope="col">Name</th>
                    <th scope="col">Mass <br>(10<sup>24</sup>KG)</th>
                    <th scope="col">Diameter <br>(km)</th>
                    <th scope="col">Density <br>(kg/m<sup>3</sup>)</th>
                    <th scope="col">Gravity <br>(m/s<sup>2</sup>)</th>
                    <th scope="col">Length of <br>day (hours)</th>
                    <th scope="col">Distance from <br>Sun (10<sup>6</sup>km)</th>
                    <th scope="col">Mean <br>temperature <br>(&#8451;)</th>
                    <th scope="col">Number of <br>moons</th>
                    <th scope="col">Notes</th>
                </tr>
               
            </thead>
            <tbody>
                <tr>
                    <th rowspan="4" colspan="2" scope="rowgroup">Terrestrial 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 to the 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>
                    <td>1</td>
                    <td>Our world</td>
                </tr>
                <tr>
                    <th scope="row">Mars</th>
                    <td>0.642</td>
                    <td>6,792</td>
                    <td>3933</td>
                    <td>3.7</td>
                    <td>24.7</td>
                    <td>227.9</td>
                    <td>-65</td>
                    <td>2</td>
                    <td>The red planet</td>
                </tr>
                <tr>
                    <th scope="rowgroup" rowspan="4">Jovian planets</th>
                    <th scope="rowgroup" rowspan="2">Gas <br>giants</th>
                    <th scope="row">Jupiter</th>
                    <td>1898</td>
                    <td>142,984</td>
                    <td>1326</td>
                    <td>23.1</td>
                    <td>9.9</td>
                    <td>778.6</td>
                    <td>-110</td>
                    <td>67</td>
                    <td>The largest planet</td>
                </tr>
                <tr>
                    <th scope="row">Saturn</th>
                    <td>568</td>
                    <td>120,536</td>
                    <td>687</td>
                    <td>9.0</td>
                    <td>10.7</td>
                    <td>1433.5</td>
                    <td>-140</td>
                    <td>62</td>
                </tr>
                <tr>
                    <th scope="rowgroup" rowspan="2">Ice <br>giants</th>
                    <th scope="row">Uranus</th>
                    <td>86.8</td>
                    <td>51,118</td>
                    <td>1271</td>
                    <td>8.7</td>
                    <td>17.2</td>
                    <td>2872.5</td>
                    <td>-195</td>
                    <td>27</td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="row">Neptune</th>
                    <td>102</td>
                    <td>49,528</td>
                    <td>1638</td>
                    <td>11.0</td>
                    <td>16.1</td>
                    <td>4495.1</td>
                    <td>-200</td>
                    <td>14</td>
                    <td></td>
                </tr>
                <tr>
                    <th scope="rowgroup" colspan="2">Dwarf planets*</th>
                    <th scope="row">Pluto</th>
                    <td>0.0146</td>
                    <td>2,370</td>
                    <td>2095</td>
                    <td>0.7</td>
                    <td>153.3</td>
                    <td>5906.4</td>
                    <td>-225</td>
                    <td>5</td>
                    <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td>
                </tr>
            </tbody>
        </table>


    </body>
</html>
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;
  }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.