"Structuring planet data" assessment

@chrisdavidmills

Hello Chris Mills!

I finally finished the table assessment, but when I put it through the w3c validator, it gives me
"Error, A table row was 1 columns wide, which is less than the column count established using column markup (12)."

also I tried putting the mdn one on w3c validator but same result (but more errors because the tag did not span to 12 in the col markup? thats what I did.)

please help!

<!Doctype Html>
<html>
    <Head> 
        <meta charset="utf-8">
        <meta name="description" content="Data table for planets">
        <title>Plant data table</title>
        <link rel="stylesheet" href="table.css" type="text/css">
    </Head>
    <body>
    <h1>Planet Data Table</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>
          <th colspan="2">&nbsp;</th>
          <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<br> of day<br>(hours)</th>
          <th>Distance <br> from <br> Sun <br> (10<sup>6</sup>km)</th>
          <th>Mean <br> temperature <br> (<sup>○</sup>C)</th>
          <th>Number of moons </th>
          <th>Notes</th>
        </tr>
      </thead>
      <tbody>
          <!--Terrestial planets + Mercury-->
          <tr>
            <th colspan="2" rowspan="4"> Terrestial planets</th>
            <th>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>
          <!--Venus-->
          <tr>
               <th>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>      
          <!--Earth-->
          <tr>
              <th> 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>
          <!--Mars-->
          <tr>
              <th>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>
          <!--Jovian Planets-->
          <tr>
              <th rowspan="5" colspan="1">Jovian planets</th>
          </tr>
          <!--Gas giants + Jupiter-->
          <tr>
              <th rowspan="2"> Gas giants </th>
              <th>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>
          <!--saturn-->
          <tr>
              <th>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>
          <!--Ice giant + Uranus-->
          <tr>       
              <th rowspan="2">Ice giants</th>
              <th>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>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>
      </tbody>
          <!--Dwarft planets + Pluto-->
        <tfoot>
            <tr>
              <th 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>
        </tfoot>
    </table>
    </body>    
</html>
1 Like

also I tried putting the mdn one on w3c validator but same result (but more errors because the tag did not span to 12 in the col markup? thats what I did.)

Hrm, this is really odd - you are right about why the example did not validate (in this case it doesn’t really matter - validation is only a means to an end, and should not be used as the source of all truth all all times)

When I added an extra col tag to the MDN finished example to make the number of columns up to 12, as you did:

  <colgroup>
    <col span="2">
    <col style="border: 2px solid black">
    <col span="9">
  </colgroup>

It validated fine.

