<h1>Table template</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>).
       <col span="2">
       <col style="border:2px solid black;">
       <col span="9">
        <td colspan="2">&nbsp;</td>
        <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>
          <th scope="rowgroup" rowspan="4" colspan="2">Terrestrial planets</th>
          <th scope="row">Mercury</th>
          <td>Closest to the Sun</td>   
          <th scope="row">Venus</th>
          <th scope="row">Earth</th>
          <td>Our world</td> 
          <th scope="row">Mars</th> 
          <td>The red planet</td> 
        <th scope="rowgroup" rowspan="4">Jovian planets</th>
          <th scope="rowgroup" rowspan=2>Gas giants</th>
          <td>The largest planet</td>
          <th scope="row">Saturn</th>
          <th scope="rowgroup" rowspan="2">Ice giants</th>
          <th scope="row">Uranus</th>
          <th scope="row">Neptune</th>
          <th scope="row" colspan="2">Dwarf planets</th>
          <th scope="row">Pluto</th>
          <td>Declassified as a planet in <time datetime="2016">2006</time>, 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.