<!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"> </td>
<th id="name">Name</th>
<th id="mass">Mass <br>(10<sup>24</sup>KG)</th>
<th id="diameter">Diameter <br>(km)</th>
<th id="density">Density <br>(kg/m<sup>3</sup>)</th>
<th id="gravity">Gravity <br>(m/s<sup>2</sup>)</th>
<th id="length-of-day">Length of <br>day (hours)</th>
<th id="distance-from-sun">Distance from <br>Sun (10<sup>6</sup>km)</th>
<th id="mean-temperature">Mean <br>temperature <br>(℃)</th>
<th id="number-of-moons">Number of <br>moons</th>
<th id="notes">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<th id="planet type" rowspan="4" colspan="2">Terrestrial planets</th>
<th id="planet name">Mercury</th>
<td headers="planet mass">0.330</td>
<td headers="planet diameter">4,879</td>
<td headers="planet density">5427</td>
<td headers="planet gravity">3.7</td>
<td headers="planet length-of-day">4222.6</td>
<td headers="planet distance-from-sun">57.9</td>
<td headers="planet mean-temperature">167</td>
<td headers="planet number-of-moons">0</td>
<td headers="planet notes">Closest to the Sun</td>
</tr>
<tr>
<th id="planet name">Venus</th>
<td headers="planet mass">4.87</td>
<td headers="planet diameter">12,104</td>
<td headers="planet density">5243</td>
<td headers="planet gravity">8.9</td>
<td headers="planet length-of-day">2802.0</td>
<td headers="planet distance-from-sun">108.2</td>
<td headers="planet mean-temperature">464</td>
<td headers="planet number-of-moons">0</td>
<td headers="planet notes"></td>
</tr>
<tr>
<th id="planet name">Earth</th>
<td headers="planet mass">5.97</td>
<td headers="planet diameter">12,756</td>
<td headers="planet density">5514</td>
<td headers="planet gravity">9.8</td>
<td headers="planet length-of-day">24.0</td>
<td headers="planet distance-from-sun">149.6</td>
<td headers="planet mean-temperature">15</td>
<td headers="planet number-of-moons">1</td>
<td headers="planet notes">Our world</td>
</tr>
<tr>
<th id="planet name">Mars</th>
<td headers="planet mass">0.642</td>
<td headers="planet diameter">6,792</td>
<td headers="planet density">3933</td>
<td headers="planet gravity">3.7</td>
<td headers="planet length-of-day">24.7</td>
<td headers="planet distance-from-sun">227.9</td>
<td headers="planet mean-temperature">-65</td>
<td headers="planet number-of-moons">2</td>
<td headers="planet notes">The red planet</td>
</tr>
<tr>
<th id="planet type" rowspan="4">Jovian planets</th>
<th id="jovian planet type" rowspan="2">Gas <br>giants</th>
<th id="planet name">Jupiter</th>
<td headers="planet mass">1898</td>
<td headers="planet diameter">142,984</td>
<td headers="planet density">1326</td>
<td headers="planet gravity">23.1</td>
<td headers="planet length-of-day">9.9</td>
<td headers="planet distance-from-sun">778.6</td>
<td headers="planet mean-temperature">-110</td>
<td headers="planet number-of-moons">67</td>
<td headers="planet notes">The largest planet</td>
</tr>
<tr>
<th id="planet name">Saturn</th>
<td headers="planet mass">568</td>
<td headers="planet diameter">120,536</td>
<td headers="planet density">687</td>
<td headers="planet gravity">9.0</td>
<td headers="planet length-of-day">10.7</td>
<td headers="planet distance-from-sun">1433.5</td>
<td headers="planet mean-temperature">-140</td>
<td headers="planet number-of-moons">62</td>
<td headers="planet notes"></td>
</tr>
<tr>
<th id="jovian planet type" rowspan="2">Ice <br>giants</th>
<th id="planet name">Uranus</th>
<td headers="planet mass">86.8</td>
<td headers="planet diameter">51,118</td>
<td headers="planet density">1271</td>
<td headers="planet gravity">8.7</td>
<td headers="planet length-of-day">17.2</td>
<td headers="planet distance-from-sun">2872.5</td>
<td headers="planet mean-temperature">-195</td>
<td headers="planet number-of-moons">27</td>
<td headers="planet notes"></td>
</tr>
<tr>
<th id="planet name">Neptune</th>
<td headers="planet mass">102</td>
<td headers="planet diameter">49,528</td>
<td headers="planet density">1638</td>
<td headers="planet gravity">11.0</td>
<td headers="planet length-of-day">16.1</td>
<td headers="planet distance-from-sun">4495.1</td>
<td headers="planet mean-temperature">-200</td>
<td headers="planet number-of-moons">14</td>
<td headers="planet notes"></td>
</tr>
<tr>
<th id="planet type" colspan="2">Dwarf planets*</th>
<th id="planet name">Pluto</th>
<td headers="planet mass">0.0146</td>
<td headers="planet diameter">2,370</td>
<td headers="planet density">2095</td>
<td headers="planet gravity">0.7</td>
<td headers="planet length-of-day">153.3</td>
<td headers="planet distance-from-sun">5906.4</td>
<td headers="planet mean-temperature">-225</td>
<td headers="planet number-of-moons">5</td>
<td headers="planet notes">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;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.