Hi I tried the Structuring planet data assingment. Here is my solution, please have a look and give feedback. Thanks
https://tushar9604.github.io/planets-data-table.html
Hi @tushar9604, thanks for sending in your assessment work!
I had a look, and it functions perfectly; this is is really good work — well done!
The only thing I noticed is that you’ve got a couple of extra broken closing table cell tags — /td> — appearing in the 4th row down in the content.
Apart from that, it’s all great.
@chrisdavidmills thanks for your feedback on my solution this one and all the other ones too.
Regarding the mistake in the closing table cell, I can’t find the broken -/td>- . I validated my solution at
https://validator.w3.org/nu/
no errors came up there, so i am unable to correct the mistakes. Can you please be little more specific about the error. Like line no. or some text value displayed in the table cell which i can use to locate the error.
Also thank you very much for posting all the learning material. I have tried learning web development from quite a few source paid and free both. But I found this one the best and most fruitful.
Thanks again.
Glad you are finding it helpful!
I can see the broken tds on the “Earth” row. " 5514/td>" and " 15/td>"
@chrisdavidmills thanks for pointing them out. I saw there were couple of the data cell closing tags were missing “<”. I corrected them. Thanks for your feedback.
I challenged “Assessment: Structuring planet data”.
It is published on github pages.
Please rate it!
Thanks!
Hello again @amaryllis,
This one again looks pretty much perfect. You are doing really well at these, congratulations!
The only slight nitpick I had was that you had an extra aserisk in “Dwarf planets*”, and I’m not sure why this is. But this is only a very minor point.
1 Like
Hello!
I made my try to build the planets table.
There’s a difference in the data background color. I guess it’s because I structured the <tr> tags differently from the original. I would like to know if my structure could give me troubles in a future development.
Hi there @Armiixteryx, welcome, and thanks posting your code here.
Looking at it, it looks pretty good. the only oddity I can see is that you’ve put all your top level table headers in separate rows. You don’t need to do this, as you can actually put multiple headers inside a single row. What you’ve done is slightly overcomplicating things, and is the likely reason that the zebra-stripe colouring has been thrown off a bit.
For example
<tr>
<th colspan="2" rowspan="5" scope="rowgroup">Terrestial planets</th>
<tr>
<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>
Could just be written as
<tr>
<th rowspan="4" colspan="2" scope="rowgroup">Terrestial 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>
Look at our version and view the source code, and you’ll see what we did.
even though this assignment took me about 45 minutes to fully finish, im feeling so happy
<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">
</colgroup>
<thead>
<tr>
<th colspan="2"></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>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="4" colspan="2">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></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 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>
<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></td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">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></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></td>
</tr>
<tr>
<th colspan="2" scope="row">Dwarf planets*</th>
<th scope="row">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>
Hi there @bjKhapung, thank you for sending in your code!
I have had a look, and it looks very good; well done! I can see a couple of very minor style differences, but nothing really worth mentioning.
Hi, I had a go on this assessment task. I got it through the html validator and was introduced this message:
Error : A table row was 12 columns wide and exceeded the column count established using column markup (3).
Any feedbacks on my code or how to close the error message?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Table template</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Table template</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 black solid;">
</colgroup>
<thead>
<tr>
<th colspan="2"> </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>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" colspan="2" rowspan="4">Terrestial 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> </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">Jupitar</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> </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> </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> </td>
</tr>
<tr>
<th scope="rowgroup" colspan="2">Dward planets</th>
<th scope="row">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>
Thanks in advanced!
Hi there @UnorthodoxThing, nice to hear from you, and thanks for sending in your code.
Your code looks really good — you’ve even added a lang attribute to set the document language, which is a best practice that I failed to do in our version.
The only thing I could see wrong was a small typo — “Dward” -> “Dwarf”.
As for the error message, it is basically saying that our <colgroup> is only defining three columns:
<colgroup>
<col span="2">
<col style="border: 2px solid black">
</colgroup>
whereas we are using a total of 12 columns in our rows, which is too wide for the number of columns we specified.
You could fix this by explicitly specifying 12 columns, like this:
<colgroup>
<col span="2">
<col style="border: 2px solid black">
<col span="9">
</colgroup>
This fixes the validator message, but it doesn’t improve the rendered code in any way, and takes up more lines of HTML, which is why I excluded it. Remember that the validator is a useful tool for identifying problems, but it is not always a complete 100% authority. You’ll often come across sites that don’t validate; it is usually a good idea to make them validate as much as possible, but not always essential.
1 Like
I don’t understand what they mean by this. Do they mean that the background color that is already existing has to be transparent? Or the color you are trying to add?
Because it worked fine in this part of the tutorial: https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html
edit: my apologies, it didn’t quote you when I replied, and didn’t attach the reply to your comment… but I’m referring to the earlier issue of placing background color into a <col> element.
Sorry, I meant you can add a background color to the column, but it will only be visible if the cells that are inside that column (e.g. the <td>s that define the cells) do not have a background color applied to them. If they do, then that color will appear over the top of the column, so you won’t see it.
1 Like
Hey @chrisdavidmills, I appreciate the encouragement you have been giving me. It has been a pleasure going through these with you.
Here’s this next one, if you could please review it and let me know of any suggestions. Thank you!
Code: https://github.com/Pawper/Structuring-Planet-Data---MDN/blob/master/blank-template.html
Live: https://pawper-learning-archive.hashbase.io/Structuring-Planet-Data---MDN/blank-template.html
Hi there @Pawper — I’m so glad you are enjoying your learning with us!
So this next one is really good too — it is pretty much perfect, and I see you’ve fixed a typo. I can’t believe I spelt “terrestrial” wrong 
I’ve corrected it in our online example now.
The only thing I noticed that you could improve on slightly is where you use multiple <col> elements. Instead of putting
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
<col>
You could just put
<col span="9">
As a shorter equivalent.
1 Like
Oh that’s a great idea! Much cleaner.
Honestly I didn’t even notice the spelling haha.
Thank you!
老师您好！请问如何进行评定作业！我作业已经完成了，如何给您上传代码呢？