<div class="outer container">
        <table>
            <!--Table-->
            <!--Table Caption-->
            <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>
            <!--Col Group-->
            <colgroup>
                <col span="2">
                <col class="border-solid-black">
                <col span="9">
            </colgroup>
            <!--Table Header-->
            <thead>
                <tr>
                    <td colspan="2"></td>
                    <td>Name</td>
                    <td>Mass (10<sup>24</sup>kg)</td>
                    <td>Diameter (km)</td>
                    <td>ensity (kg/m<sup>3</sup>)</td>
                    <td>Gravity (m/s<sup>2</sup>)</td>
                    <td>Length of day (hours)</td>
                    <td>Distance from Sun (10<sup>6</sup>km)</td>
                    <td>Mean temperature (°C)</td>
                    <td>Number of moons</td>
                    <td>Notes</td>
                </tr>
            </thead>
            <!--table Body-->
            <tbody>
                <!--Table row-->
                <tr>
                    <th rowspan="4" colspan="2" scope="rowgroup">Terestrial planets</th>
                    <th>Mercury</th>
                    <th>0.330</th>
                    <th>4,879</th>
                    <th>5427</th>
                    <th>3.7</th>
                    <th>4222.6</th>
                    <th>57.9</th>
                    <th>167</th>
                    <th>0</th>
                    <th>Closest to the Sun</th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th scope="row">Venus</th>
                    <th>4.87</th>
                    <th>12,104</th>
                    <th> 5243</th>
                    <th>8.9</th>
                    <th>2802.0</th>
                    <th>108.2</th>
                    <th>464</th>
                    <th>0</th>
                    <th></th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th scope="row">Earth</th>
                    <th>5.97</th>
                    <th>13,756</th>
                    <th>5514</th>
                    <th>9.8</th>
                    <th>24.0</th>
                    <th>149.6</th>
                    <th>15</th>
                    <th>1</th>
                    <th>Our world</th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th scope="row">Mars</th>
                    <th>0.642</th>
                    <th>6.792</th>
                    <th>3933</th>
                    <th>3.7</th>
                    <th>24.7</th>
                    <th>227.9</th>
                    <th>-65</th>
                    <th>2</th>
                    <th>The red planet</th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th rowspan="4" scope="rowgroup">Jovian Planets</th>
                    <th rowspan="2" scope="rowgroup">Gas giants</th>
                    <th scope="row">Jupiter</th>
                    <th>1898</th>
                    <th>142,984</th>
                    <th>1326</th>
                    <th>23.1</th>
                    <th>9.9</th>
                    <th>778.6</th>
                    <th>-110</th>
                    <th>67</th>
                    <th>The largest planet</th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th scope="row">Saturn</th>
                    <th>568</th>
                    <th>120,536</th>
                    <th>687</th>
                    <th>9.0</th>
                    <th>10.7</th>
                    <th>1433.5</th>
                    <th>-140</th>
                    <th>62</th>
                    <th></th>
    
                </tr>
                <!--Table Row-->
                <tr>
                    <th rowspan="2" scope="rowgroup">Ice Giants</th>
                    <th colspan="row">Uranus</th>
                    <th>86.8</th>
                    <th>51,118</th>
                    <th>1271</th>
                    <th> 8.7 </th>
                    <th>17.2</th>
                    <th>2872.5</th>
                    <th>-195</th>
                    <th>27</th>
                    <th></th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th colspan="row">Neptune</th>
                    <th>102</th>
                    <th>49,528</th>
                    <th>1638</th>
                    <th>11.0</th>
                    <th>16.1</th>
                    <th>4495.1</th>
                    <th>-200</th>
                    <th>14</th>
                    <th></th>
                </tr>
                <!--Table Row-->
                <tr>
                    <th colspan="2" scope="row">Dwarf planets</th>
                    <th colspan="row">Pluto</th>
                    <th>0.0146</th>
                    <th>2,370</th>
                    <th>2095</th>
                    <th>0.7</th>
                    <th>153.3</th>
                    <th>5906.4</th>
                    <th>-225</th>
                    <th>5</th>
                    <th>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>.</th>
                </tr>
            </tbody>
        </table>
    </div>
html {
    font-family: sans-serif;
  }
  
  table {
    border-collapse: collapse;
    border: 2px solid rgb(200,200,200);
    letter-spacing: 1px;
    font-size: 0.8rem;
  }
  
  .border-solid-black {
    border: 2px solid black;
  }

  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.