(The finished MDN code is here: https://github.com/mdn/learning-area/blob/master/html/tables/assessment-finished/planets-data.html)

I fixed it, looks like I miss placed “Gas Giant” and used some weird solution involving extending “Jovian Planets” by and extra rowspan (5!).

Many thanks!

P.s This MDN guide is amazing, im almost done with the first CSS module and its tiers better than my old books and HTML and CSS!
If you’re the one who compiled most of this then I just want to say that your guides rock and is beyond excellent!

4 Likes

I fixed it, looks like I miss placed “Gas Giant” and used some weird solution involving extending “Jovian Planets” by and extra rowspan (5!).

Ah, cool — glad you worked it out. :wink:

P.s This MDN guide is amazing, im almost done with the first CSS module and its tiers better than my old books and HTML and CSS!
If you’re the one who compiled most of this then I just want to say that your guides rock and is beyond excellent!

I wrote pretty much the whole thing except for a few bits, so thanks :slight_smile:

Seriously, thanks for the kind words, this means a lot.

5 Likes

Hello! And another one assesment for check:
structuring planet data from https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data
Here is my solution:
https://eggofevil.github.io/structuring-planet-data/
Thank you!

Hi there

could anyone give me feedback,please?

Table template

Table template

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
      <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" 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>
      <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>
      </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>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>
      </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>
      </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>
      </tr>
      <tr>
      <th colspan="2" scope="rowgroup">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!

This is looking pretty good — well done on a good effort. I’d also like to invite you to look over our finished example and marking guide, to give you more of an idea:

Hi Chris,

For the structuring planet data assessment, is it possible to highlight the planet names column in a different colour?

I tried to add the background color property to the style attribute under the col element, but it doesn't seem to work when i open the file in the browser.

Best Regards,
Damon

Hi Damon,

I think this should be possible, yes. Do you want me to have a look at your code? Feel free to send it to me, at cmills@mozilla.com

Hi Chris,

Thanks for the reply!

Here is my code, its identical to the one in your marking scheme except i added in the background-color property to the style attribute in the col element. Is something in css that is preventing the background-color from showing?

<colgroup>
        <col span="2">
        <col style="border:4px solid black; background-color:aqua">
        <col span="9">
 </colgroup>

Sorry for the previous reply, i finally know how to add codes to comments. :joy:

Ah, you are right - this doesn’t work. So, I’ve done a little digging, and found this:

https://www.w3.org/TR/CSS21/tables.html#columns

It turns only a very small subset of properties can be used in this context. background-* properties are allowed, but only if the cells are rows have a transparent background.

I see, thanks Chris!

Please check it out !!

Table template

Planets data

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.)
			</th>
			<th id="name">
				Name
			</th>
			<th id="mass">
				Mass (10<sup>24</sup>kg)					
			</th>
			<th id="diameter">					
				Diameter (km)
			</th>
			<th id="density">
				Density (kg/m<sup>3</sup>)					
			</th>
			<th id="gravity">					
				Gravity (m/s<sup>2</sup>)
			</th>
			<th id="length-of-day">					
				Length of day (hours)
			</th>
			<th id="distance-from-sun">
				Distance from Sun (10<sup>6</sup>km)					
			</th>
			<th id="mean-temp">
				Mean temperature (°C)					
			</th>
			<th id="no-of-moons">
				Number of moons
			</th>
			<th id="notes">
				Notes							
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th rowspan="4" colspan="2" scope="rowgroup">
				Terrestial planets
			</th>
			<th headers="planet-name-mercury">
				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 headers="planet-name-venus">
				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 headers="planet-name-earth">
				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 headers="planet-name-mars">
				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>
				
			</td>
		</tr>
		<tr>
			<th rowspan="4" scope="rowgroup">
				Jovian planets
			</th>
			<th rowspan="2" scope="row">
				Gas giants
			</th>
			<th headers="planet-name-jupiter">
				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 headers="planet-name-saturn">
				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="row">
				Ice giants
			</th>
			<th headers="planet-name-uranus">
				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 headers="planet-name-neptune">
				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="rowgroup">
				Dwarf planets*
			</th>
			<th headers="planet-name-pluto">
				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 @chirag7145! There was a bit of code missing from the start of your example, but I plugged what you sent over into my finished example, and it worked great - well done! What you had written seemed to render as the expected table perfectly.

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

In the marking guide, Block/structural semantics (section 4) is says:

  • First of all, each row needs to be put inside the <th>

Should that be <tr> instead?

Ha, there was a mistake — it should actually be <tbody> rather than <tr>, but thanks for bringing this up! I’ve fixed it now.

Oh, true; suppose you wouldn’t put all the rows in a row :upside_down_face: Thanks Chris!

I don’t understand the <col span="2"> in the source code.

(Also: I targeted the for the border with CSS by using colgroup col:nth-child(3).)

Summary
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <table>
      <colgroup>
        <col>
        <col>
        <col>
      </colgroup>
      <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>
      <thead>
        <tr>
          <td colspan="2">&nbsp;</td>
          <th>Name</th>
          <th>Mass (10<sup>24</sup>kg)</th>
          <th>Diameter (km)</th>
          <th>Density (kg/m<sup>3</sup>)</th>
          <th>Gravity (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 (°C)</th>
          <th>Number of 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>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>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>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>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>&nbsp;</td>
        </tr>
        <tr>
          <th rowspan="4">Jovian Planets</th>
          <th rowspan="2">Gas giants</th>
          <th>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>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 rowspan="2">Ice giants</th>
          <th>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>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 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>

So in the source code, we have

<colgroup>
  <col span="2">
  <col style="border: 2px solid black">
</colgroup>

<col span="2"> means that this <col> element targets the first two columns of the table. In this case, we are targeting them with nothing, but this means we can then include a second <col> element that includes the styling information for the border around the third column.

<col> elements are a strange feature of tables, but they are kind of useful for targetting specific columns with styles. You are right that you could just use a selector like colgroup col:nth-child(3) instead. You could also use a class, e.g. <col class="important-col">, and then use a rule in your CSS like .important-col { ... } to target that column.