"Structuring planet data" assessment

MDN Learn
#21

Hi!
Just finished the Structuring planet data assessment.
Please comment on the markup.
About the validation issue: Seem like you have to refer to all the columns in the collgoup to pass. :sweat:

On line 139 I set the scope for row, instead of rowgroup (MDN code, line 134), since that cel heads for a single row.
please comment.

Here is my code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Planets data</title>
    <meta name="author" content="Clemente del RĂ­o">
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Planets data</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 span="2">
        <col style="border: 2px solid black">
        <col span="9">
      </colgroup>
    	<thead>
    		<tr>
    			<td colspan="2">&nbsp;</td>
    			<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>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<th scope="rowgroup" colspan="2" rowspan="4">Terrestrial planets</th>
    			<th scope="row">Mercury</th>
    			<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>
    			<th scope="row">Venus</th>
    			<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>
    			<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<th scope="row">Earth </th>
				<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>
    			<th scope="row">Mars</th>
				<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="rowgroup" rowspan="4">Jovian Planets</th>
    			<th scope="rowgroup" rowspan="2">Gas Giants</th>
    			
    			<th scope="row">Jupiter</th>
    			<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>
    			<th scope="row">Saturn</th>
				<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>
				<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<th scope="rowgroup" rowspan="2">Ice Giants</th>
    			<th scope="row">Uranus</th>
    			<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>
				<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<th scope="row">Neptune</th>
    			<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>
				<td>&nbsp;</td>
    		</tr>
    		<tr>
    			<th scope="row" colspan="2">Dwarf planets*</th>
    			<th>Pluto</th>
				<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>
#22

Hi there Clemente,

This looks really great, nice work.

Validation issue, yup fair enough, but see my previous comment about validation :wink:

For the row versus rowgroup thing. I think rowgroup is still appropriate, even thought the “group” only contains a single row.

If you want to study our version further, you can do so here:

#23

Hello, I just finished this assessment and I’d like some feedback.

https://codepen.io/LemurM/pen/rryodo

I know a little bit about CSS so I tried putting that in there as well. I think that I wrote more code than I should have, like I think I could reduce it by a lot. What do you think?

#24

Hi there @mariosgiannos2296,

This looks pretty good to me. So you’ve written the styling yourself rather than using my provided stylesheet? Looks fine to me.

A couple of observations:

  1. You’ve styled the <col> elements in your external stylesheet rather than using inline styles like I did. Yours is arguably better practice than mine :wink:
  2. Inside the table you’ve included the table header in a <header> elementm, whereas it should be <thead>. Apart from that, it all looks great. Nice work!
#25

Thanks a lot. It helps when someone tells you you did something right :smiley:

#26

You are welcome. Let me know if you want any more help!

#27

Hello,

Hope you are good.

I would really appreciate if someone could please check my solution.

Thanks.

#28
Table template

Table template

