"Assessment Needed for Structuring Planet Data"

MDN Learn
#1

Hello, please can anyone be kind enough to help me with assessment of Structuring Planet Data assignment? I have completed it and need to know my current competence level. Below is the link to my completed work.

“https://codepen.io/Goodspeed22/pen/xxyOxGN”

The next link below is where the assignment originates from.

“https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data”

Thank you.

#2

Hi @eleojo_shaibu and welcome to the community :wave:

Congratulations! Great work :sparkles:

Here are some comments:

  • 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. This would be fine:

    <colgroup>
  <col span="2">
  <col style="border: 5px solid brown;">
  <col span="9">
</colgroup>

  • The top left cell should be a <td>. (It’s not a header.)

  • You don’t need &nbsp; in empty cells.

  • In such complex tables it would be good to use the scope attributes on all <th>. This will make it easier for screen reader to understand the table structure. For example:

    <th rowspan="4" colspan="2" scope="rowgroup">Terrestrial planets</th>

  • It would be better to also use <th> on the names of the planets. Together with the scope from above every number in the table gets a meaning. For example, let’s look at the number “0.330”: The browser will then understand it as: 0.330 is the “Mass” of “Mercury” which is a “Terrestrial planet”.

I hope that helps. Please ask if something is unclear. :slightly_smiling_face:

See you,
MIchael

#3

Hi community.

Hello @mikoMK,

Thanks for your assessment of my “Structuring Planet Data” assignment.

I have done the necessary corrections according to your comments made.

I have also introduced ‘Id’ and ‘Headers’ attributes to the table instead of the ‘scope’ attribute.

The link below takes you the corrected code of the assignment. Please re-assess it to know if am improving.

Kind Regards.
Eleojo Shaibu

#4

Overall good improvements, but one important thing is wrong. ids are not allowed to have whitespaces. For example:

  • id="Mass (10<sup>24</sup>kg)" :arrow_right: id="mass"
  • id="Terrestrial planets" :arrow_right: id="terrestrial"

This will also lead to shorter headers: e. g. headers="mass mercury terrestrial".

I prefer scope over id/headers, because you’ll have to write much less code. But that’s just my personal taste. The result of both methods, when implemented correctly, is the same. :blush:

As a general advice, you can paste your code into the W3C HTML validator to see if it’s valid HTML. Besides the wrong ids you will also see that the <style> element should go inside <head> (not between <head> and <body>).

#5

Hello community!

Hello @mikoMK. :clap:

Thanks for your help.
I have made all necessary corrections according to your advice.
Oh please tell me I got it right this time. :smiley:

Below is the link of the corrected code ;

Thanks a million.

#6

With great pleasure I can announce that everything is correct now. You have mastered the art of table building. :grin: