<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Astro World 🌌</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
    <h1>Planets Data 🌌</h1>

        <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 style="border: 2px solid black">
            <th colspan="3" scope="col">&nbsp;</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>
            <!-- terrestrial planets -->
                <th scope="rowgroup" rowspan="4" colspan="3">Terrestrial Planets</th>
                <th scope="row">Mercury</th>
                <td>Closest to the Sun</td>

                    <th scope="row">Venus</th>
                    <td>Earth's hot sister</td>

                    <th scope="row">Earth</th>
                    <td>Our World</td>

                    <th scope="row">Mars</th>
                    <td>The red planet</td>

            <!-- jovian planets -->
            <th rowspan="5" colspan="2" scope="rowgroup">
                Jovian Planets
                <th rowspan="2" scope="rowgroup">Gas giants</th>
                <th scope="row">Jupiter
                <td>The largest planet</td>

                <!-- saturn -->
                <th scope="row">Saturn</th>
                <td>Second largest planet</td>
                <th rowspan="2" scope="rowgroup">Ice giants</th>
                <!-- uranus -->
                <th scope="row">Uranus
                <td>The first planet discovered through a telescope</td>
                <!-- neptune -->
                <tr><th scope="row">Neptune</th>
                    <td>The densest giant planet. </td>

                <th scope="rowgroup" colspan="3">Dwarf Planets</th>

                <th scope="row">Pluto</th>
                <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>
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.