"Structuring planet data" assessment


(Clemente del Río) #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>

(Chris Mills) #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:


(Mariosgiannos2296) #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?


(Chris Mills) #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!

(Mariosgiannos2296) #25

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


(Chris Mills) #26

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


(Richard Thedford) #27

Hello,

Hope you are good.

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

Thanks.


(Keshavgoyal2014) #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.

(Chris Mills) #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.


(Chris Mills) #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!


(Gggshaw007) #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>

(Chris Mills) #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.


(Cristian Bot) #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


(Chris Mills) #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.


(Cristian Bot) #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


(Chris Mills) #36

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