Assessment wanted for "Structuring planet data" | dissidenttux

Assessment wanted for “Structuring planet data”

Looking for feedback on the HTML assessment Structuring planet data.

I am seeing if I can fulfill the requirements of the assessment better, and it anyone has techniques to make the code a bit more readable.

Thanks in advance,
dissidenttux


My code (on CodePen):

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Our Local Solar System</h1>

    <table>
      <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>
      <colgroup>
        <col/>
        <col/>
        <col style="border: solid;"/>
      </colgroup>
      <thead>
        <tr>
          <th colspan="2">&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>
      </thead>
      <tbody>
        <tr>
          <th scope="row" colspan="2" rowspan="5">Terrestrial planets</th>
        </tr>
        <tr>
          <td>Mercury</td>
          <td>0.330</td>
          <td>4,879</td>
          <td>5427</td>
          <td>3.7</td>
          <td>4222.6</td>
          <td>57.9</td>
          <td>167</td>
          <td>0</td>
          <td>Closest to the Sun</td>
        </tr>
        <tr>
          <td>Venus</td>
          <td>4.87</td>
          <td>12,104</td>
          <td>5243</td>
          <td>8.9</td>
          <td>2802.0</td>
          <td>108.2</td>
          <td>464</td>
          <td>0</td>
        </tr>
        <tr>
          <td>Earth</td>
          <td>5.97</td>
          <td>12,756</td>
          <td>5514</td>
          <td>9.8</td>
          <td>24.0</td>
          <td>149.6</td>
          <td>15</td>
          <td>1</td>
          <td>Our world</td>
        </tr>
        <tr>
          <td>Mars</td>
          <td>0.642</td>
          <td>6,792</td>
          <td>3933</td>
          <td>3.7</td>
          <td>24.7</td>
          <td>227.9</td>
          <td>-65</td>
          <td>2</td>
          <td>The red planet</td>
        </tr>

        <tr>
          <th scope="row" rowspan="7">Jovian planets</th>
        </tr>
        <tr>
          <th scope="row" rowspan="3">Gas giants</th>
        </tr>
        <tr>
          <td>Jupiter</td>
          <td>1898</td>
          <td>142,984</td>
          <td>1326</td>
          <td>23.1</td>
          <td>9.9</td>
          <td>778.6</td>
          <td>-110</td>
          <td>67</td>
          <td>The largest planet</td>
        </tr>
        <tr>
          <td>Saturn</td>
          <td>568</td>
          <td>120,536</td>
          <td>687</td>
          <td>9.0</td>
          <td>10.7</td>
          <td>1433.5</td>
          <td>-140</td>
          <td>62</td>
        </tr>
        <th scope="row" rowspan="3">Ice giants</th>
        <tr>
          <td>Uranus</td>
          <td>86.8</td>
          <td>51,118</td>
          <td>1271</td>
          <td>8.7</td>
          <td>17.2</td>
          <td>2872.5</td>
          <td>-195</td>
          <td>27</td>
        </tr>
        <tr>
          <td>Neptune</td>
          <td>102</td>
          <td>49,528</td>
          <td>1638</td>
          <td>11.0</td>
          <td>16.1</td>
          <td>4495.1</td>
          <td>-200</td>
          <td>14</td>
        </tr>

        <tr>
          <th scope="row" colspan="2" rowspan="0">Dwarf planets*</th>
        </tr>
        <tr>
          <td>Pluto</td>
          <td>0.0146</td>
          <td>2,370</td>
          <td>2095</td>
          <td>0.7</td>
          <td>153.3</td>
          <td>5906.4</td>
          <td>-225</td>
          <td>5</td>
          <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>
        </tr>
      </tbody>
    </table>


  </body>
</html>

CSS

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;
}

Hi @dissidenttux

Nice work! Here are some improvements:

  • Slashes on self-closing tags aren’t necessary: <col/> :arrow_right: <col>.
  • When using <colgroup> you need to list all columns of the table to make the HTML valid. You can also use the span attribute on <col> to write fewer lines.
  • The empty cell in the top left corner should better be a <td>. It’s not a header.
  • Your missing the </tr> end tag inside <thead>.
  • When you use rowspan the scope should be rowgroup.
  • The multi-row <th>s need to be in the same row as the following cells. For example:
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <!-- more data -->
    </tr>
    
  • No need for the rowspan="0" on the dwarf planets.

Generally, I recommend using the W3C HTML validator when working on such complex HTML structures. The error descriptions are sometimes a bit cryptic, but you can ask here anytime. :slightly_smiling_face:

See you,
Michael