Data aboyt the planets of our solarsystem(planetary facts taken from Nasa's Planetary Fact Sheet - Metric.)
Name Mass
(1024kg)		 Diameter
(km)		 Density
(kg/m3)		 Gravity
(m/s2)		 Length of day
(hours)		 Distance from sun
(106km)		 Mean temperature
(.C)		 Number of moons Notes
Terrestial planets Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our World
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2
Jovian plantes Gas giants Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 -140 62
Ice giants Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14
Dwarf planets* Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 Declassified as a planet in 2006, but this remains controversial.
#29

Hi there @richardthedford — this solution looks really good, well done on some great work. It looks identical to ours, and while there are a few small code differences, there is nothing to remark on — they are functionally similar/identical.

#30

Hi there @keshavgoyal2014 — I can’t really check your code very easily as it has been interpreted and displayed inside the discourse comment, rather than showing the code. The best thing to do is either put the example on a resource like GitHub/Thimble/Codepen, or wrap it in two sets of three backticks (e.g. ```) — that would make the code be shown in the discourse comment rather than interpreted.

Thanks!

1 Like
#31

Dear Chris,

Hereby is my version, i had tried to add the link(github source code and live page), but in last two post – Mark up the letter and structure the page, splash page, i was informed by system, that my posts were flagged as spam.

Data about the planets of our solar system(Planetary facts taken from Nasa's Planetary Fact Sheet - Metric). 
    <thead>
      <tr>
       <td colspan="2">&nbsp;</td>
       <th>Name</th>
       <th>Mass<br>(10<sup>24</sup>kg)</th>
       <th>Diameter<br>(km)</th>
       <th>Density<br>(kg/m<sup>3</sup>)</th>
       <th>Gravity<br>(m/s<sup>2</sup>)</th>
       <th>Length of day(hours) </th>
       <th>Distance from Sun(10<sup>6</sup>km)</th>
       <th>Mean temperature(&deg;C)</th>
       <th>Number of<br>moons</th>
       <th>Notes</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th rowspan="4" colspan="2">Terrestial planets</th>
        <th>Mercury</th>
        <td>0.330</td>
        <td>4879</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>
          <th>Venus</th>
          <td>4.87</td>
          <td>12104</td>
          <td>5243</td>
          <td>8.9</td>
          <td>2802.0</td>
          <td>108.2</td>
          <td>464</td>
          <td>0</td>
          <td></td>
      </tr>
      <tr>
          <th>Earth</th>
          <td>5.97</td>
          <td>12756</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>
          <th>Mars</th>
          <td>0.642</td>
          <td>6792</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 colspan="1" rowspan="4">Jovian planets</th>
          <th rowspan="2">Gas giants</th>
          <th>Jupiter</th>
          <td>1898</td>
          <td>142984</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>
          <th>Saturn</th>
          <td>568</td>
          <td>120536</td>
          <td>687</td>
          <td>9.0</td>
          <td>10.7</td>
          <td>1433.5</td>
          <td>-140</td>
          <td>62</td>
          <td></td>
      </tr>
      <tr>
          <th rowspan="2">Ice giants</th>
          <th>Uranus</th>
          <td>86.8</td>
          <td>51118</td>
          <td>1271</td>
          <td>8.7</td>
          <td>17.2</td>
          <td>2872.5</td>
          <td>-195</td>
          <td>27</td>
          <td></td>
      </tr>
      <tr>
          <th>Neptune</th>
          <td>102</td>
          <td>49528</td>
          <td>1638</td>
          <td>11.0</td>
          <td>16.1</td>
          <td>4495.1</td>
          <td>-200</td>
          <td>14</td>
          <td></td>
      </tr>
      <tr>
          <th colspan="2">Dwarf planets</th>
          <th>Pluto</th>
          <td>0.0146</td>
          <td>2370</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>
#32

Hi @gggshaw007! Thanks for submitting your code, and sorry to hear that you’ve been flagged as spam. I’ll have to look and see if there’s a way that I can mitigate such problems.

I’ve had a look at your code anyhow, and it looks mostly pretty good; well done! I think the only thing I can see that is missing are the scope attributes — these are quite good for accessibility in complex tables. I’ve included links below to our answers, so you can compare and contrast in more detail.

#33

Hello, I finished this assessment and would like an opinion on what I have done.
I know it can be done more easily, but I am still at the beginning.
Best regards,
Cristian Bot
https://thimbleprojects.org/cristucu/552408

#34

Hi there @Cristucu! This looks really good; well done!

The only thing to comment on is that you’ve put the black border around the “Name” column in a slight awkward way. In such cases, it is easier to use the <col>/<colgroup> elements, as shown in our finished example:

This is exactly the kind of case these elements exist for. Bear in mind that you don’t have to put inline CSS onto the <col> elements. You could style the corresponding columns with a CSS class, e.g.

<col class="highlight-border">

and

.hightlight-border { border: 2px solid black  }

I think I should probably change my example to do it this way, as it is arguably better practice.

#35

Thank you so much for your reply. As I am at the very beginning , I am glad I did a good job. The CSS class was on my mind as well but did’t want to put all the th in that class…so I realized it could have been done much easier than what I did. I will try it out your suggestion using CSS.
Best regards and thank you for your hard work and assistance to all of us learning!
Cristian

#36

You’re welcome, glad I could be of help!

#37

I’m trying to understand how the row for Mercury have to be contained inside the <tr> block of the Terrestial Planets, while the other planets (Venus, Earth, Mars) can be on their own <tr> block. I understand that Terrestial Planets’ <th> attribute rowspan="4" wraps around the 4 rows, but that further suggests that Mercury should be on it’s own<tr> block.

Thank you.

    <tr>
      <th rowspan="4" colspan="2" scope="rowgroup">Terrestial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      ...
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      ...
    </tr>
#38

Hi there @Datalighter. I can see how this can be confusing, so let’s discuss it.

When you use rowspan and colspan attributes on a cell, these immediately generate a box of that many rows and columns in size, which will then extend down to subsequent rows. So we immediately have a box extending four rows down and two columns across, containing the text “Terrestial planets”.

The remaining cells defined inside the “Mercury” row will then appear in the top row, to the right of “Terrestial planets”.

Now we go down the the “Venus” row. The first two columns of this row have part of the “Terrestial planets” box inside it. To the right of those two columns, we then have the “Venus” cell, then the others…

In the “Earth” and “Mars” rows, we have the same thing — the first two columns of those rows are also oxccupied by part of the “Terrestial planets” box defined in the “Mercury” row.

Does this make sense? Let me know if you have any more questions.

#39

Hey @chrisdavidmills. Thank you for clarifying this one as well.
Your explanation does make sense.

I was originally confused about the requirement/logic of wrapping Mercury row inside the Terrestial Planets row. It seemed like it would be more intuitive to wrap a separate row for Terrestial Planets, and a separate row for Mercury, Venus, etc.

This is what I imagined at first:

 <tr>
     <th rowspan="4" colspan="2" scope="rowgroup">Terrestial planets</th>
 </tr>
 <tr>
     <th scope="row">Mercury</th>
     <td>0.330</td>
      ...
 </tr>
 <tr>
     <th scope="row">Venus</th>
     <td>4.87</td>
     ...
 </tr>
#40

I see what you mean — dealing with it as a separate entity would make sense. But in actual fact it is defined where it first appears.