HTML Table Assessment wanted for Structuring planet data

Hey there!
I would like to have an assesment for Structuring planet data exercice.

It was a little challenging to position the the cells “Ice giants” and “Gas giants”.

The exercice can be found here:

My code can be accessed on codepen:

Hi @fotoalin and welcome to the community :wave:

Great work on this task! Congratulations :medal_sports:

I have only a few comments:

  • When using <colgroup> you need to make sure to include all table columns (in this case: 12). For this to not be tedious you can use the span attribute:
      <col span="2">
      <col class="name">
      <col span="9">
  • When we have a rather complicated table like in this exercise with <th> elements for columns, rows and group of rows we should use the scope attribute on those <th> elements to help assistive technologies to understand the table structure
  • The “Terrestrial planets” header should be inside the “Mercury” row and should have rowspan="4" instead of 5. You did it correct for the other row groups (“Jovian planets” etc.).

I hope my feedback is valuable to you. If you have any questions feel free to ask :slightly_smiling_face:

Have a nice day,

PS: Your email address is visible in your post. I think it somehow ended up in the optional “name” field of your profile. I recommend removing it.

Thank you so much you took the time to review my code. Your feedback it’s super valuable for me and I really appreciate it. I don’t fully understand the meaning of “scope” tag but I’m going to look into some more examples.

1 Like

You’re welcome :slightly_smiling_face:

Here are some examples from this exercise to better understand the scope attribute:

  • “Diameter (km)” is a header for the column:
    <th scope="col">Diameter (km)</th>
  • “Uranus” is a header for the row:
    <th scope="row">Uranus</th>
  • “Jovian planets” is a header for a group of four rows:
    <th rowspan="4" scope="rowgroup">Jovian planets</th>

I hope that makes it a bit clearer.

1 Like