Assessment wanted for MDN Tables, please

Hi there,

Below is a link to my MDN Tables Assessment. I would really appreciate some feedback, especially since I am uncertain about whether or not I appropriately linked all the rows and columns for accessibility purposes:

I would really appreciate an assessment of this from anyone who can spare the time. Thank you!

Hi @MVIVN and welcome to the community :wave:

I ran your code through the HTML validator: https://validator.w3.org/nu/#textarea
There are multiple errors. Could you try to fix them? The easiest way would be to copy your whole CodePen code in between the already present <body> tags on the validator.

If you have any questions about the error messages (sometimes they are a bit cryptic), I’m happy to give you some explanations. :slightly_smiling_face:

When you have fixed the errors, I will gladly have a second look at your code.

Have a nice day,
Michael

PS: Your email address is visible in your post. It ended up in the optional “name” field of your profile. I recommend removing it.

1 Like

Hi @mikoMK, thank you very much! I have updated my profile to remove my email address. I have also removed most of the errors on the w3 validator but I’m left with 5 errors complaining about how some of my columns exceed the column width established during markup and I’m having a hard time understanding where exactly I’ve gone wrong or how to fix this.

Nice updates, @MVIVN

The reason for the remaining errors are that you created a new <tr> after every <th> with rowspan. These <th> elements should all be in one <tr>. It doesn’t matter if they have rowspan or not. Your rowspan values are also to high. I guess you set them to prevent some other error. Here’s a snippet of “Jovian Planets” to get you an idea. (It uses scope instead of headers but I think you’ll get the idea.)

<tr>
  <th rowspan="4" scope="rowgroup">Jovian planets</th>
  <th rowspan="2" scope="rowgroup">Gas giants</th>
  <th scope="row">Jupiter</th>
  <!-- <td> elements with planet data -->
</tr>
<tr>
  <th scope="row">Saturn</th>
  <!-- <td> elements with planet data -->
</tr>
<tr>
  <th rowspan="2" scope="rowgroup">Ice giants</th>
  <th scope="row">Uranus</th>
  <!-- <td> elements with planet data -->
</tr>
<tr>
  <th scope="row">Neptune</th>
  <!-- <td> elements with planet data -->
</tr>

Does that make things clearer?

Michael

1 Like

Thank you so much @mikoMK, that makes a lot more sense to me now! And you are right that I set my rowspans too high because I was having an error wherein if I set the “correct” rowspan value the layout of the table would look incorrect until I added an extra number or two to the rowspan value, and then the table would magically start to look “correct”. That was another problem I couldn’t wrap my head around, but I’m beginning to realise this behaviour is related to my markup being incorrect in the first place. I’ll get to work fixing the remaining errors in my code. Thank you again!

1 Like