<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.